Cover.png

Brake

Brake is a parking app that allows users to park for street-side parking by the minute without worrying about over/underpaying the meter. Through a simple scan-in system, Brake can also map out the parking availability in a specified region and help drivers locate an open stall before arrival. Other features include time limit notifications and directions to the stall.

Role
Timeline
UX/UI Designer
Sept 2021 – Nov 2021
Tools
Teammates
Figma, Qualtrics
Elliot Starkman
Sonan Zhang
Grace Ann Stenger

The Problem

Parking is stressful. In addition to their face-paced lives, people simply do not have the extra headspace to worry about where and for how long they park. Moreover, the time and resources wasted over parking add up to $72.7 billion
in America each year.  

 

Challenge

Create an efficiency-focused app experience that facilitates a seamless parking experience for busy drivers to find parking, complete their tasks, and pay, all while saving them time, money, and stress.
Brake combines multiple parking features in one simple and efficient user flow. It helps drivers find available street-side parking and provides directions to the stall. Most importantly, it allows drivers to pay by the minute, alleviating the stress of monitoring time left on the meter. It also allows users to pay by phone for an easy transaction process, completing the parking experience. 

Solution

Product Overview

Get to know Brake
Users are greeted by Brake's lively splash screen before getting to cruise through a brief interactive introduction to Brake's features and main value proposition.
 
Locate available stalls
Users can view parking availability in as street zones to get a sense of which areas have open street-side parking. In street view, drivers can select a specific stall for road directions or to directly scan in once they arrive.
 
Check in to a stall upon arrival
Brake's efficient check-in process is easy to complete. Drivers simply have to scan the code on the meter or enter the meter number to claim their stall and start the timer.
 
Check out and pay by phone
If users forget where they parked, they can reference Brake's built-in map to find their car. When ready to leave, users can stop the timer, double-check their receipt and payment method, then pay directly from their phones.
 
Additional pages
Aside from the primary parking flow, Brake also provides a digital wallet of registered cards and their respective payment histories, a pricing page that explains the app's flexed curve rate, as well as a "Frequently Asked Questions" page.
 

Design Process

Research

Interviews were conducted among 6 individuals in varying age groups and occupations in order to understand our audience and their motivations. Upon gathering insight, I grouped the main pain points of the interviewees into the categories shown below.

Copy of Final Presentation v1 - November 10, 1_25 PM copy.png

Location

 

Drivers spent so much time circling around the blocks looking or waiting for a spot to open up. This becomes mentally and physically exhausting.

Time

 

Time either goes by too fast or too slow. People interrupt their day to add time into the meter or end up leaving earlier than they expected.

Money

 

Since it's difficult to get the time slot right, drivers either end up overpaying or risk getting towed or fined for overstaying their meter.

Emotion

 

Whether it's location, time, money, or the fear of a ticket, parking can be a stressful experience. It can easily detract from a positive trip or day.

In order to better empathize with drivers who had different motivations,
we created three user personas to help guide our design-thinking.

User Personas

Lauren Moore
Lauren Moore

press to zoom
Jeff Liu
Jeff Liu

press to zoom
Jessica Marrow
Jessica Marrow

press to zoom
Lauren Moore
Lauren Moore

press to zoom
1/3
Customerjourney.png

Information
Architecture

Before designing any wireframes, I wanted to quickly organize how features and pages would be integrate in the app. Laying out the user flow for each page helped me understand how users would interact with Brake while parking as well the order of importance of each screen.

Next, we created a series of low and mid fidelity wireframes to map out the user flow and feature interaction to create a tangible and testable prototype.

Wireframes

To maintain consistency of style across the app, I created a design system.
We chose orange as our primary color because it conveys a sense of excitement and energy that would mirror the feeling of getting out of the car at the final destination without a worry about parking. In addition, we used a rounded sans-serif typeface to accommodate the stress-free and friendly experience we curated.

Design System

Conclusion

Takeaways

Working on this project granted me active experience in applying design thinking processes and techniques from start to finish. This provided a comprehensive understanding regarding user experiences and the importance of research and testing when developing feature functionality.

 

Additionally, I was able to experiment with possibilities on Figma, which helped to bring user personas, information architecture, wireframes, and UI to life in the final prototype.

Next Steps

For future iterations of this project, I would conduct a usability test with the most recent prototype to receive user feedback. This would allow me to improve the functionality of existing features and ideate new ones. Some ideas include reserving parking, splitting the fare, partnering with delivery services (UberEats, DoorDash, etc.)

 

I would also make sure the screens cater to colorblind drivers and acknowledge color contrast accessibility. I would reference tools such as usecontrast to improve accessibility.