Improving Parking Experience: a UX Design Case Study
This is a 7-people group project as part of the UI/UX Design Job Connector program at Purwadhika Startup and Coding School. The seven of us divided workload so each member can experience and practice every aspect of the design process.
Background
In Jakarta, looking for parking is an unpleasant activity, especially for car drivers. The Big Durian hosts tremendous volumes of private vehicles everyday. Along with severe road congestion, this often causes parking lots in public places such as malls, offices, and universities to fill up very quickly. As quoted from detikcom:
People tend to visit malls on weekends, and most of the time it’s difficult for them to find parking spot. If the parking spot is full they usually park their car carelessly.
Some of us are also car drivers, and we all agreed that finding a parking spot is nothing short of a hassle. Therefore, we decided to find out how to improve the parking experience in the form of a mobile app.
In the design process, we applied the design thinking methodology.
Empathize
In-Depth Interview
To find out more about the problems people face when searching for parking in more depth, we interviewed five people via telephone. The interviewees were private car owners who always drive their own cars for daily activities, such as to college and office.
After transcribing the interview, we found that there were so many scattered answers that we couldn’t draw conclusions easily from. Therefore, we categorized the answers into an affinity map.
The affinity map would later be interpreted into How Might We and Design Mandate on the next design phase.
Comparative Analysis
To gauge the nature of existing parking apps, we also compared key features of three direct competitors: CariParkir, Smark Parking, and Parkee.
As seen on the left, these apps offer unique features that do not exist in their competitors, especially navigation to parking spot (CariParkir) and parking rating (Parkee).
We see that these features help drivers in minimizing time to search for parking spot and ultimately increase driver convenience.
Define
How Might We?
We picked important insights from the affinity map and translated them into How Might We (HMW) statements. Every team member suggested ideas to help car drivers in searching for parking space. These ideas were then organized into 11 categories.
We then voted to pick which HMW statements will be prioritized. The first round of voting yielded seven statements, and the second round produced a single statement:
HMW give empty parking spot information?
We believed that giving empty parking spot information can improve parking experience — the question was how. The rest of the statements were not discarded, but was not regarded as the highest priority in our problem solving process.
Persona
From the in-depth interviews, we tried to visualize three personas. These fictional characters have their own backgrounds and problems similar to our target users. The goal of these personas is to help us empathize more deeply with users in understanding the problem and the goals that we set to achieve.
User Journey
As well as personas, we also visualized the user journey of a car driver when searching for a parking spot.
From the initial problem, prioritized HMW statement, and personas, we saw that the greatest pain point for car drivers is the time and energy wasted when searching for parking spot. We believe that we can alleviate driver’s pain by providing empty parking spot information from the very first step of the parking process.
Ideate
Crazy 8 and Solution Sketches
Each member made a crazy 8 to flex our creative juices and let the ideas pour out. Soon afterwards, we made more detailed solution sketches, still with pen and paper. We then voted some sketches that will be developed into a fully-fledged user flow.
By this point, we agreed that these features are the most important to include:
- Parking spot information
- Book parking spot
- In-app payment
- Navigation
By providing parking spot information, the ability to book and pay instantly, and receive navigation to the booked parking spot, we believed that we can help transform parking into a better experience.
User Flow
Each team member made their own interpretation of the app’s user flow, and then we commenced voting as usual. The chosen user flow would be the foundation of our prototyping process.
Prototype and Test
First Prototype
The next step is to make a fully interactive prototype. In this case, we jumped straight into making a high-fidelity prototype. At first we used Adobe XD, but we jumped into Figma when we encountered annoying bugs. We also tried to follow Atomic Design guidelines by making small components first before proceeding into bigger and bigger elements.
After several days of making the prototype, we asked three people to test its usability by performing a simple task: book a parking spot. We asked them to think aloud while using the app, while we observed and noted their responses and body language. All of them finished the task successfuly. However, there were some useful insights such as:
“Available parking spot information is unclear.”
“ The search bar on the landing page isn’t easily visible.”
“There is no action button on the building information page to continue to the next step.”
Iteration
These were some of the most important changes that we incorporated into the final prototype:
- Map
Before: On the Map page, we showed location pins to indicate nearby parking lots along with building image carousel in the bottom section.
What went wrong: Users were confused with the lack of information. Where should they park? Which location is the least crowded? Which parking lot costs the lowest? The pins were not useful without any context.
After: We added building names, parking lot availability information, and building information cards to replace the carousel. This way, users will know which building is best suited for their parking needs.
2. Book Parking Spot
Before: Building information detail shows available parking spots in total, on each floor, and text boxes to pick arrival date and time. When the user clicks Generate Parking Spot, parking spot will be automatically generated.
What went wrong: First, the numbers were confusing. Does it show available parking spot? Occupied parking spot? Total parking spot?
Second, there were excessive text boxes. Users had to fill too many fields.
Third, there were no option to pick your parking spot. What if there were young children and the driver wanted to park closer to the mall entrance?
After: We simplified the page in the form of two pages. First, the Choose Date and Time page showcases available spots clearly. Expected arrival date were changed into a calendar picker field.
Second, we combined the best of two worlds: user still receives automatically generated parking spot number, but they are also given the entire parking lot map in case they want to switch spots. On each floor of the map we include color guides and available parking spots.
3. QR Code Ticket
Before: QR Code ticket was issued after user completes payment and can also be accessed via Order History. An order summary was also included, showing expected time, car number and date.
What went wrong: There were no clue that indicates what’s next for the users! Actually, the user just had to click anywhere to move onto the next step, but it was not self-evident.
After: We learned the importance of CTA (call-to-action) buttons. By including two simple buttons, users will be able to know their options. We also tried to make things more user-friendly by choosing the phrase “Let’s Go” instead of just “Next” or “Navigate”.
Final Prototype
This is our answer to improving car drivers’ parking experience: a mobile app named Parkin.
You can also try the final prototype directly here.
Conclusion
We tried to solve a familiar problem to drivers, especially in Jakarta: the pain of searching for parking spots. Based on research and design thinking, we have crafted a high-fidelity interactive prototype that is able to help drivers in finding parking spots easily and efficiently. Usability tests show that this goal was largely achieved with several suggestions that we incorporated in the Parkin app’s second iteration.
What If?
Several what if’s that might have helped us design better:
- What if we researched deeper, trying different methods like online survey or A/B Testing?
- What if we expanded the scope of the project to include the rest of the parking journey, from going back to the car to exiting the parking lot?
- What if we explored other protoyping tools such as InVision or Protopie?
- What if we tested the prototype to drivers while they are actually driving?
Lessons Learned
One of the most difficult things to implement in our work process is the Design Sprint framework. At first, we decided to keep track with our agreed schedule week-by-week, but we were often overwhelmed with assignment deadlines and other projects. As a result, we weren’t able to test our second version prototype to users.
We have learned a lot from this group project. We hope that this case study will also give readers insight into the problems faced by drivers in the parking process, and our shot at solving them with the design of Parkin.
IKEA, where the canteen provides the ideal working experience.
Want to learn more?
If you’d like to…
· get an industry-recognized Course Certificate in Usability Testing
· advance your career
· learn all the details of Usability Testing
· get easy-to-use templates
· learn how to properly quantify the usability of a system/service/product/app/etc
· learn how to communicate the result to your management
… then consider taking the online course Conducting Usability Testing.
If, on the other hand, you want to brush up on the basics of UX and Usability, then consider to take the online course on User Experience. Good luck on your learning journey!
Special thanks to Dewinna Farah Puspita who was the product owner and a great team leader, Deni D. Arta for his guidance throughout the project, and the rest of the Purwadhika UI/UX Design class members for their support.
