HomeSeek
UI/UX Design Case Study
Brief
HomeSeek is a responsive web app that provides you with all you need to find investment property of your dreams.
HomeSeek was designed to take the formidable task of investing in real estate and make it simple, approachable, and fun.
Role
Sole UI/UX Designer
Tool
Figma | Marvel | Pen & Paper | Milanote | Adobe Color | Lucid Chart
User Persona : Jessica | 34 | IT Consultant | 2 Kids
As an IT Consultant for a growing tech company, Jessica is frequently on the go, and often holds meetings by phone in her car while driving. She is good at multitasking and relies heavily on technology to help her with this.
“I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for, quickly!”
Goals
Jessica makes a good living and wants to invest in property beyond the city for increased financial security for her family.
She wants to find the right information for fast decision making.
She wants a tool to help her find the right properties so as not to waste her time.
Tasks
Search for properties, inputting criteria relevant to what she’s looking for
Easily view and return to listings she’s interested in
Receive relevant and comprehensive information about properties
User Stories
As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.
As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.
As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them.
As a user, I want access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.
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
To provide the most enjoyable and intuitive experience to the person interacting with my app HomeSeek, I have to create simple and intuitive navigation with uncomplicated pathways to perform tasks.
Initial Wireframes
With the key features and user flow defined, I started to capture my ideas by creating low-fidelity screens on Figma. It enabled me to examine my ideas before moving onto high-fidelity wireframes.
Landing Page
Sign-Up
Onboarding- Profile Setup
Listing
Moodboard
The creation of a moodboard was useful to define the style of the web app and was an important reference point throughout the visual design process. This look reflects some of the tones and values of the project brief and foundational research, which will give direction to the visual design of the application moving onto high fidelities.
Style Guide
Color Palette
I chose monochromatic colors for HomeSeek as I feel it creates a harmonious, visually cohesive look and doesn’t draw attention to itself, but lets the content shine. This also helps associate with a specific, memorable color.
Typography
Logo
The logo uses one of the app’s primary colors (#166EA8) and contrasting off-white color (#E9E9E9). The wordmark is used to introduce the company, but not placed throughout the application.
The app logo (H) will be used for display at the top left-hand side corner of the ‘Properties Listing Page’ and on a few other parts of the app.
The Logo rotates to signify loading between clicks and screens.
Font: Avenir Next (Heavy), #166EA8 and #E9E9E9
UI Elements
High Fidelity Wireframes
After the style guide for HomeSeek was created and locked in I went on to transform previously created wireframes to high fidelity wireframes.
Landing Page
Onboarding - Profile Setup
Sign-Up
Listing
Map and Menu
