Responsive Real Estate App

UI Design

Tools

Overview

Under the guidance of a professional UI Designer, I created the Perfect Properties responsive app, intended to be easily accessed on a variety of devices. Perfect Properties allows users to search for both property and realtors at any time and any place. Using my UX knowledge and project guidelines, I was able to deliver a polished, user-friendly, high fidelity prototype and breakpoint mockups in lines with the needs of my user persona.

Objective

A responsive web app that provides property buyers with information on properties of interest.

Who

This web app is made primarily for new, small-scale property buyers whore are looking to invest for additional income or financial security.

Tools

Overview/Role

Under the guidance of a professional UI Designer, I created the Perfect Properties responsive app, intended to be easily accessed on a variety of devices. Perfect Properties allows users to search for both property and realtors at any time and any place. Using my UX knowledge and project guidelines, I was able to deliver a polished, user-friendly, high fidelity prototype and breakpoint mockups in lines with the needs of my user persona.

Objective

A responsive web app that provides property buyers with information on properties of interest. Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site.

Feature Requirements

Sign in, create user profile, and input property criteria
Search and filter available properties
Access comprehensive information about a given property
Bookmark a property listing
Property recommendations feature
Ability to contact real estate professional when wanting to move forward with a property

Key Messaging

"Finding the perfect property shouldn't be hard"

Style

Clean, quick, smart
Greens or Blues

User Persona

User Flows

Based on feature requirements and user stories for the project, I established user flows for that would accomplish all necessary tasks needed for a successful app design.

Property Preferences

User Flow

Contact Agent

User Flow

Compare Properties

User Flow

Property Preferences

User Flow

1/6

Mobile-First Design

Usability Testing

3 Selected Users

Low Fidelity Prototype

Composition

Screen Shot 2020-07-22 at 7.20.52 PM.png

Grid

4 Columns
Breakpoint: 375px
Margins: 10px
Columns: 77px
Gutters: 12px

Spacing

UI Patterns

Mood Boards

With the layout of my screens set up, I created two distinct mood boards that would influence the UI design. I chose the option I felt was most in-line with the user persona's needs and project criteria.

Option 1 - Selected

Option 2

Revised User Flows & Wireframes

After testing proved there were several pain points within my first prototype, I made updates to my initial user flows and wireframes to ensure my design was easy for users to navigate. In addition, I added a feature to compare saved properties.

Create Account

Search & Filter

Save Property

Access Property Info/Contact Realtor

Compare Properties

Typography

I chose two typefaces that were trendy, offered a high readability, were web friendly, and appeared professional and reliable.

Kepler Std

Roboto

Imagery

Colors

While trying to align with both the project guidelines and my chosen mood board, I selected the above colors because they offered a warm and somewhat calming appearance. Since real estate is an often a stressful venture in and of itself, I did not want to add any additional anxiety to the act of research.

Imagery

I used real estate imagery that was vibrant, professional quality, and "utopian"-like to create excitement. Realtor headshots were meant to convey trust and dependability. Maps were meant to be readable, yet not compete with buttons and icons.

Icons

Icons designed and implemented at this stage. Clean, outlined icons used for filter options, along with captions, to make filter selections easier to use (and more interesting to look at) for users. Icons with colored backgrounds used to draw attention to buttons/actions.

Gestures

Mobile: Perfect Properties relies mostly on tapping and scrolling gestures, as well as pinching to expand/contract maps and tapping switch to toggle between location and name search in the realtor finder feature.

Tablet: Tap to show property on map - double tab to expand property info.

Desktop: Hover over card to view property on map and click to expand property info

Animations

Drop down search bar

Animation

Map to List View

Animation

Breakpoints

I applied a 12 column grid to each breakpoint in order to align, position, and resize elements so that each screen would transition appropriately on varying devices.