Responsive Web Application

Connecting Buyers with Properties

5 Key Features

Helping Buyers Reach Their Goals

Project Details

Introduction

Utilize the research included in the project brief to design a real estate web app. I chose this project brief because I have used Zillow to search for and purchase a home and wondered if there was a faster and more accurate way to find the ideal property.

Context

Real estate investment is an exciting and emotional experience, but often complicated. While there are plenty of resources available, often, new buyers struggle without professional guidance. This web app will provide them with the expertise needed to get started efficiently.

Role

I was the sole UI Designer

Duration

May 2021 - July 2021

Skills 

Hand-sketching - Mood Boards - Wireframes - Prototypes - User Flow - Style Guide - Visual Design

Methods 

Mobile-First Design
Journey-Driven Design
User-Centered Design
Usability Testing


Design Strategy

Dissecting & Translating the Project Brief

Dissecting The Project Brief

 
Making Sense of the Information

The first thing I do when starting a new project is distill down all of the key information onto a single piece of paper. It gives me a snapshot of the problem to solve. This helps me visually prioritize the information, create connections, brainstorm a bit, and see where solutions are needed. Here I've combined all of the information from the project brief, and placed green "+" icons where I discovered opportunities for additional features that would make the app more helpful for our user. 

What the project brief included:
Objective  - Context - 5W Questions  - Persona - User Stories
Feature Requirements - Partial Branding Guidelines

Translating the Project Brief


User Flow

Bringing the user from the entry point to their goal in as few steps as possible.


Usability Testing

User Feedback

Digital Prototype

I researched other similar web apps and evaluated the pros and cons of each before beginning to sketch out each screen of the user journey.
[  The ruler was actually used to draw the screen size - it wasn't just a prop...!  ]


Feedback Informed the Design

A participant tested a prototype and identified trouble spots that were addressed in the next iteration.
- Lack of overall continuity
- Misleading button labels


Visual Design

Finding The Flavor

Partial Branding Guidelines

"Clean, Quick, Smart / Greens, Blues, Purples"

Since "clean" is such an overused design adjective, I felt that the words "quick" and "smart" were more unique and provided a clearer direction. The challenge was in exploring the best balance between the three colors so that they play well together.

Mood Board 1


SHARP

The combination of bold colors, angled elements, and generous white space provides a crisp look. Purple is the primary brand color with blue as secondary, and green used as an accent color.

I felt that this design direction accurately captured the intent of the project brief and the motivation of Rashida, the persona. Her goal of achieving financial security is more transactional than it is emotional. Because of this, I decided to avoid references and styling that felt too warm & fuzzy, and opted for the look of a smart & functional tool. The colors are saturated, and communicate energy. A happy user represents a success story and gives hope to others who will use the app to find their perfect property. 

Mood Board 2


MUTED

Desaturated colors, expansive photography, and transparent layers created a natural feel for this design direction. Blue is the primary brand color with purple and green playing supporting roles.  This design did not communicate a quick & smart vibe.

Branding

Style Guide


Establishing Brand Consistency

Translating the essence of the mood board into a cohesive look & feel that is expressed on each screen of the app. Documenting the visual design components and UI elements provides guidance for the present and future team. 


UI Design Patterns

Identifying UI Problems & Solutions

UI Problems

Ten problems were identified and then solved with common interaction design standards. The choices were made based on patterns that are most familiar with users. For each UI Problem, I researched examples that were appropriate for the app, and used them for inspiration.


Iconography, Gestures & Feedback

Communicating with the User

Brand Logo

Usage Guidelines 

The primary word mark logo is stacked and has three variations. It can be paired with the brand icon in stacked or horizontal or lockups. The brand icon can appear with a white or green fill.

See Illustrations and Icons

Final UI

High Fidelity Wireframes


Responsive Design

Adapting to Different Breakpoints


Prototype

Lessons Learned

UI Patterns

Knowing the difference between UX Design Patterns and UI Design Patterns is essential in seeing product design from a user POV. Use the UI patterns that people expect.

Pixel-Perfect

Developers are users too. Creating the sharpest assets for the hand-off will help them code the best product for creating a seamless user experience.

Responsive Design

Designing for multiple breakpoints can be complex. Evaluating other successful web apps inspires me to push my design solutions and continue to innovate.