It's Easy With breezy:
UI Mobile App &
Responsive Website Study
Project Overview
Introduction
First-time property buyers face many challenges, including finding homes in the right location that are within their financial means. They need reliable, comprehensive information. In addition, today's digital natives can be skeptical about giving away their personal information. The goal of breezy is to assist such users.
The Problem
Create a responsive web application that provides first-time buyers with reliable information for their home search.
Project Duration
5 months
The Solution
An easy-to-use application with
-
All typical functionality (Search/Results/Favorites...)
-
Friendly, personal onboarding
-
Emphasis on inclusivity (tone of voice, imagery)
My Role
UI Design
Design Challenge
The Design Thinking process helped me empathize with users, understand their pain points and address these throughout the design process.
UNDERSTAND
Difficulties purchasing real estate
POINT
OF
VIEW
Typical first-time buyers; their needs & pain points
IDEATE
User stories
Task flows
PROTOTYPE
Wireframes
Mood board
Style guide
DELIVERY
Responsive design
Final mockups
Takeaways
01_Understand: Problem Statement
Purchasing real estate is a complex, highly emotional process, especially for first-time buyers. It is especially difficult in large metropolitan areas for people to find property that is within their means. And when the bargaining process with the seller begins - how should they know what to do? An easy-to-use responsive web application can provide purchasers with the information and advice they need to turbocharge their searches and help them find their dream home.
To discover how best to serve property buyers, I began considering How Might We:
My Main 'Aha':
breezy's design must
-
Attract users with a matter-of-fact and fun interface
-
Feature a friendly color palette with pastel & warm hues
-
Provide only the most necessary elements for finding property
-
Delight users with easy navigation as well as a tone of voice that draws them in - not puts them off
02_Point of View: Who are we designing for
I knew the essentials of our persona "Rashida". To aid me during the design process, however, I created my own picture of Rashida to delve more deeply into her needs & pain points and consider the kind of aesthetic that would appeal to her.
How Might We create an interface that would best help Rashida reach her goal?
03_Ideate: From stories to structures
User stories and task flows helped me structure the application as well as go more deeply into the situation of our persona and eventual users.
A typical user story might be:
"As a user, I want to create a profile with my search criteria, so that a search returns only results that are relevant to me.
The following task flow illustrates how the user could set up such a profile:
04_Prototype: Wireframing, mood board, and style guide
After developing several task flows, I began drawing low-fidelity wireframes. Working with paper and pencil allowed me to experiment with different UI patterns before making a greater commitment. Mid-fidelity wireframes fleshed out the app design and functionality to a much greater extent.
Lo-Fi Wireframes
Mid-Fi Wireframes
Mood board
Although the design brief gave some direction for the finished application ("clean, quick, smart; greens, blues, purples"), it allowed much room for exploration. My final mood board guided all subsequent work and emphasized clean lines, good contrast, and professional photography combined with humorous sketched figures.
Style guide
01_Logo
02_Colors
#C4C4C4
#000000
#1D3146
#2978CC
#1CB7B0
#224D7B
#C7F1EF
#EE603F
03_UI Elements
04_Iconography
05_Grid/Layout System
Deskt.
Tabl.
Mob.
Cols:
Margs:
Gtrs:
12
40
20
12
20
20
4
20
20
06_Typography
07_Tone of Voice
Tone of voice is a subset of UX Writing. UI and UX goals must be aligned from the start; at best, UX Writers should be involved in all UX and UI phases and processes from the start as well.
breezy's aims are to:
-
Present simple choices for busy users who tend to skim content
-
Bring joy through attractive icons, images, and colors
-
Start a conversation with users
-
Predict user needs before they arise
Tone - Do's and Dont's:
Informal and concise:
YES
-
Do you want updates on this search?
-
Anything we've forgotten?
-
...
NO
-
Shall we send you notifications about your search?
-
Are there any features you’d like to add?
-
...
Personal:
YES
-
Set up your account
-
No, maybe later
-
...
NO
-
Register with breezy free
-
I'll contact you myself
-
...
05_Delivery: Designing for all breakpoints
After completing the mobile-first version of breezy, I turned to tablet and desktop versions. As the bulk of my work was ready, this involved tweaking the breakpoints to make them function smoothly.
The following screenshots show the versions with their respective grids:
As shown here, registered users can move seamlessly from one device to another when searching for property:
From entering search criteria...
To getting results...
To finding a home...
It's easy with breezy!
To check out the high-fidelity prototype of breezy, please click here.
Takeaways
This project, created for the CareerFoundry UI for UX Designers specialization course, gave me an in-depth look at the art of designing an application. Because I used Adobe XD for my first CareerFoundry project, I used Figma for this one in order to learn to use another design tool. After the first few hiccups, it was soon clear to me that the next tool I work with won't present any major challenges.
What I Learned
-
Using form, color, and page arrangement to forge an emotional connection with users and help them achieve their goals
-
Focusing on language/tone of voice so that users feel welcomed by the application
-
Creating an unintrusive yet helpful onboarding process
-
Emphasizing inclusive imagery I purposely designed breezy with Figma (as opposed to healthVU, which I designed with Adobe XD), so that I could learn to use another design tool.
Next Steps
-
Creating further screens and developing more functionality
-
Refining the UX Writing
-
Usability Testing, including A/B testing and testing with real users