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 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 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.
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.