BREEZE

A community-driven app for parking discovery

PROJECT TYPE // UX Design, Branding, Mobile App

TEAM // Solo Project

DURATION // 5 months (part-time)

TOOLS // Figma, Google Surveys, Miro, Marvel

 

 The Problem

Simplifying the way drivers find parking

Finding parking is hard. Finding good parking is even harder. The challenge here is giving drivers the right information to meet their parking needs while balancing expectations as the app doesn’t reserve parking.

The Solution

Use live data to give updated parking predictions for drivers

Breeze is an app that helps drivers find parking. It uses a community and data-driven approach to provide live parking predictions and keep driving stress low.

 

The Goal

Building a hi-fi prototype of a parking app

ROLE UX Designer

As the sole designer, I covered research, concept, and visuals. I incorporated feedback from mentors and user feedback from usability tests to finalize my high-fidelity prototype.

OBJECTIVE

Identify a product-market fit and build a hi fi prototype of a unique parking app.

The Research

Starting with secondary and primary research

SECONDARY RESEARCH

INRIX Research combined the world’s largest parking database with survey results from nearly 6,000 drivers in 10 U.S. cities to quantify the cost of time and money spent when trying to find parking. Based on their 2017 research:

Group 1.png
Group 2.png
Group 3.png
 

COMPETITOR ANALYSIS

Researching competitors was essential to learning what already exists, what users like, what they didn’t like, and gaps to fill. I looked to Waze, Google Maps, and SpotAngels for inspiration and to compare what each product specialized in.

Group 78.png
 

USER INTERVIEWS

I interviewed 5 user interviews to get an understanding of drivers’ parking behaviors, what they like and dislike about driving, and parking in general. After synthesizing the data into an affinity map, empathy maps, and user personas, I spotted a few reoccurring themes that led me to focus on:

1 Merging commuting and parking together
2 Making this time enjoyable and productive (via music, audiobooks, and podcasts)
3 Prioritizing safety

 

Through these methods, I learned got a better understanding of my target audience’s behaviors and needs.

I also faced a few constraints:
• Lack of knowledge on how the backend would merge static database parking information with live input from users.
• Limited user and product research due to project timeline constraints.

Designing for 2 types of driver personas

  1. Commuters are familiar with the area but also want to get to their destination and find parking efficiently

  2. Visitors are exploring new areas and are most concerned about safety.

Both need to find parking and want to be able to get to it with the least amount of work.

Chelsea the Commuter

Evie the Visitor

 

USER STORY

 
As a driver, I want to be able to quickly find parking so that I can have a stress-free drive.

What are the insights gained?

1

Drivers both familiar and unfamiliar with the area have a hard time figuring out the types of parking available and the cost of parking around them.

How might we help drivers understand the parking situation in their area?

 

3

Finding safe spaces to park is difficult and usually requires a bit of research before driving. The feeling of unease and lack of safety can prevent drivers from getting to their destination.

How might we inform drivers when they are in inhospitable areas?

2

Commuting takes up nearly 2 hours a day for drivers and congested traffic can lead to longer periods. Drivers feel unproductive while sitting in traffic.

How might we keep drivers engaged while allowing them to focus on safe driving?

 

4

Efficiency is key. Wasted time is the top pain point for drivers. The gap between navigation and parking services can be felt in robust navigation apps like Google Maps and Waze.

How might we save time for drivers while they are cruising for a spot?

 

The Information Architecture

Defining the sitemap and red routes

SITEMAP

While planning the hierarchy of the app. I created a sitemap to show how each page relates to each other.

 
 

RED ROUTES

For the prototype, I identified the following tasks to deliver the most value to users and what user flows will be built out:

1 Tagging a new parking spot
2 Finding a parking spot
3 Selecting and playing media

 

The Ideation

Early testing to make sure the designs meet drivers’ needs

PAPER PROTOTYPES

Opting for paper instead of digital at this point allowed me to focus on the core design and collect early feedback.

Merging navigation with parking discovery, including a media component, and emphasizing safety were my main focuses when creating the paper prototype.

GUERRILLA TESTING

I conducted a guerrilla test with 5 participants to see how potential users reacted to this design direction.

  1. Unclear focus. The feedback proved the media component unnecessary — users felt this was out of place even though most mentioned it’s their favorite part of driving. The same applied to the navigation feature. Users already had their tried-and-true navigation apps like Google Maps that they would be reluctant to leave.

  2. Too many screens. Participants preferred to see forms and confirmation pages within the context of where they were on the app.

Ultimately, they wanted to get the information without doing too much. Navigating through many features was overwhelming.

I updated my strategy to focus on a clean parking discovery flow and included gamification to encourage user engagement (tagging new spots and obstacles = increasing the accuracy of predicted parking availability).


Lesson learned

What users say they value can be different from what they need.


LO FI WIREFRAMES

With a clearer goal, I based the interactive design of the map on stop lights and heatmaps because users already understand the meaning behind those colors. On the app’s map, green means parking is plentiful, yellow means it will be more difficult, and red means it’s not a good area for parking.

Users can then see the data they need to make an informed decision on whether the area is right for them.

Select from map.png
Parking results.png

Users can add parking spots and report events that would impact parking to feed into the parking prediction algorithm. The more contributions are made to the app, the more points they earn.

New spot form-1.png
New spot form.png
Points confirmation.png

I dropped navigation as a feature and allowed users to select their navigation app of choice instead.

Parking set.png
Bump out.png
 

 The Visual Design

Establishing the brand style

MOODBOARD

Breeze’s mission is to make finding parking easy for all drivers. To define the brand personality, I pulled inspiration from travel photos and street signs - evoking a sense of calm and ease. Breeze makes people’s lives easier through an app that feels like second nature.

 
Moodboard tile.png
 

BRAND LOGO

The wind decal is the visual display of the namesake and the decal placement on mobile versions represents the wheels of a car.

Brand logo assets.png

BRAND COLORS

Breeze’s colors and personalities are friendly, colorful, intuitive, and minimal.

Frame 215.png

ICON STYLE

Icon assets.png

TYPOGRAPHY

Typography assets.png

GRID LAYOUT

Desktop grid assets.png
Mobile grid assets.png

UI ELEMENTS

UI Elements asssets.png
 

The Testing

Validating with user testing

6 moderated usability tests were conducted remotely. In these tests, I was looking to:

1 Validate the preferred price filter from a selection of 3.
2 Gauge user reaction to gamification.
3 Identify weak points from the red routes by seeing where users are “rage clicking”.

ROUND 1

 

INSIGHTS

1

50% of participants (3 out of 6) preferred the inline price slider because they felt it gave them more control and was more natural to see in context with the map. 33% (2) preferred the dropdown and 17% (1) preferred the price slider modal.

 

Price slider modal

 

Price dropdown

 

Inline price slider

 

2

Gamification was mildly received with one person expressing suspicion about the motives — this is in part due to rising concerns about data privacy and negative ramifications of making things too fun and simple, which was highlighted by the recent news on Robinhood. The app allows individual investors to easily buy and sell stock. After a group started buying large amounts of Gamestop stock (GME), thereby sending it up by more than 14, 300% in a week, Robinhood began restricting users from buying certain stocks — in this particular case GME.

 

3

Users found it difficult to understand what the map pin stood for in regards to figuring out where the destination, users' current location, and parking locations were.

Original screen

Original screen

 
New screen

New screen

 
 

ROUND 2

5 moderated usability tests were conducted remotely. In these tests, I was looking to:

  1. Get a better understanding of user reaction to gamification. The first round didn't give strong signals, and I was hoping to dig up more detailed feedback.

  2. Identify lingering weak points.

INSIGHTS

1

Users didn't mind gamification, but they thought that real world rewards would make more sense and incentivize them more.

 

2

Some UI elements were too small or subtle to be seen, making it difficult for users to figure out their next steps.

Original screen

Original screen

 
HI FI Parking selected.png

New screen

 

3

Users found that the long form format requesting information is overwhelming and would prevent them from contributing information in the future.

 

Reflections and learnings

Stay focused on user needs

Working on Breeze from start to finish allowed me be a product owner while building my skills as a designer. I learned that getting user feedback early and often is crucial to keeping the product focused.

Be thoughtful about the value prop

Chasing big ideas like media and gamification requires thought — this was witnessed first in the guerilla testing and later in prototype usability tests. Especially with the recent news of Robinhood and rising concerns about data privacy, pursuing a gamified app could have been a later iteration instead of the MVP.

Previous
Previous

NeuClass

Next
Next

TinyTales