Home.Up
Responsive real estate web app
1
Overview
Home.Up is a responsive web app that is intended primarily for new, small-scale property buyers who are looking to invest for additional income or financial security. Home.Up allows to:
Company
Careerfoundry
My Role
Visual design
Creative direction
- easily look up comprehensive information on properties and residential areas,
- reach out to real estate agents,
- save and compare properties,
- receive listing updates based on user criteria.
Company
Careerfoundry
My Role
Visual design
Creative direction
2
Problem Statement
Real estate is a very complicated industry, which requires a lot of knowledge and consideration of various factors when you make your buying decision. While there are plenty platforms providing information, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range.
Goal
Create a responsive web app that will allow users access all the information they may need from any location while at the same time providing simple and engaging experience.
Tools
Pencil and paper. Figma.
Goal
Create a responsive web app that will allow users access all the information they may need from any location while at the same time providing simple and engaging experience.
Tools
Pencil and paper. Figma.
User Persona
Our user persona Latika represents the target audience - first time property investors. User persona was used to guide my decisions throughout the entire design process.
Design Criteria
Based on analysis of competitors and the information provided in the project brief, I put together user stories and feature requirements that would be relevant to our user.
Early Thinking - User Flows and Sketching
Home.Up web app was designed using the mobile first approach.
I started sketching out user flows and app screens laying out key functionality, UI elements, informational hierarchy, and some interactive patters.
User flow diagram below is a finalized version reflecting the paths the users would follow to achieve their goals.
Mid-Fidelity Prototype
Then, I translated my initial sketches into mid-fi wireframes and refined them by applying grid, principles of visual hierarchy and spacing, and UI design patterns to the designs.
Usability Testing & Iterations
I conducted remote user testing of the mid-fidelity prototype with 5 participants, which helped me to reveal errors and areas for improvement. Based on the initial and further usability test findings, as well as my own considerations, the following changes were made in the next iterations of the prototype:
Landing Page
- Included Create Account, Compare Properties and Look up Local Info calls to action.
- Simplified the search field to decrease cognitive load and provide a cleaner look.
Home Profile
- Organized home criteria for better information scannability.
- Added local information section.
Filter
- Added filter indicator to show how many filters were applied.
Request Information
- Implemented auto fill for user's name and email.
Favorites | Compare Properties
- Added "Add Property" call to action.
- Combined all the comparison criteria into one table.
- Added a pop-up indicating how many properties can be selected for comparison.
Menu
- Reorganized and grouped menu items for better categorization.
- Incorporated Compare function into the Favorites section because I learned that users would expect to compare properties they had already saved.
- Increased menu font size.
Moodboards for Visual Direction
Based on the design specifications and partial branding guidelines, I developed two different directions to Home.Up aesthetics, feel, and tone.
Elegant Minimalism moodboard is representing airy, light visual direction with smooth lines and a limited natural neutral color scheme for a clean Scandinavian look. Modern Bold moodboard is going for a more energetic, colorful, and modern feel with urban architectural influence. While both moodboards are stylish and clean, the first moodboard might appear a bit generic for the target audience. I decided to move forward with Modern Bold as it may appeal better to our user persona for its modern, confident and, at the same time, friendly feel.
Style Guide
With reference to the chosen moodboard and the project brief, I created the app's visual concept and then a Style Guide to keep design consistent, branded and well thought out across the board.
Mockups and Interactive Prototype
Once the mockups were finalized, I used Adobe XD to animate buttons, transitions and small interactions in the prototype to create a more engaging experience and the feel of the final product.
Responsive Design
With mobile prototype ready, I took on to create the responsive designs for Desktop and Tablet sizes.
