ParkAssist
An app that assists users navigate to the closest empty parking space using a crowd-sourcing algorithm
Introduction
Role
Designer
Timeline
1 week (Initial Design)
Currently working on re-design
Class
Visual Thinking — Intro to Design
Mission
Design an app that fixes an everyday “bug”
In my ME101— Visual/Design Thinking class, we were tasked with coming up with an app that helps the people around us solve an issue that affects their daily life— or “bug”. For this project, I embarked on a journey to interview my friends and family and see what issues most affect them.
The Challenge
There are currently no navigation apps or feature that help direct users to the closest empty parking spot
How might we design a mobile system that helps users easily navigate to the closest available parking spot?
Research
& User Needs
Key Features
Initial Design
In my initial research, I sat down with 10 of my friends at Stanford at asked them to describe what bothers them on a daily and what they would like to see solved. While the answers vary, I discovered that they share a lot of similar themes.
I found that an answer among many of my friends is along the lines of transportation and time. Stanford and Palo Alto do not have a good public transportation system, resulting in many people depending on cars to get around or off campus.
Many of my friends who have cars voiced their annoyance with the issue of parking, in particular finding parking spaces on campus and around Palo Alto.
I then decided to hone in on the parking “bug” that exist among a lot of Stanford students.
After deciding on the project, I decided to come up with the key features of the app:
Direct user to the closest empty parking spot according to their chosen destination
Allowing users to see other options for the closest parking spot
Allowing users to save their favorite destinations for easier access
User helps report the status of the parking space by number and size estimation
Experince Demo
User Feedback
Improved User Flow
Onboarding Change
Added Filter Feature
Added Info Screen
Improved Navigations
After drawing out the wireframes and design system, I made my mock-up in Figma (my first time doing a mobile-app design!)
Improved Reporting
What’s Next?
Search & Loading Screens
“Since I drive an EV car, I wish the app would let me filter to parking spaces with EV chargers available”
A, another student driver told me:
Another feedback I got from D, one of my Product Design classmate:
“The idea is so good, I just wished it look more like a real app”
With all the feedback I’ve gotten, I decided to embark on a redesign of the application to improve its look and functionality.
Old flow chart for initial design
New flow chart for re-design
Result & Navigation Screens
Almost a year after my initial design, while looking back at my work, I was not particularly happy with it, especially learning more about UX principles. I decided to test the prototype out with my friends to hear their thoughts.
I interviewed K, a current Stanford student driver, who provided the following feedback:
“I wished it would just show me the closest places right away instead of having to type it in”
Based on the feedback, I wanted to implement the following key changes:
Visually, I wanted to develop a consistent design system across the application
Having an informational page about the parking space
A filter system to let users decide what type of spaces would best fit their needs
A before and after of the low-fi wireframes
Onboarding Screen Before & After
Key changes to the onboarding screen:
Having an interactive map showing the number of empty parking spots that users can click and interact with
A list of nearest spaces for easy access and icons for users to navigate to the next screen
Moving the search bar up to reflect current systems users might be familiar with
Added filter feature to allow users to filter what type of parking spaces they would want
Added screen to allow user to gage important information on the space:
Picture of the space
Address
Fee if available
Amenaties
Navigations Before and After
First Reporting Screen Before & After
Second Reporting Screen Before & After
The key changes I made to the status reporting screens were:
Made the first screen an option menu for ease of use
Remove the “I don’t know” button and instead have an X button in which users can opt to not answer the reporting question instead
General visual changes for consistent design and colors
Since I’m still in the process of redesigning this app, the next steps I’m planning to take are:
Finishing all the screens and wiring them (add interactions) for a full interactive prototype
Test them with users to gain feedback
Coming up with an incentive or reward for users since we’re making them perform an additional task of reporting the status of the parking space
Thinking about incorporating this design into existing navigation systems (Google/Apple Maps) since users are more likely to use their current systems than new navigational product