Huiqin Gao | UX Designer
Designer, advocate, supportive leader
Ideal@1x.png

Helping families achieve financial security

The easiest way to find real estate worth investing.

Ideal

The easiest way to find real estate worth investing

Ideal@1x.png
 

Background

For: CareerFoundry Course: UI for UX Designers

Length: 80 hours

Skills: Emotional design, typefacing, color palette, mood board, logo design, icon design, imagery

Challenges:

  • To create a responsive website that will help property buyers get started immediately.

  • Personally, I wanted to draw upon my experience with information science to reduce cognitive overload through intuitive task flow and user interface design. I also wanted to extend the scope of the project beyond property searching to include holistic support throughout the home buying process.

What is Ideal?

Ideal is a responsive website that provides property buyers with simple and efficient information on available real estate properties of interest.

Real estate investment is an increasingly popular way for individuals and families to achieve financial security. It’s an exciting and emotional experience, yet it’s fraught with complexities.

While there are plenty of blogs and agencies providing information, often, new buyers struggle to get started without professional guidance. They waste time viewing properties out of their price range or don’t fit their needs.

That’s where Ideal comes in, doing the hard work of finding the perfect properties while the users focuses on what matters to them.

 

 
 

Process

Who are the users?

First, I needed to define a typical user of my platform. To accomplish this task, I used affinity mapping to synthesize my target user’s goals, priorities, and preferences, and translated my understanding into a digital persona.

Ideal’s typical users are people who are busy with their work and daily life and have limited expertise in real estate investing. Our primary user persona is Rashida, as illustrated below:

 
 
01-05 copy 5 (2).png

Build-measure-learn loop

I followed the build-measure-learn loop to come to my design solution.

 

 

Build 1.0

Low-fidelity prototype

 

I used pen and paper to quickly sketch a low-fidelity prototype as the initial design.

At this stage, my ideas included using the onboarding process to collect user preferences to create a personalized profile, tracking user preferences to ensure smart recommendations, making the search results easy to navigate by highlighting user preferences, and including separate pages for each available property.

 
Low fidelity prototype

Low fidelity prototype

 

 
 

Measure

Moderated usability testing

I conducted moderated usability testing to assess the layout, flow, and content of my lo-fi mockup.

One realization that surfaced was that my mockup lacked information on important home-buying factors. As a result, I posted questions to online forums to learn which components buyers find most important when investing in property. The top four factors to emerge from my research were: price, neighborhood, property type, price, and mortgage options. I used this information to inform later design iterations.

“Neighborhood is the most important. Once you bought a house, you can renovate the interior, the exterior, but you can't change the neighborhood.”

“The more desirable the schools, the more valuable the house.”

 
 

 

Build 2.0

Mid-fidelity prototype

 

I applied the findings of the usability testing and research to my second iteration, a mid-fidelity prototype (Appendix A) by improving search and filter criteria and including identified user priorities, such as property type and location. Aiming to help users throughout the property-buying process, I also included a way to contact real estate agents directly through the website.

(In this early stage of the design, the website was called “Perfect Properties” but was later given the more simple name “Ideal”.)

 
Mid fidelity prototype
 
 
 

Build 2.0

Mood boards

I created two mood boards (Appendix B) for consideration. Because the first mood board best reflected the needs of my persona, I selected it to inform my style guide (Appendix C).

 
 
 

High-fidelity prototype

At this point, I was ready to integrate the UX and UI aspects of my website into a hi-fi prototype for further usability testing and design validation.

 

Property Details

Because my usability testing and research identified neighborhood as the most important criteria for real estate buyers, the property profile highlights property location and characteristics, such as proximity to schools, hospitals, and highways.

 
 

Home

Designed to encourage immediate property browsing, the home page is straightforward and suggests available real estate properties based on user sign-up information.

I used hub and spoke structure to help users sift through property options efficiently.

 

Mortgage calculator

For small investors, the size of mortgage payments is as relevant as the cost of the property itself. That’s why I included a mortgage calculator directly as part of the app.

While the property details screen provides an estimated monthly payment on top of the page, the number is calculated on default settings. When the user taps on the estimated number, or scrolls down the screen, s/he can type in specific numbers to get a more accurate mortgage calculation.

The calculator is provided as a progressive disclosure process. When the user needs it, s/he can tap on the “show” button to reveal the calculator And when the user needs to refine more parameters, tapping on “advanced calculator” will do the job.

 
 

 

End product

 

 
 

Appendix

Appendix A: Mid fidelity prototype

Appendix B: Mood boards

Appendix C: High fidelity prototype (open on InVision)

Appendix D: Design specification

Appendix E: Design language system (open on InVision)

Appendix F: Retrospective of Ideal project (open on Medium)

 
 

 
 

Credits