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
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.