top of page
TINY DREAMS
Minimize your footprint.
Maximize living.
ROLE:
UI Designer
DURATION:
Two Months
TOOLS:
Figma, Miro, Pen & Paper
1. OVERVIEW
Background
When considering investing in real estate, the most eco-conscious choice many new home buyers are moving towards is the tiny home model.
Benefits of investing tiny:
-
Lower overall costs.
-
​High energy efficiency.
-
Flexibility in location.
-
Smaller, greener footprint for those looking to reduce their impact on the environment.
Objective
Unseasoned tiny home buyers need access to reliable, uncomplicated information about their potential property investments. And, tiny home builders want a resource to help them design and build their tiny dream home with a qualified building team or resources for their DIY project.
Solution
-
Make searching for a tiny home an easy experience that’s fun and inspiring.
-
Provide a responsive web app and resource that makes searching easy and accessible.
-
Uphold a high set of quality standards for both the sellers and builders, making investing more reliable and less of a risk.
-
Guarantee buyers and builders are using the best tool out there to transition into tiny home living.
Overview
2. USER PERSONA
User Persona
Task Flows
3. TASK FLOWS & WIREFRAMES
WIREFRAMES
I starting to sketch out the basic layout out for the visual design using pen and paper. From there I took the designs to the next level in Figma as I started to build the framework digitally. From these initial wireframes I was able to pinpoint potential opportunities for improvement as I moved into next iterations.
Wireframes
User Stories
It’s important to keep the user in mind throughout the design process. This specific set of user stories, or task flows, are the what goals the user is trying to achieve while using TINY DREAMS as they research a new home to buy or build.
Examples of two user stories are shown low and mid-fi wireframes below.
User Story #1
“As a person in search of a tiny house to purchase, I want to be able to browse without signing up for an account just to get an idea of what is out there.”
User Story #2
“As a house buyer, it’s important that I can search based on specific features based on my personal space and eco-efficiency needs. I’d also like to be able to save my searches to revisit when I return.”
4. MOOD BOARD
Branding guidelines for TINY DREAMS real estate app
-
Minimal & Clean look and feel
-
Elegant, Stylish & Sophisticated​
-
Contemporary architectural design
-
Colors evoke a sense of spaciousness - Dark blues, sage green & dusty rose
The branding ideas for TINY DREAMS have been inspired by contemporary minimalism.
I approached color similarly, thinking about the vastness of desert landscapes and their warm, yet grounding expanses.
The dark blue and green hues evoke a feeling of trust, while the dusty rose and sage green evoke a sense of connecting with nature and abundance.
Mood Board
5. STYLE GUIDE
Style Guide
TYPOGRAPHY
COLORS
BUTTONS
LOGO
ICONOGRAPHY
UI ELEMENTS
IMAGERY
Imagery guidelines for TINY DREAMS real estate app
-
Minimal & Clean look and feel
-
Elegant, Stylish & Sophisticated
-
Luxury standard
-
Contemporary architectural design
6. FINAL DESIGN
Final Design
I designed TINY DREAMS using multiple breakpoints for multiple screen sizes, which allows for a fully responsive web app experience.
7. CONCLUSION / LEARNINGS
Designing for a responsive web app can seem intuitive but defining the appropriate breakpoints requires a clear vision and systematic approach. The time spent organizing my layout grids was insightful and definitely paid off.
I also really enjoyed working out the visual feel of this project using a mood board. I found the colors and branding were greatly informed using this visioning method.
Conclusions
.png)
bottom of page