UX Design
TO Park Easy
Providing personalized street parking experience for Toronto drivers.
My role:
Design Strategy Lead.
Secondary Research, Primary User Research, Data Analysis, Empathy Mapping, Journey Mapping, Ideation, Wireframing, Prototyping, and Usability Testing.
Duration:
October – December 2023
8 weeks.
Team:
Zhenbo Wu, Jianheng Chen, Songjia Liu, Xuefeng Fan, Xiangyu lyu, Jingxian Chen.
Platform:
Mobile App
Tools:
Figma, Miro, Balsamiq, Qualtrics
OVERVIEW
TO Park Easy
This project aims to improve Toronto drivers’ overall street parking experience, particularly focusing on the minimum viable product (MVP) mobile app design solutions, which led to a personalized digital experience for diverse drivers.
THE PROBLEM
Drivers are finding it inconvenient and confusing to find street parking in Toronto, leading to unexpected effort spending and parking tickets.
This project identified Toronto drivers’ current pain points while doing street parking and designed potential solutions (TO Park Easy App prototype) to improve their overall parking experiences.
(Street parking signs in Toronto)
NEEDS
01
Know Available Parking Areas & Rates
Drivers cannot pre-check available street parking areas and parking rates.
03
Understand Confused Parking Signs
Drivers have difficulties fully understanding the parking signs.
02
Check Current Parking Regulations
Drivers need to spend unnecessary effort figuring out the current parking regulations.
04
Avoid Overstay
Drivers are tired of spending effort to calculate their rest parking time.
"How can we make the design solution not only a tool for users to check street parking information but also prompt them with more personalized service to reduce their cognitive load while parking and improve their experience?"
THE SOLUTION
We designed a street parking app prototype called TO Park Easy.
TO Park Easy is a mobile app focusing on street parking in Toronto. This app can prompt users regarding service and street parking information based on their current time and location to ensure personalization. It also integrates AI-based picture recognition functionality to ensure efficiency in interpreting parking signs for users.
01
Street Parking Map
Visualize available street parking areas and rates based on users’ current time and location.
02
Sign Interpreter
Enable users to take or upload a picture of a parking sign and interpret the sign in data visualization best practice to explain information in the sign.
03
Parking Alarm
Set the parking alarm to maximum parking time for users based on the current time and parking area regulations.
Project details starting from here! ⬇️
DESIGN PROCESS
1️⃣
Research
&
Data Analysis
01. Secondary Research
What is the current state of street parking in Toronto?
Holding this problem, we did the initial secondary research through 24 online blogs. Explored the big-picture problems that Toronto drivers face when street parking.
Key Findings
🅿️ Confused Parking Signs
Parking signs in Toronto are often confusing (Robertson, 2020), leading to drivers receiving parking tickets due to misunderstanding the rules. Residents complain about the lack of clarity in parking information, which affects their overall parking experience (Lakey, 2022).
Source: blogTO, Toronto Star.
⛔️ Unsured Parking Availability Information
Drivers in Toronto face challenges in finding available parking spaces, leading to increased complaints about illegal off-street and on-street parking (Dragicevic, 2022). Residents are often unsure whether parking spots at their destination will be available (Landau, 2022).
📱 Complexed Parking App
The current parking apps in Toronto have complex and confusing interfaces, making it difficult for users to navigate and causing potential issues with parking payments (Rasciauskas, 2022).
Source: blogTO.
02. Primary User Research
Determining research methods is always important. To address both data validity and collecting process efficiency, we finally used online surveys and in-person semi-structured interviews as the two research methods.
Survey
The survey contained 7 questions.
70
responses were collected
61
responses were valid
81%
👎
of the participants were dissatisfied with Toronto’s street parking.
87%
😣
of the participants found it difficult to find street parking areas in Toronto.
0%
🤔
of the participants thought they fully understood the street parking signs, and 16% thought they did not understand most of the meanings of the signs.
(Survey Quantitative Data Analysis)
Semi-Structured Interview
The 12 participants in the interviews were Toronto drivers who did street parking at least once per week. Each interview session was 10-15 minutes.
We used the thematic analysis method and created an affinity diagram to combine data with similar themes.
(Affinity Diagram - Qualitative Data Analysis)
2️⃣
Persona
Based on the user research, we created a user persona called Kevin to represent the target user of our product. The persona helped us to empathize with the Toronto drivers who are suffering from street parking.
(Persona)
3️⃣
Empathy Map
We developed an empathy map of Kevin to better understand his needs and feelings, aiming to use these insights to build Kevin’s user journey more precisely and reflect the target user’s current state.
(Empathy Mapping)
4️⃣
Journey Map
Now, let’s stand together in Kevin’s shoes and experience together of what happened to him while street parking in Toronto!
(Journey Mapping)
The user journey reflects Kevin’s street parking process, and each team member voted on the 5 most critical pain points that we thought. The voting process allowed us to identify Kevin’s most significant pain points during the street parking process and pinpoint opportunities for design strategies.
5️⃣
Needs Statement
Based on the most critical pain points our group voted on in the user journey, we proposed the 5 most significant needs Kevin has while doing street parking. These need statements not only help us empathize and sum up the key user needs so far, but also serve as the problem-solving framework that helps us to follow in the solution design phase.
(Needs Statement)
6️⃣
Solution Ideation
Since the 5 needs we proposed in the last step all require personalization for users, as the ideation leader, I led my group to brainstorm how we can integrate current technologies to achieve the personalization goal for users in the street parking scenario.
💭
📍⌚️
As a feasible and trending technique, our group agreed that we could integrate AI technology into the design solutions and prompt users with more personalized street parking service based on their current time and location, while also providing users with more targeted assistance when they face issues.
(Design Ideas & Prioritization Grid)
Then, following this baseline, our group brainstormed 9 general design ideas. Since this project focused on creating MVP (Minimum Viable Product), our group voted on the ideas in two dimensions, Feasibility and Impact, and plotted the ideas on the prioritization grid.
We divided the grid into four sections and decided to focus only on those categorized as “Home Runs” and “Quick Wins” due to time constraints and technical complexity.
7️⃣
Design Goals
Now, all of Kevin’s needs have been addressed. Our project will be moving to the design phase.
But hold on, let’s look together at the design goals that our product will achieve and make sure that we and our stakeholders’ minds are aligned and consistent.
Kevin can pre-check all available parking areas and rate,
even though he is still at home.
Kevin can interpret all street parking signs,
without having to look them up.
Kevin can set a parking alarm based on his current location and time,
without receiving any tickets.
(Design Goals)
8️⃣
Prototyping
We started with hand-drawing sketches to save effort.
(Low-Fidelity Prototypes)
Following the lean evaluation with 3 potential users, we revised the design and created the mid-fidelity version.
01
Lack of organization in information
Users complained that the organization of detailed street parking information is messed up and lacks hierarchy. Also, the "Available Now" is a blur for them.
➡️
Solution: We reorganized the information and created a more perceivable visual hierarchy by editing the empty space and font sizes. Also, we added information about how long from now on users can park on the street to increase the validity of the information and reduce users' cognitive load.
02
The alarm design is hard to operate
Users complained that when they want to set a precise time range using the alarm, the design is not efficient.
➡️
Solution: We changed the round-shaped clock to a dial picker, making it easier for users to set time ranges that are precise to the minute.
(Mid-Fidelity Prototypes Version 1)
9️⃣
Usability Testing
To test the usability of our prototype, our group recruited 5 representative users to perform the usability testing. The techniques we used were think-aloud protocol, post-test interviews, and SUS (System Usability Scale) form.
75
👍
SUS Score
Good
100%
✅
Task Completion Rate.
(Usability Testing Quantitative Data Analysis)
01
Lack of customization.
3 users complained about the lack of customized filters in the parking map to ensure they can select the information they want to view based on their needs. Also, the app lacked a profile/setting section to ensure personalization.
➡️
Solution: We added a filter on the map page and enabled users to only show parking information that is needed. Also, we added a tab bar section called Profile to enable users to edit their account/preference and access for help.
02
The green and red lines on the map are overwhelming.
4 users found the green and red lines indicating availability overwhelming. 2 of them mentioned that the red color does not align with their mental model, as they typically associate red with urgency or importance.
➡️
Solution: Use evenly spaced dots instead of lines to represent availability. Change the red color to gray to indicate unavailability for better clarity.
03
The availability information has low visibility.
2 users complained it might require unnecessary effort for them to find the availability information because it is at the bottom. Since this is the most important information, it should be more visible.
➡️
Solution: We made the availability information larger and put it at the top.
04
"Interpreter" is confusing to users.
3 users complained the “Interpreter” label in the navigation tab was confusing. Additionally, its camera icon did not clearly convey its actual purpose of translating parking signs.
➡️
Solution: We changed "Interpreter" to "Translator", and replaced the camera icon with a parking sign icon to better reflect its key functionality.
Let's look at our final deliverables! ⬇️
🎬
Final Deliverable
01
Parking Map
Users can access detailed street parking information, including availability, times, and rates. The system updates this information based on the user’s current time, indicating real-time availability.
02
Parking Sign Translator
This allows users to photograph parking signs. The app then uses image recognition to provide personalized feedback, informing users whether parking is currently permitted based on their specific time and location.
03
Parking Alarm
Users can set a parking alarm based on their current time and location. The app advises on the maximum parking duration allowed at that location, enabling users to set an alarm for the longest permissible time or less, reducing the risk of overstaying.
📚
Key Takeaways
01
Follow agile methodologies to test designs frequently
🔁
Throughout this project, we performed 3 rounds of hallway usability testing and 1 round of formal usability testing sessions. These tests helped us quickly identify numerous issues, reducing the cost and difficulty of later modifications. Early and continuous testing ensured our design evolved based on user feedback, improving the overall usability and efficiency of the final product.
02
Focus on MVP (Minimum Viable Product) in design
💡
Given the project’s limited resources, we concentrated on developing the MVP at each design stage. This approach not only allowed our design to stay focused on specific tasks, providing targeted support to users, but also enhanced our work efficiency by reducing unnecessary effort.
03
Embracing emerging technology in UX design
✨
Similar to how we integrated AI technology in our design, it’s crucial to actively consider how emerging technologies can enhance future UX designs. This reinforced the importance of leveraging AI-driven solutions to improve accessibility and usability, making personalized experiences more approachable for users.
⚠ ️
Limitations
01
Lack of real stakeholders and cross-functional collaboration
🚧
Since this was a case study, we didn’t work with real clients and in a cross-functional team, making it difficult to accurately define the project scope and product strategy. In real-world projects, developers and product managers should be involved early and closely to evaluate the feasibility of design ideas, ensure they align with market needs, and determine whether they create enough value before implementation.
02
Lack of policy compliance consideration
⚖️
Policy compliance was not fully considered in this case study. In actual product development of public service tools, a policy advisor should be a key stakeholder, actively participating in workshops and throughout the design process. Their involvement helps ensure the product meets regulatory requirements, reducing risks and preventing costly compliance issues later on.
Thanks for reading!
Designed by: Zhenbo Wu
