Sidekick Parking App
Helping LA Drivers plan for parking and avoid hefty parking tickets
Sidekick improves the LA parking experience by enabling users to explore, compare costs and walking distances, navigate to spots, and pay for parking. As a first UX project, I deeply explored all research methods to ideate solutions, design interactive prototypes, and validate the product experience in alleviating the stress associated with parking.
Work
- UI/UX Design
- Visual Design
- Responsive Web Design
Platforms
- Mobile
- Web
- Tablet
Tech Stack
- Figma
- Sketch
- Invision
- Adobe XD
- Adobe Illustrator
- POP! Marvel
- Qualtrics
- Miro
The Street Parking System in LA is not designed for the people.
LA drivers are significantly prone to expensive parking tickets. Parking spaces in different neighborhoods are subject to a set of different rules. Not only that, these parking signs are written in tiny letters that are impossible to see from 500 feet away. Oftentimes, these parking signs are also difficult to read and fail to communicate the rules clearly to drivers, costing them time and money.
The Sidekick that tells you where to park, how much you'll pay (or not pay), and how to plan ahead
Sidekick provides users the necessary information on parking all in one place, reduce the stress that comes with the finding parking. On Sidekick, users can plan ahead, browse parking options, compare the cost and walking distance to their destination between parking options, navigate to their parking spot, and pay for parking.
Methodologies
Research
- Secondary Research
- Screener Surveys
- Interviews
- Affinity Maps
- Empathy Maps
- Personas
Ideation
- User Stories
- Site Maps
- User Flows
- Heuristic Analysis of Competitors
Design
- Sketches
- Moodboard
- Wireframes
- Wireflows
- Animations
- Brand Platform
- Style Guide + Design System
- High Fidelity Prototype
Validation
- Guerilla Usability Testing
- Usability Tests
Why is finding parking such a pain in the a**?
To understand the root of the problem, I conducted secondary and primary research to learn why parking signs are confusing, the effects on LA drivers, and the opportunities and constraints of what can be done to alleviate the painful process of finding parking.
Secondary research shows various environmental, safety, and financial side effects of the parking problem
Key Areas of Concerns
An LATimes article states that the biggest concerns people have about parking include:
- Theft and Damage Risk
- Expensive overnight parking
- Time consuming process
- Time limit
- Emission Waste
Parking Fines
In 2016, the City of LA earned $41.6 million in profits from parking fines alone.
Emission Waste
A study of 15 block stretch in DTLA found that people drive extra 3,600 miles finding parking.
SourceHousing Problem
Most housing in LA were built before the parking requirements took off.
- It's expensive to dig underground to build garages for apartments
- Apartments with parking garages are expensive
User Interviews
Talking to target users help me to collect diverse perspectives on the parking problem. The data I gathered from secondary research helped me curate and direct the interview questions.
I sent out screening surveys to 10 potential users which led me to recruited 4 participants who live in the Greater Los Angeles area and own a car.
Key Questions
- Can you recall a time you were frustrated with parking in LA? What happened there?
- What are your thoughts on street parking signs?
- What is most important to you when it comes to finding the perfect parking spot?
Discovering pain points and opportunities
I defined the key types of users, their needs, and pain points by organizing the information I gathered using affinity maps, discovering details about each user's pain points using empathy maps.
Four Key Areas of Concern
- Parking signs are difficult to read and understand
- Finding parking is stressful, time-consuming, and difficult to plan for, especially when finding overnight parking
- Users have different preferences for the type of parking depending on the destination they are headed to. All users are worried about the safety.
- Users wants an app that has all parking information, allows users to share parking tips with each other, and helps them plan for parking ahead of time.
Four Types of Users
1. Frequent driver who prefers free parking spots
- Spends a lot of time finding free parking in certain areas of the city
- Parks the car before reading the sign most of the time because she cannot read the sign from afar
- Feels anxious and stressed when finding parking during peak traffic hours
2. Suburban resident who values certainty above all
- Prefers paid parking because it confirms that parking spot
- Plans for parking ahead of time by looking up yelp reviews, browsing google maps, and referring to past experience
- Does not trust parking signs because they are tricky and confusing
3. A city resident who doesn't have apartment parking
- Spends ~45 minutes finding overnight parking on the streets
- Worries about the safety of the car because it has gotten broken into before
- Gets stressed out about parking everyday
4. An international student who is unfamiliar with parking signs
- Will pay for convenience to save time
- Asks friends about parking rules because the signs are confusing
- Thinks apartment parking is expensive
How Might We?
From these insights, I was able to find a better way to frame the problem using How Might We? statements.
- HMW integrate social networking so that people can share parking tips?
- HMW estimate the time needed to find parking spots?
- HMW display parking rules in a way that is accurate and easy to understand?
- HMW recommend parking spots to people?
Brainstorming
Card sorting and sketching helped me visually sort through the ideas I had. I sorted my idea cards under each HMW question to organize my thoughts and stay on track.
Minimum Viable Product
I've identified 3 key features that should be the MVP for my solution as followed...
Show parking rules
Showing the parking rules on the app when the driver pulls up near the parking site (Start with this MVP)
Time estimates
Tell the driver an estimate of how long it will take them to find parking in that area.
Reviews
Allow users to leave comments and reviews on parking sites and prioritize the most liked/useful reviews.
How can I help users navigate the key paths on Sidekick App?
Based on the MVP, I wrote out user journeys and user stories. In other words, if I were the user, what are the tasks I would want to complete using this app. The main tasks for the MVP would include understanding parking rules, finding parking, and managing parking. I decided to hold off the community aspect of the app until the next release for now.
Critical User Flows
With defined user stories and site map, I could map out 3 user flows that are crucial for the app to perform the MVPs:
- Sign Up/Log In
- Finding Parking
- Getting help
Sketches
I sketched out the low-fidelity visuals for those 3 user flows identified. On the screen you can see some examples of screens from each user flow.
Turning my sketches into low fidelity prototype with POP! Marvel
Testing early
Before building the wireframes, I wanted to determine what problems users might encounter while using the app. I turned the sketches into a clickable low fidelity prototype using the POP! Marvel app and went out to conduct guerrilla usability tests with 5 participants that I recruited at a coffee shop.
Findings
Usability issues that came up during the test include:
- Navigation in the account setup process
- Difficulty while browsing parking options
- Unclear wording in some areas
- Trouble locating the help center
Figma Wireframes
Based on the feedback, I made the necessary changes to improve navigation. These wireframes served as the anatomy of the app and helped figure out what worked and what didn’t without the pressure of being pixel perfect.
Building a branded visual design system
To build the brand platform, I defined the name of the app, Sidekick, the brand personality, and a mood board that communicated that personality. I referenced the mood board as I create a style guide where I crafted the visual language of the sidekick.
Setting the tone for the Sidekick brand personality with a Moodboard
The Design System that defines the visual language of Sidekick
High Fidelity Prototype
To ensure the best experience possible, I put my designs to the test through out the process. I audited the first few screens to ensure it meets design standards and accessibility guidelines before proceeding with the rest of the user flows.
Auditing initial design
After designing the first initial screens, I conducted an audit to ensure my designs are accessible and compliant with the WCAG guidelines.
.png)
.png)
High-Fidelity Prototype
The style guide helped me quickly iterate the high fidelity screens that were consistent with the brand personality and felt cohesive throughout the whole app. I kept the layouts clean and made the elements easy to identify by following the heuristics of similar apps.
Animation and Interactions
For finishing touches, I animated key elements such as the drop-down menu, live chat loading animation, and the information card drawers.
Testing the Figma Prototype
After completing the design, I created an interactive Figma prototype and conducted 2 rounds of usability tests with 5 participants. I was able to gather important feedback from target users to ensure the product meets their needs and functions as expected.
Findings from 1st round of usability tests
In this round of testing, users were mostly confuse while navigating the app to complete the required tasks because they found the copy confusing and were distracted by redundant UI elements. They also thought it was difficult to find a parking option because there weren't enough options visible before the scroll. The main problem is that it was hard for them to browse and decide where to go.
Findings from 2nd round of usability tests
Dragging interaction
Overall, they found the app very intuitive and easy to use. Users still couldn’t figure out the dragging interaction but it could be because they tested the app on desktop.
Navigation preferences
Users seem to want to use a more familiar navigation system like Google Maps or Waze. However, this can be ground for an A/B test where we can test whether redirecting to a third party app would offer a better experience than continuing with in-app navigation.
The Final Product
What I learned
My first UX project went as best as I could imagine. I got to explore all forms of research methods and learn as I go. I discovered that the key to delivering a great product is being a great listener and keeping an open mind.
The Value of Usability Tests
Conducting usability tests with participants offered great insights into how and why different individuals approach each task in their own way. The tests also revealed a lot about what UI elements confused the users and what features could be added to improve the experience.
Empathizing with users
Interviewing users about their experiences with the parking problem offered insights into what problems I should prioritize and focus on so that the app would be useful for them. This process also revealed the difference between what they say bothers them about the parking process and what they do when they are actually parking the car.
What now?
If I have the opportunity to bring this project to life in the future, I plan to conduct an A/B test to determine whether redirecting the navigation portion of the user journey would offer a better experience than using in-app navigation for directions to parking spots.
In the meantime, this project has taught me the pros and cons of various UX design methods. I am excited to be able to strategize and determine the best methods for the unique challenges every future project will bring.