Homebase Landing Page Multi Device Mockup

Your Homebase for Real Estate!

A responsive web application for finding, saving, and comparing properties.

VIEW PROTOTYPE

PROBLEM STATEMENT

Real estate investment is often complicated and first-time buyers struggle to get started and waste time viewing properties outside their budget. They need an app to quickly match them with relevant properties that fit their criteria.

Overview

My Role

UX/UI Designer

Timeline

July - August 2021

Methods

User Survey
User Flows
Information Architecture
Wireframes
Prototypes
Preference Test

Tools

Figma
InVision
Balsamiq
Proto.io
Typeform
Usability Hub

A variety of mobile mockups showcasing the Homebase UI.

The Buyer

Avatar of primary user persona, Rashida.
“I’ve been considering buying property, but need a tool that can help me find exactly what I’m looking for, quickly!”

Rashisa

  • She/Her, 42
  • IT Consultant
  • Married with 2 kids
  • Master at multitasking, always on-the-go
  • Technology wizard, follows the tech trends

Goals

  1. Invest in property for financial security
  2. Access the info needed for fast decision-making
  3. Find the right properties without wasting time

    The Foundation

    The Blueprints

    Lo-Fi Wireframes

    Creating a Property Profile

    Homepage

    Property Listing

    Property Comparison

    Mid-Fi Wireframes

    Before refining the design, I conducted a survey to understand which filtering criteria is most important and which aspects of existing apps are confusing or unnecessary.

    Size and neighborhood features ranked as the top 2 criteria, so they are shown at the top where they are easy to find.

    It is difficult to find the location on the map and to understand the layout of space from photos, so I included a Google Maps integration and a link to the floorplan above the fold.

    Another pain point is switching back and forth looking at multiple properties, so I needed to address this with my compare feature.

    The Challenge:

    Show 2 or more properties on the same screen, but they need to be legible.

    Iterations

    1. The tiny thumbnail images and dense text don’t create an easy at-a-glance comparison.

    2. Here users can scroll to see the third property, and the visual hierarchy is improved for easier reading.

    3. Shared labels, larger/shorter text, and the addition of CTAs make this feature much more useful.

    A Fresh Coat of Paint

    High-Fidelity

    Rashida can create a detailed profile to receive relevant reccomendations.

    A percentage match quickly shows how closely a property fits her criteria.

    Rashida can easily compare properties side-by-side.

    Larger Breakpoints

    Mobile

    Tablet

    1. Navigation is expanded.
    2. Textlinks overlay the images they reference.
    3. Verticle scroll is shown as horizonal tab bar.

    Desktop

    4. Users can select properties to compare right from the listing screen.
    5. The full contact form appears below the fold.

    Custom Finishes

    The Punch List