Park It: UX Case Study
Discovering The Problem
Parking is an essential part of most trips you, myself and others make on a daily basis. I’ve watched many people around me struggle to find available and affordable parking spaces. So I set out to design a solution that alleviates drivers’ challenges when finding parking options in Toronto.
Park It was designed as a capstone project for my UX Design Diploma program at BrainStation TO. The app design process was accomplished in over 10 weeks. Please also find the case study on my site: https://hadis-portfolio.webflow.io/park-it there are some differences in the way I communicate my decisions.
Role: UX/UI Design, UX Research, IA & Wireframing, and prototyping.
Problem space:
In a growing metropolis like Toronto, drivers struggle to navigate through the cities complex parking environment, resulting in a costly and strenuous experience.
Research & Insights
To deeply understand drivers parking pain points in the city, I needed to understand what challenges and needs drivers in Toronto have. I set out to conduct my primary research by interviewing seven drivers from around the city. Drivers are a vastly diverse group of people. Such as locals, out of towners, tourists, casual drivers etc … So the interview subjects needed to reflect that.
Like Ian, 26, a stockbroker who lives in a residential part of the city. Driving isn’t necessarily his main way of transportation but surely is so after work hours. Or Taylor, 28, a merchandiser who lives in neighbouring Mississauga and often travels to the city for work and leisure. Thomas, 29, a Toronto native who is always looking to cut down on parking fees. My questions covered the entire cycle of the driver parking journey. I posed questions that can help uncover practical insights focused on understanding drivers needs, parking habits, and motivations.
“Finding parking is always a challenge when coming for an event. Also, the high cost to secure parking, pricing always fluctuates and then there is not knowing when things are expiring and keeping track of that and making sure you’re not getting to get a ticket.” — Taylor.
Insights Summary:
Insight #1:
Drivers find city parking street signage confusing and misleading. It is puzzling when drivers have to process so many mixed messages at once. Lack of standardized zones makes every block a special and unpredictable case.
Insight #2:
Drivers are in a constant search for free or inexpensive parking options. Like Thomas and Ian, they use tools like Google Maps to search the area for residential and city parking in the area.
Insight #3:
Not knowing where to park adds anxiety to drivers trips. Especially when planning to visit unfamiliar destinations.
Insight #4:
Drivers lack the tools to plan their parking ahead of time. Conventional tools like Google Maps only offer the tip of the iceberg and parking apps aren’t yet to be popular among drivers in the city.
Primary Persona
I created a primary user persona to represent the majority of target users. Mark is a consolidation of my research and interviewees. Mark will guide the design decisions for the development and creation of my solution.
Mark’s Parking Journey
The user journey displays a typical trip that involves parking for Mark. I created the map to empathize with Mark and to thoroughly showcase Mark’s emotions, thoughts and actions during his parking trip. Ultimately, to extract key points and opportunities from Mark’s needs and pain points.
Design Question
Between research insights and key user journey findings, I was able to get a clear and comprehensive understanding of the design challenge. The problem seemed big, yet simple. The common denominator was a struggle to find parking, whether it was free or paid.
How might we help drivers easily navigate parking in Toronto?
User Stories
To help lay the building blocks for my initial design, I needed to brainstorm many possible scenarios of what Mark would potentially need from a solution. Brainstorming was helpful to generate lots of ideas. However, I needed to get organized, so I clustered stories into epics. Planning a Trip naturally presented itself as the core function of the solution. Finding parking.
Task Flow Selection
After reviewing Mark’s journey map, I was able to identify areas of intervention (find highlights in the user map):
- Plan a trip under the desired time and date
- View parking signs.
Similarly, I then focused on three user stories that addressed those areas:
- Access parking spaces around the city from home.
- Search parking spaces by address.
- Set a time and view rates of paid + free parking using an online map.
Piecing together the above created a user task flow, something Mark would want to accomplish. The task flow will help inform my first greyscale wireframe design and sketches.
Low Fidelity Wireframes:
One of the challenges I faced was visually communicating information like street parking signage. This isn’t a new issue, however. Many designers have made great attempts to redesign municipal parking signage such as NYC UX Designer Nikki Sylianteng.
Through research and sketching, I arrived at the first low fidelity wireframes. The first prototype delivers the above task flow. Based on the desired address and time, Mark can access a variety of available parking options whether it is paid or free street parking as well as private parking lots.
Prototype test & learning:
Using the first greyscale wireframe prototype, I conducted a moderated usability testing with 10 drivers including 3 individuals from my initial interviews. Every driver needed to have driven and parked in the last 6 months. The task assigned was for the user to find parking options under a desired address and time.
To capture user feedback and maximize the opportunity, users were instructed to verbally communicate what they were doing, thinking and feeling. Through feedback and observation, I collected much helpful feedback.
- Although I didn’t have added reservations and payments, I was frequently asked if that was something users can do.
- Parking icons were confusing. A refined on-boarding screen can help distinguish paid from free parking.
- Action colours are greatly needed since users were not able to distinguish between active and inactive interactions.
- A map radius wasn’t helpful, most users tried zooming in and moving the map around.
- Information in the parking card was a bit lost, I needed a better hierarchy of information.
- Users want to find parking fast. How can I reduce the user’s minimum steps?
Visual Identity
After completing the user testing, it was time to begin creating a visual identity. Throughout testing, the name “Park It” resonated the most with individuals so I kept it. It was simple, memorable and relatable.
When it came to colour, I thought about Mark. What colours would enhance his experience? Mark lives in an urban neighbourhood in Toronto. I needed to deliver a solution that conveys trust, security, clarity and freshness.
Hi-fidelity wireframes:
At this point, I needed to expand my user task flow to deliver a more comprehensive parking task. I did a fair amount of research to discover map generation websites that’ll help me the right map code (check out SnazzyMaps). I needed a map that offered the right type of information with a clean interface that compliments the brand colours.
Parking Cards:
Below, are two parking cards representing parking options Mark would’ve found when searching a parking destination. Ossington parking card is a private paid parking lot.
However, Shaw Street is a free street parking. The time table you see is a digital, simplified, easy to understand version of the original municipal street signage. Mark can conveniently browse parking options, paid or unpaid for his desired destination.
Learnings & Takeaways
After 12 weeks of learning & work, demo day arrived. Demo day at BrainStation is an opportunity for all UX Design students to showcase their capstone projects to industry professionals upon completing the UX Design Diploma Program. For me, it was an opportunity to start a dialogue on how technology can disrupt the way we approach parking. Here are a few learnings I took from working on this project and sharing it with industry individuals:
Less is more. In hindsight, being a Jr designer meant not having enough confidence in delivering a simple solution and saying this is enough for the user. The core of the app was figured out pretty early on, but a lot of time was invested into filler features and steps. My educator advised me to think Uber app, 3 taps and you’re on your way out the door. Reducing steps and prioritizing a fast user experience came at the last design iteration. If users download “Park IT” they download it because they want to find and connect to a parking spot as soon as possible.
Providing free options isn’t less business. Adding access to free municipal street parking in the mix will only increase sign-ups, it’s a big incentive adding more value to the user.
Conclusion
I had an amazing time working on this project. I had to experience many areas of UX Design. I thoroughly enjoyed the research and interview process, all the way up to mocking hi-fidelity wireframes. A project is never finished really, but at this point, I am eager to jump into my next project. I delivered a comprehensive, visually appealing, user-centric product that solves a real problem for Mark and everyone struggling with parking. Thanks for reading!
