City of Vaughan Parking App Redesign

The City of Vaughan introduced an electronic parking permit system to its residents in 2018. It was an endeavor undertaken to automate the process of obtaining a permit. Though at the time it was a massive leap forward toward digital transformation, it lacked an experience that is seamless and user-friendly. The system has not received any new updates since and needed a lot of improvements. This is my take on it along with my colleague Vibhav Srivastava who also specializes in UX design and is a web developer.

Problem definition and project goals

The main problem with the system had to do with the usability issues that arose during the heuristic evaluation.

The system lacked accessibility, simplicity, and consistency. The goals were to tackle these issues by making the system more inclusive, making the process of obtaining a permit simple, and making the experience error-free for the user.

The heuristic evaluation highlighted issues with the hierarchy of elements, form design issues, and inconsistency throughout the system. I will walk you through the problems and how I tackled them.

Visual Hierarchy Issues

Important information about the legalities when it comes to parking permit holders is listed down at the bottom after the call-to-action buttons. This might cause the user to overlook these important points before taking action. They could be easily missed since naturally users will notice the CTA button first and thus click it — and dismissing all the important language below the button as useless.

There is a heuristic issue here as well since the user is forced to scroll down, remember the rules, and come back to click the buttons. The user is forced to recall from memory rather than selecting it in a natural manner.

The regulations are also not emphasized in any way to show the importance of them to the user. The use of visual hierarchy will be necessary here.

The Solution — Improved Visual Hierarchy

After considering the main issues with the system, I prioritized the sections that needed immediate change. Below is a sample of the proposed redesign of the main landing page.

By simply laying out the content strategically and logically, we can derive a better seamless experience for the user. The above redesign is better laid out and can be easily consumed by the user — the information is organized in a well constructed manner.

Bad Form Design Issue

The form fields are scattered throughout the page adding quite a bit of cognitive load on the user and making the UI downright ugly.

The problem of the cognitive load can be overcome by converting the design into a single-column one. This makes it easier for the user to navigate the screen and see time finishing the task.

and speaking of errors, the errors that are shown on the above image, in the registration page are also overwhelming for the user and takes up too much space.

We can tackle this issue by having the validation feedback only below the form fields. Currently, there is an additional section taking up space on the top highlighting all the errors that should only appear at the bottom of the each individual form field. This issue can increase the cognitive load and be visually daunting for the user which will in the end cause the user to abandon the flow completely.

We can even add a progress bar to show them where they’re at. This is considered as a Plus! and will help the user know where they are in the registration process.

The Solution — Good Form Design

In the solution that I provided, the signup form is organized in a way that not a lot of information is shown to the user at once. This makes sure that the user is not overwhelmed with data.

The form also now has a progress bar on top that shows in which stage the user is in the on-boarding process.

This makes the interface easier for the user to understand without forcing them to bounce back between sections.

The form to upload proof of address is also improved which gives a feedback to the user if the information is rejected or has an issue. This prevents errors.

The splash page now has an improved hierarchy with the rules and regulations displayed before the CTA so that the users can know about the rules before clicking the button.

Inconsistent Design Issue

The “buy permits” page does not have characteristics that differentiate it from the home screen. In addition to that, the UI does not help the user in telling them where they are in the system. There is no feedback to show their current place.

The Solution — Improved Navigation Menu

Ultimately it was a navigational menu issue that needed to be addressed. With the redesign, the navigation is also structured in a way that the list prioritizes the features that are used most and that it is logical.

I was able to eliminate redundancy in the navigation as well. The new solution has more information and more intuitive to the user. We eliminated duplicate windows and added simplicity in navigation based on the task user will need to fulfill.

Error Prevention Issue

The lack of clear error messages can confuse the user. In the example above, the proof of address the user has submitted was rejected, but there is no feedback giving him the reason why that happened. This leaves the user confused and frustrated.

The Solution — Provide 2-way Feedback

We realized that one way to solve this issue is to allow the user to label what piece of information is being submitted as proof of address. Once the information is submitted, they will be able to check back and determine if their request has been approved. The admin will be able to provide their feedback to the user if any issues are experienced with their submission — hence not leave them confused and scratching their head. An important piece of heuristics guideline.

Home page Redesign

In the redesigned home page, the information is now showcased with a better hierarchy for the user so that the experience is more intuitive for them.

We decided to include all the other types of permit options — residential, visitor, and construction. Since this aligns with their path to digital transformation, this will be essential in providing their users all access to their services pertaining to obtaining permits online.

Obtaining Permit Flow

The user flow for the “obtaining a permit” feature is now more seamless. The user also has more payment options to chose from giving them the feeling that they’re more in control.

Overall, the flow is friction-less and broken down logically. Currently, the online parking permit portal includes all the streets, even the ones that do not allow parking. In our user-centered approach to design, we are only including streets for which you can obtain a permit for. Again this will create a more intuitive experience and not leave the user guessing about the streets that they are permitted to park on.

Conclusion

In this project, we were able to highlight all the design problems that currently exist and improving them will allow the users to consume a more seamless and user-friendly experience online. Our focus was on following proper heuristic guidelines along with being accessible to users — and that’s what we achieved. The web application is now more accessible and user-friendly. The project has been a decent challenge for me and I’m very pleased with how things turned out to be.

I learned about how to apply heuristics to an application and how to improve consistency throughout a design. I feel like the project helped me improve myself as a UX Designer and I’m looking forward to improving the design even further.

In the future, I’m hoping to upgrade the design by creating a style guide and making the UI even more attractive. I will put effort into improving the typography used as well.

Thanks for checking out my project and you can read other case studies by me on my portfolio. Peace ✌🏻.