Dream Home
A responsive web app designed for CareerFoundry UI Specialization course.
UX/UI Designer
THE CHALLENGE
Buying a home for the first time is daunting. First-time home buyers need a resource that connects them with ideal properties and real estate professionals to guide them through the process.
THE TOOLS
Adobe XD
Figma
Illustrator
Photoshop
Color theory
Typography
THE GOAL
Design a contemporary, welcoming interface that simplifies the search for a new home and connects users with the resources they need.
PROCESS
This project was primarily focused on the UI Design:
UX DESIGN
Conceptualize with user flows and low-fidelity wireframes
INSPIRATION
Consider design options to support concept by creating moodboards
VISUAL DESIGN
Implement color, typography, and iconography
BREAKPOINTS
Adapt to tablet and desktop breakpoints
PRESENT & HANDOFF
Polish up design into mockups, create style guide and asset files for handoff
DELIVERABLES
CLICKABLE MOBILE PROTOTYPE
DETAILED CASE STUDY
UX DESIGN
USER FLOWS
With the emphasis of this project on UI design, I approached the UX design by creating user flows and then moving on to rapid prototyping.
I identified my target audience as millenials between the ages of 30-45 who are looking to buy their first home. The three most important user tasks would be:
USER GOALS
1. Create a profile containing all my property criteria, so that I am recommended results most relevant to me.
2. Search and filter properties, so that I can find good matches based on my needs.
3. Contact the right professionals if I am interested in a property.
LOW FIDELITY WIREFRAMES
Following a mobile-first approach and referencing my user flows, I created low-fidelity wireframes for mobile:
INSPIRATION
MOODBOARDS
With the basic UX of my app in place, I moved onto finding inspiration for the aesthetic life of my app. Initially, I created two moodboards, each modern and stylish, but with different stylea and color palettes.
I created a dark, moody, high contrast moodboard with straight, solid lines, as well as a light, playful, neutral moodboard with more circular shapes.
Personally, I prefer the drama of the darker theme and I really like the pops of orange. It’s trendy and modern, but ultimately I thought it might be a bit too heavy for a real estate app.
Real estate photos often are very bright and light with plenty of white walls to make a property look more spacious. So, I decided to move forward with the second moodboard, which is still very trendy but also more relaxing with its neutrality.
Additionally, this moodboard meets the project brief suggestions for greens and blues. The three keywords given in the brief were clean, quick, & smart. I found similar words that I find more descriptive: Pristine, Swift, & Playful.
VISUAL DESIGN
COLOR PALETTE
After establishing the visual style of my app, I moved onto creating mid-fidelity wireframes and implementing my chosen color palette.
ICONOGRAPHY
Iconography can communicate a lot in the context of real estate. Inspired the icon sets I found in my research, I created icons for Dream Home that look hand drawn. .
TYPOGRAPHY
I chose Eigerdals for headings and Montserrat for the body of Dream Home, which mimick the Swift, Pristine, & Playful qualities of the app.
BREAKPOINTS
With the mobile design nearly complete, I moved onto designing for larger breakpoints. My intention was to keep the layout clean, but gradually include more information as the breakpoints got larger.
Mobile, Tablet, & Desktop
PRESENT & HANDOFF
STYLE GUIDE
Finally, I compiled all the necessary elements into a STYLE GUIDE and created a few mockups to show off my designs.
HAND OFF
Lastly, I packaged it all up for developers: ASSETS FOLDER
CONCLUSION
Throughout this project, the most important lesson I learned was the importance of developing and aesthetic style in UI that supports the UX goals so that a product stays cohesive on all levels. It's very easy to make decisions because I just like the way it looks, but it's much more effective in the end to make design decisions that are backed up by UX research.
For example, in choosing which moodboard to move forward with, my personal preference in terms of color and style was the first dark and moody version I created. However, in the research I did initially on real estate apps, I noticed that postings tend to favor bright images with lots of white emphasizing spaciousness and chose the moodboard that would best support this concept. It makes sense how this would make a home look more attractive, but I also wanted the app itself to be cohesive visually for the users.
In the end, because I used my initial observations in the UX process to validate my design decisions in the UI process, the final product I arrived at is visually clean, cohesive, and user friendly.
Back up to: CLICKABLE PROTOTYPE
Copywright Anna Jennings 2023©