Hōme is a responsive real estate web app that has been curated for individuals who are looking to find a fully automated smart home.
the problem
Buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to get started efficiently.
Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site.
The solution
Create a user-friendly, responsive web app containing a database of available residential properties and land, and comprehensive information on each listing.
User research: user persona
Disclaimer: Information in this persona has been provided by CareerFoundry within the creative brief.
ideate: user flows
I created 5 user flows provided from the information within the content brief. 3 out of 5 flows are listed below (here’s the link to all of the flows):
As a user, I want access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.
As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.
As a user, I want to be able to contact the right people if I am interested in viewing a property, so that I schedule a viewing.
Ideate: Mid-fidelity wireframes
Now that the flows have been established, it’s time to add in the content.
User flow: As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.
User flow: As a user, I want access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.
Ideate: Moodboard
The visual brand direction of the app was either going to be a bohemian and earth toned interface, or a futuristic and modernized interface.
Based on how technologically advanced Rashida is and how frequently she depends on technology for her career, social, and personal life daily, I decided to create a futuristic, sleek, and clean interface that matched with the user’s needs the most.
Design: high-fidelity wireframes
With a visual brand identity selected, it’s time to start bringing the vision to life.
User flow: Viewing information about listings/Saving listing to your profile
Design: Style Guide
Here’s a link to my Style Guide and Design System (which includes UI Elements, Typography, Color Palette, Imagery, Logo, Iconography, Components, Grids, and Breakpoints for mobile, tablet, and desktop).
Final Design: Mockups for different breakpoints
final design: mockups
User flow: Onboarding and Personalized Set Up
User flow: Search and filtering properties
User screens: Find Agent, Schedule a Tour, User Profile
Prototype
Due to time constraints, all adjustments have been made accordingly from the advice of my mentor and tutor.
Here’s the link to my prototype.
Prototype: Animation
Loading…
I chose this shape to signify a geometric flashlight which represents the app processing the filters that the user has made, hence finding their perfect property.
Hover
When user is browsing through different options of properties, the price shifts and an ellipse appears, showcasing a preview of the property, which prompts users to click and view the listing.
Testing: Logo
The logo was a challenge for me, because I wanted something sleek and modern, yet comforting. Futuristic typefaces are usually very abstract and aren’t super readable, so I decided to put it to the test.
I tested 30 participants that have used a real estate app before (Trulia, Zillow, Realtor)
I chose the second logo design because participants chose this design overall.
After analyzing the feedback, I followed suggestions and made adjustments by matching the stroke thickness for both the font and the home icon to match better.
Here is the final logo design:
Conclusion
What I’ve learned
The balance between spacing by multiples of 8 (or 4 for smaller elements), left/aligning, and following your layout grid.
Be conscious and alert of how layout and elements will look on different breakpoints when designing.
Strengthened my overall understanding of creating variants, components, auto layout, animation, and microinteractions.
Challenges
With this project, I decided to challenge myself and take a completely different approach to my other responsive application, Stimulate. I designed HOME in dark mode, so I had to learn how to properly transition colors to look attractive but also accessible within dark mode.
It was challenging for me to design a futuristic app without it looking cheesy or unrealistic, which is why the logo was such a hard choice for me to decide. To balance out the coldness from the chosen logo, I added beautiful imagery and bold headings within the app, and also condensed the logo down to the home icon for mobile breakpoints.