MyHome Real Estate App

Case Study: Real Estate App
Role: UI/UX Design
Duration: May-June 2022
Tools: Figma, Miro, Adobe Illustrator, Adobe Photoshop

MyHome is a responsive web app that is primarily for new, small-scale property buyers who are looking to purchase a property for additional income or financial security. 

 
 
 

PROJECT BRIEF

Problem Context

Real estate investment is an increasingly popular way for individuals to achieve financial security. Buyers new to the market may struggle to get started without professional guidance and waste time viewing properties they are not interested in. This web app will provide them with the expertise needed to get started efficiently. 

The Solution

Create a responsive web app that allows users to search and view properties that match their property criteria across various devices. Users needs to be able to view the property profile, calculate their mortgage payments and contact their real estate agent to be able to make an informed decision on where to invest.

 

USER PERSONA

User Needs and Goals

The target audience is the unseasoned buyer who needs access to reliable, uncomplicated information about their potential property investments. The app will be user-friendly, and provide comprehensive information about the property before spending time on-site, as well as serve as a communication tool to access their real estate agent.

 

User Stories and User Flows

User Story 1

As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.

User flow

Low-fidelity sketches


User Story 2

As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them.

User Flow

Low-fidelity sketches


User Story 3

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.

User Flow

Low-fidelity sketches

 

Keywords and Mood Board

These keywords comprise the core values of the app:

Trustworthy
Systematic
Supportive

A mood board served as the aspirational context for the app’s look and feel which includes color palette, images, typography and personality.

 

Style Guide

Once the visual direction was defined, the final color palette, typography, imagery, icons and other elements were designed and photography style outlined.

 
 
 

 
 

 
 

 
 

 
 

 


 

WIREFRAMING

High-Fidelity Prototype

I refined the screens that addressed the app’s core features:

  • Inputting criteria for the property search

  • Saving property listings into a folder

  • Sharing the folder of listings with the user’s real estate agent

  • Providing an interface that calculates the user’s monthly payments

 

RESPONSIVE DESIGN

Designing for Different Breakpoints

After designing for a mobile app, the design was adapted for different breakpoints including the desktop and iPad.