Parkners App
End-to-End Mobile App Design
Parkners is a parking app that helps drivers find safe and convenient parking. This passion project was created as a part of my UX course. During the course of conducting product research for an IoT company, I realized that there was a market for a vehicle security and parking assistance app.
The problem
Downtown street parking is no easy feat. Some of the biggest problems include competition for viable parking, confusing signage, and the need to keep track of the car’s location and duration parked. For some car owners, the location of the vehicle itself is also a concern. Drivers may feel unsafe returning to their cars alone at night depending on the area of town it is in.
Although many existing tools help users find and reserve parking spots, few focus on informing users of that area's safety or warning users against certain locations. The main goal of the project is to find a solution that allows drivers to park efficiently and safely.
My role
-
UI/UX Design
-
User Research
-
Branding
-
Prototyping
-
User Testing
-
Strategy
-
Project Management
Tools
-
Figma
-
Adobe Photoshop
-
Asana
-
Whimsical
Project timeline
One month (Dec 2020)
Discovered & defined the problems
The project's original goal was to help an IoT product and service provider explore a potential expansion from a B2B to a B2C. After conducting user research, the results suggested that the company's initial idea might not work.
The previous user research
The research was designed to validate the assumption that car owners in cities feel the need to install an anti-theft alert system in their cars.
After conducting online 1-on-1 user interviews with five car owners who drive in cities, I found that assumption to be incorrect. Car owners don’t find anti-theft devices very useful because they can only send notifications after the incident occurs. The tool is also unable to prevent damages. Although the assumption of this research may not have been accurate, several other issues among car owners were discovered.
Car owners are frustrated about their parking experience in the city.
After delivering the user research results to the company, I decided to continue solving the issues at hand.
Persona
Parking in the city is stressful because drivers often need to make decisions without full awareness of the safety, parking rules, and availability in the area. Based on these insights, I developed a primary persona for the typical user, Sophia.
Sophia is a busy and cautious car owner who drives downtown often. She aims to save time by finding safe parking close to her destination. However, finding street parking is time-consuming. The confusing parking signs add even more frustration to her parking experience.
Scenario
What are the frustrations that Sophia might face in her daily activities? I storyboarded a current user scenario for the persona.
Requirements
Looking at the scenes in the user scenario, I listed what Sophia needs to accomplish her tasks:
-
Check parking availability for optimal parking time.
-
Get notified of nearby parking availability.
-
Confirm street parking rules.
-
Find safety information for a certain street.
-
Keep track of parking duration and remind her when the car needs to be moved.
-
Save the parking location on the map.
-
Assess whether a street is safe to walk down alone at night.
These requirements help define the steps that users take to reach their goals. Brainstorming these tasks helps me conceptualize solutions for the users.
More competitive research
I did more competitive research to identify existing solutions for the problems my persona was facing.
Key findings
-
There are a limited number of apps that focus on both finding parking and personal safety.
-
Forming a community is a salient feature of many popular apps in this space. This support system encourages members to help each other by sharing information.
Defined goals
Business goals
While this project was merely a concept, I found it crucial to define the project scope through the business goals:
-
Encourage users to share parking information in order to generate accurate data for other users to consume.
-
Implement elements that convert casual users into habitual users.
-
Generate profit through collaborating with local businesses.
User goals
-
Find parking efficiently.
-
Avoiding areas where theft and crime are common so users can feel safe.
-
Minimize the effort of tracking parking location and time.
Other constraints
The project was part of the UX course, so I had to fulfill the following requirements:
-
Complete the project within one month.
-
The product needs to be a mobile app.
Mutual goals
-
Help drivers decide where to park.
-
Make street parking rules available so drivers can avoid unnecessary fees.
-
Create a product that users find useful and valuable.
The goals and constraints are used to help me decide the product scope. This is an important guide to create product features and set priorities.
Ideated based on the requirements and goals
Brainstormed solutions
I aimed to build a community-based environment to solve parking problems. I combined the requirements generated from user scenarios and competitive research, then I listed detailed features, organized them, and prioritized them on a spreadsheet.
Mapped the interaction
Task flows
After documenting a list of features, I drew out two main task flows based on the persona I developed:
-
How would Sophia search for parking?
-
How should Sophia broadcast an incident she encountered?
Laying out the tasks helped me draft detailed task flows to answer Sophia's questions.
User flows
The flowchart represents the user’s entire parking experience, including searching for ideal locations and rating the parking environment.
When mapping the flow for ‘search and arrive,’ I realized that users would need to deviate from their navigation app to use the Parkners app when they reached their destination. I needed them to revisit the app to share their parking experience before they leave.
To solve this problem, I added 'push notifications' to remind users to return to Parkners. Users will receive notifications to re-enter the app when they arrive and return to the parking location.
Wireframes
After mapping the structure of the app, I sketched out potential feature placements, then validated them through mid-fidelity wireframes on Figma. This process helped me focus on the structural hierarchy before adding visual design elements.
Search for parking
After arrival
Share an incident
I built mid-fi wireframes using Figma, linked the screens, and created a flow to visualize the process.
Branding
I wanted to focus on the value of community by creating a supportive, energetic, and fun space. Using these keywords, I started working on the visual styling of the project, including the logo design, color theme, and typography.
I decided on bright and vivid colors to communicate these values. I picked a typography that is simple and clean to pair with the colors. When all the elements were ready, I compiled them into a style tile as a guide for my interface design.
Tested the solution
UI design
Following the style tile, I created the first version of the interface to validate my ideas.
Validated with users
After creating a prototype on Figma, I recruited five people to conduct 1-on-1 user testing online. The participants were tasked with the following actions while I observed the process through the shared screen:
-
Search for parking nearby the desired destination
-
Report an incident
-
View a reported incident
Feedback and improvements
Users were able to complete all assigned tasks. They found the features useful and easy to navigate. However, I discovered some hiccups. I prioritized three issues that were most impactful to both business and user goals. I also considered the time and effort required, so I could complete within my project timeline. After implementing the solutions, I fine-tuned the colors, UI patterns, and icons.
Issue 1
It took too long to read the diagrams for parking availability and hours. The blue color did not communicate that the parking area was full.
Solution
Adjusted parking diagrams.
Issue 2
Direct private messaging seems dangerous to users.
Solution
Replaced private messaging with public reactions.
Issue 3
The function of the ‘You've arrived’ page was not clear. The original page stated that their parking information was saved, but this confused the users because they did not recall saving anything before this step. In addition, the page was too long to read through quickly.
Solution
Divided this section into two pages and added a more detailed description.
Delivered the experience
By sharing their Parkners experience, each individual can increase the accuracy of future parking predictions.
Find safe parking
Find an ideal parking spot based on the distance from the desired destination, availability, and safety.
Decode parking signs
Verify parking rules easily without having to feel stressed about confusing parking signs.
Help the community
Auto-saved parking
Parkners automatically saves the user’s parking spot and generates countdown timers based on the vehicle’s location.
Inform others to avoid inconvenience
Contribute to the Parkners community by reporting which parking areas are busy and/or unsafe.
View incidents nearby
See updated parking and road conditions to avoid inconvenience.
Final thoughts
Reflection
How to convey meaning efficiently
I witnessed the impact of color on the user while testing the various icons, states, and parking diagrams I designed. Using the wrong color can make users confused and frustrated. I learned that color should not be the sole indicator of selection state. Combining elements such as shapes or symbols helps users acknowledge which actions have occured.
Choose familiarity over novelty
Instead of designing my own diagram to present parking restrictions, I found showing what users are used to seeing (a street sign) is much more effective. I should have observed patterns that users know best before trying to invent something brand new.
Testing out ideas in the early process is invaluable
I learned that disproving my initial hypothesis didn't mean failure. Instead, it was an invaluable opportunity to change my direction before it was too late. My research for the car anti-theft service company was a quick and inexpensive way to confirm viability before investing significant time and effort.
What’s next?
-
More testing, and more iterations to improve the design.
-
I spent time designing gamification elements (such as leaderboards and badges) during the brainstorming process. I would love to incorporate them in the future.
-
Collaborating with local businesses to cross-promote their services would be an interesting way to generate revenue.
