HouseKEY

Responsive web app for locating potential rental properties.

Overview

With the rising cost of living, many people are looking for ways to augment their income. For some, buying a rental property has become one way to do this. How can we simplify the process of finding properties and contacting sellers?
HouseKEY helps users do just that!

Project Specs:

  • Project Timeline: October to December 2024

  • My Role: UI/UX Designer

  • Purpose & Context: HouseKEY is a personal project I built as part of my UX Design program at CareerFoundry to demonstrate my skills as a UI Designer.

  • Objective: This project aimed to create a product from scratch to add to my design portfolio.

  • Technologies & Tools: Figma

The Problem:

“How can we design a responsive web app for people who want to invest in real estate, but require guidance?”

My Design Process:

I approached the HouseKEY project using the following design process. My process followed a structure, but you can see that it was not completely linear.

POV

User Personas

To design with a real user in mind, goals and motivations for typical users were condensed into a memorable design persona.

  • Rashida, an IT professional who wants to invest in property to provide financial security for her family

Ideate

User Flows

I created a series of user flows to demonstrate how the user will move through the app, and how key functional requirements will connect.

I assigned each task flow a user-centered objective, based on the personas I created:

Account Creation

Rashida: “As someone with no investment experience, I want to have guidance and support to find suitable properties, so that I can make the right financial decision.”

Search for & Save Filtered Properties

Rashida: “As a potential buyer with a property wish-list, I want a way to filter my property search, so that I can make the right financial decision.”

Contact Agent & Schedule Viewing

Rashida: “As an investor who needs advice, I want a way to chat with experts, so that I can schedule meets and see properties.”

Mood Board

Early on in the design process, I decided to create the visual style for the responsive web app with a mood board. The mood board was useful as a way to visual color schemes, photography, iconography, and other UI elements. The two mood boards below were developed. Ultimately, Mood Board 1 was selected.

Mood Board 1

Mood Board 2

Wireframes & Layouts

Wireframes & Initial Concepts

When creating the low-fidelity wireframes for the HouseKEY app, I considered the following:

  • The design should be mobile-first to accommodate users on-the-go.

  • Select familiar menu options, connected to established user needs.

Mid-Fidelity Wireframes

Design iterations progressed to mid-fidelity prototypes. This stage allowed me to introduce more functionality corresponding to the user's needs.

I decided to implement a responsive grid system to standardize the layout of elements.

  • Columns: 4, Margin: 35pt, Gutter: 20pt

Designing for Different Breakpoints

To ensure a responsive experience for users on different device and screen sizes, I adapted the mobile-first design for different breakpoints.

Refining Visual Elements

I continuously refined components within Figma. Through this process, I took into consideration visual hierarchy and effective use of whitespace to produce an uncluttered and readable design.

High Fidelity Prototypes

Building on previous iterations, I further refined the UI for high-fidelity prototypes. At this stage, I aimed for total precision in design, and consistency in how visual elements occurred throughout the whole responsive app.

Style Guide

To systemize the design of the HouseKEY responsive app, I developed a style guide for UI elements.

Project Reflections

  1. UI cannot be separated from UX. Iteration of the UI with the goal of improving visuals within the responsive app had to consider the overall user experience. Ultimately, empathizing with the user remained a key aspect of this project.

  2. Consistency is key. Since inconsistencies within the UI can cause uncertainly or diminish trust among users, design elements had to be implemented consistently.

  3. User needs and business needs have to balance when iterating the UI. As a UI designer, I should listen to the user, but I can’t do this at the expense of the sacrificing business needs.