top of page
HH Hero Image.png

Introduction

​

Home Hunters is a responsive web app that I created while I was enrolled in the UI Design course at CareerFoundry. The web app helps users invest in real estate which can often be a complicated process.

​

​

​

The Objective

​

While there are plenty of blogs and agencies providing information, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to get started efficiently.

​

​

​

My Role

 

For this project, my role was to explore the problem at hand, conduct research to understand the needs of users, utilize UI principles to create a wireframes, and build a prototype to create a positive experience while investing in real estate.

lightbluewave.png

User Persona

 

After researching about other real estate apps, I was able to put together some key insights, which helped me create a persona with goals and needs. 

hhpersona.png
wave.png

User Flow

 

Using the feature requirements and user stories that were provided in the project brief, a user flow was created to illustrate a user's movement through the app.

Feature Requirements

​

  • Sign in, create user profile, and input property criteria

  • Search and filter available properties

  • Access comprehensive information about a given property (e.g., specs, value, previous sales, location, 360° visuals, etc.) and its neighborhood

  • Bookmark a property listing

  • Property recommendations feature

  • Ability to contact real estate professional when wanting to move forward with a property (i.e., guided viewing, ready to invest)

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.

hhuserflow.png
wave.png
lightbluewave.png

Mood Boards

 

Two moodboards were constructed for the possible look of Home Hunters. The first moodboard included shades of blue and dark grays to invoke a feeling of calmness. It ended up being the chosen palette. The second moodboard included hints of peach and pink for playfulness and cheer.

Mood Boards.jpg
wave.png

Wireframing

​

Using the user flow, I was able to start sketching some low fidelity wireframes which then turned into high fidelity.

lowfi3.png
hhmidfid.png
hh Profile - Saved Listings.png
lightbluewave.png

Mobile Mockups

​

hh mobilemockups.png
wave.png

Style Guide

​

​

hh Style Guide.png
lightbluewave.png
hhmobile.png
HH Mockup 2.png
HH Mockup 4.png
HH Mockup 3.png

Challenges & Next Steps

​

​

Some challenges throughout the design process included:
 

  • Trouble understanding layout and gridlines on wireframes

  • Typography and layout sizing throughout breakpoints



I was able to overcome these challenges by researching more on layouts for wireframes and utilizing
UI kits to help organize my information. In terms of typography and content, I read useful articles on ratio scaling for a consistent look across breakpoints.



Next steps include testing the prototype with specific tasks for users and using the information to improve designs.

bottom of page