UI Project-Right Home

Time Frame

September 2021- November 2021

Project Type

Hypothetical Mobile Application

Team

Myself

My Role

UI Designer

Objective of Application

To provide users with a real estate application to view homes and contact agents.

Problem Statement

Home buyers need a fast and efficient way to view properties they are interested in. We will know this to be true when the users can successfully apply filters and contact agents to view homes of their interest.

Project Goals

Goal 1- Create a fast and easy way to apply filters and view homes

Goal 2- Provide access to real estate agents and their contact information

Goal 3- Create a way to save homes in the users account

Goal 4- Provide comprehensive viewing options, like photos and a 360 view of the home

Sketch and Create

Based on the project goals and the user stories and personas, I created a user flow map and began sketching the low fidelity wireframes.

Mid Fidelity Wireframes

I began to create the mid fidelity wireframes

Mood Board

I then created a color scheme and mood board to inspire and create a theme for the application.

High Fidelity Wireframes

Once the theme was established I applied common UI patterns and an 8 point grid to complete my wire frames.

Mobile Mockups

Animation

I created a "hamburger menu" and added the animation for it to slide in and from the left side of the screen.

Style Guide

The style guide will provide typography, color, spacing, and other UI elements used for this project.

Desktop and iPad Version

I designed wireframes for different breakpoints, desktop and iPad, I created two screens for each.

Final UI Prototype

View the Figma prototype here