top of page
It's Easy With breezy:
UI Mobile App &
Responsive Website Study 
breezy_mobile perspective_hi-fi_9-screens.png
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:

Stickies Packs.jpg
Stickies Packs (1).jpg
Stickies Packs (3).jpg
Stickies Packs (2).jpg
My Main 'Aha': 
Stickies Packs.jpg

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.

Group 2099.png

How Might We create an interface that would best help Rashida reach her goal?

Stickies Packs (5).jpg
Stickies Packs (6).jpg
Stickies Packs (4).jpg
Stickies Packs (8).jpg
Stickies Packs (7).jpg
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:

Perfect Properties_UserFlow_Set-up-Prop-Pref-Profile.png
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
IMG_0854_edited_edited.jpg
IMG_0857_edited_edited.jpg
IMG_0856_edited.jpg
IMG_0855_edited.jpg
Mid-Fi Wireframes 
Group 2100.png
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.

Mood Board_var_v2.png
greek-house-2021-08-26-17-12-42-utc.png
Style guide
01_Logo
Logo_Breezy.png
Logo_Breezy.png
Logo_Breezy.png
Group 579.png
breezy.png
02_Colors
Rectangle 6-3.png

#C4C4C4

Rectangle 6-3_edited_edited.jpg

#000000

Rectangle 6-2.png

#1D3146

Rectangle 6-1.png

#2978CC

Rectangle 6_edited.jpg

#1CB7B0

Rectangle 6-5.png

#224D7B

Rectangle 6-6_edited.jpg

#C7F1EF

Rectangle 6-4.png

#EE603F

03_UI Elements
Group 574.png
04_Iconography
Group 560.png
05_Grid/Layout System

Deskt.

Tabl.

Mob.

Cols:
Margs:
Gtrs:

12

40

20

12

20

20

4

20

20

Group 562.png
Group 561.png
06_Typography
Group 577.png
Group 575.png
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

  1. Do you want updates on this search?

  2. Anything we've forgotten?

  3. ...

NO

  1. Shall we send you notifications about your search?

  2. Are there any features you’d like to add?

  3. ...

Personal:

YES

  1. Set up your account

  2. No, maybe later

  3. ...

NO

  1. Register with breezy free

  2. I'll contact you myself

  3. ...

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:

mobile grid ss.png
desktop grid ss.png
tablet grid ss.png

As shown here, registered users can move seamlessly from one device to another when searching for property: 

From entering search criteria...

To getting results...

Group 2104.png
Group 2091.png

To finding a home...

It's easy with breezy!
2.5_ Page 8.jpg
2.5_ Page 7.png

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

Thank you for your time and attention!

If you'd like to connect, please check out my LinkedIn page or e-mail me at beth.gahbler@gmail.com.
bottom of page