The
Background
The rapid growth of urban populations and vehicle ownership in North American metropolitan areas has led to parking and traffic management challenges. Parking X is a startup application that features real-time mapping of available parking spaces and respective prices; online parking reservation and online payment; the monitoring of the remaining time of the reservation; and a “Favorite Parking Area” by analyzing the user’s parking history.
The
Overview
In many urban cities, parking is an important yet problematic task. In high-traffic areas such as the downtown Toronto core, many drivers struggle to find available parking. Parking X is a startup application that features real-time mapping of available parking spaces and respective prices; online parking reservation and online payment; the monitoring of the remaining time of the reservation; and a “Favorite Parking Area” by analyzing the user’s parking history. In this work, you will see how Clark leverages his expertise in user experience (UX) research, design, and strategies to transform mere ideas into a cross-platform digital solution.
The
Responsibility
My responsibility is to leverage user research techniques such as user interviews and testing to gain a deeper understanding of users' needs and pain points, as well as creating designs for all three platfroms: mobile, desktop website, smart watch. This process ensures that user insights drive the design decisions, resulting in a more seamless, intuitive, and user-centered experience for the customers.
The
Design
The design process progressed from low-fidelity to high-fidelity prototypes. At the end of each iteration, design adjustments were made to ensure that all pain points and user needs were effectively addressed in the next iteration.
Lo-fi Phase:
Med-fi Phase:
Although creating medium-fidelity prototypes is rare in the industry today, this process is still highly recommended if resources are available. Making medium-fidelity prototype is an effective way to identify design "defects" before transitioning to the final design phase - high-fidelity prototype.
After hand drawing the wireframes, we have decided to transform our sketches into medium fidelity clickable prototypes by using Balsamiq Mockups 3. We chose to use Balasamiq becuase it is less time consuming, and easy to make revises after user heuristic evaluation. Based on the result we received from participants, we tackled some issues in the prototypes, for examples, added “Reservations History” as a menu item; changed unavailable parking lot message page; added “Back” button on selecting parking spot page; added “Money” sign on all screens; added “Reserve” button on “My Favourite Parking Lot” page; Added the responsive design page; Added “forgot password” page for alternate login path; Added language options on the homepagechanges were made. Now, all the functions in the system across three platforms (e.g. desktop, smartphone, smart watch) are displayed on three interactive pdf files.
Heuristic evaluation is also used after the med-fi phase to enhance the design. A sample note from the heuristic evaluation is provided below:
(Note: From this point onward, I will only provide design related to mobile. However, if you're interested in the other two platforms, please feel free to reach out)
List of changes (Mobile)
Added “forgot password” page for alternate login path (Issue #1)
Changed copy from “Alerts” and “Repeat” to “Set alerts” and “Frequency” under Time Reminders for clarity (Issue #5)
Added flag next to the language under settings (Issue #7)
Changed date notation from numeric value to text (e.g. 3/3/17 -> Mar 3 2016) for clarity (Issue #9)
Changed time system from 24 hour to 12 hour clock for clarity (Issue #10)
Added new page for the search bar to display suggestions based on past searched (Issue #18)
Enlarged the hamburger menu icon on the map for greater visibility (Issue #23)
Added use case when user tries to sign up for a new account with missing required information to help users recover from errors (Issue #24)
Added the ability to view payment information on past reservations (Issue #19)
Changed the color of all buttons to blue to keep consistency
Separated the first name and last name in the personal information sign up page (Olivier’s comment)
Changed the payment confirmation detail (Payment 3/4 page) to Reservation Date/Time/Location/Amount. (Olivier’s comment)
Added “Cross” button to close the side menu bar for Home Page (landscape) 2/2 and Menu page
List of Unimplemented Suggestions (Mobile)
Did not implement a function for users to cancel a reservation after booking because this flexibility will cause major issues for the system and inconvenience other users. For example,a user who is unable to find parking after a certain time will not know if they should keep checking it in case another user cancels their reservation (Issue #2)
If you are interested in seeing the deliverable: Mobile from this stage, please use the button below:
Hi-Fi Phase
For our high fidelity prototypes, we have decided to use Axure RP - the best mockup tool in terms of making complex protytypes. If you are interested in seeing the deliverable from this stage, please use the button below:
Password:clarkziangchen
(Note: if you're interested in the other two platforms, please feel free to reach out)
The
Research
Early Stage: Idea Conceptualization
In the early stages of the project, a conceptual model was created to illustrate the relationship between users and the system. Specifically, it demonstrated how the system processes user requests on the backend and how data flows from the user to the system and back to the user's chosen platform.
For the conceptual model, we are using the central processing unit as a metaphor to organize information. Key information (e.g., maps, parking rates) is pulled from various data sources to a centralized location to carry out an operation as specified by the user. The system is “smart” because data is collected from multiple data sources (e.g., City of Toronto, private parking companies) to a central cloud database and pushed to end-user platforms. Information from the desktop and smartphone are synchronous, while the smartphone can only sync information with the smartphone via Bluetooth.
The main concepts the system exposes to users are:
Maps (with attributes: parking info, lot availability, nearest subway, search, navigation)
User account (with attributes: name, favorite parking areas)
Reservation (with attributes: date/time, spot selection)
Payment (with attributes: payment information, billing address)
Research Stage: Understanding User Pain Points & Needs
To understand the potential users of the services along with their pain points and needs, user research was conducted and the findings were distilled into several user scenarios and user personas.
1) Sample User Scenario: It is 7:00am on Tuesday and Alex is getting ready to go to work at RBC. He drives the same route to work every morning so he is familiar with the route. However, his workplace is in the middle of downtown and he knows that traffic congestion is usually heavy during morning peak hours. As a frequent user of the system, Alex already has his credit card and vehicle information saved on his account. This allows him to reserve and pay for a parking spot in a few easy steps. There is an underground parking garage next to his workplace but parking is not always available. To ease his mind and save himself time later, he uses the system on his smartphone to search for available parking spots at the parking garage next to his workplace. After selecting a preferred spot and the parking time he would like to reserve, the system prompts him for payment confirmation.
Alex verifies his credit card information is correct and the request is sent to the system. After the successful completion of payment, a QR code is generated and synchronized with his smartwatch, which has a smartwatch-optimized version of the system installed. After he drives to the parking garage, he opens the QR code on his smartwatch and scans it on the QR scanner at the parking machine, successfully completing the reservation process.
2) Sample User Persona: To gain insights into our users and their needs, a survey was created and distributed online. Convenience sampling was employed because of the time constraint. The survey included questions on respondents’ driving habits, parking experiences, previous experience of using existing parking apps, current frustration with looking and paying for parking After a careful analysis on the survey result, a user persona was created.
The
Process
The project development can be broadly divided into the following stages:
Stage I focused on creating a conceptual model to illustrate how data flows across different system components and platforms, including mobile devices, websites, and wearable devices.
Stage II centered on understanding potential users. User research was conducted across various scenarios to identify pain points and gain insights into their actual needs.
Stage III involved design creation and iteration, progressing from low-fidelity sketches to high-fidelity prototypes. Notably, the design was implemented for multiple platforms, including mobile, website, and smartwatch. Afterwards, usability testing was conducted to ensure the final design met user expectations.
The
Deliverables
In addition to the designs presented previously, a promo video is also embedded for your viewing. We hope this provides you with a more vivid and engaging experience of this digital solution that we created.