Case Study UI/UX -- City of Vaughan Parking Permit Website

Medium.com
August 14, 2020

The shift from paper to online is a long evolved and refined part of our history over the past few decades. With this transition comes many changes both large and small. Large companies such as Amazon have fully relied on online experiences to create one of the most efficient supply chains in consumer history. However, not every organization adapted as quickly to fully electronic processes.

For smaller companies and organizations that have been slower to transition to the online world, there is often a a lack of proper UX and UI design consideration. A prime example of this is the Vaughan City Parking Permit Portal. This local project to shift from paper parking permit applications to electronic applications was created in 2018.
The initial website was riddled with design flaws, making it difficult for users to easily obtain a parking permit. This difficulty is almost ironic as it defeats the purpose of going electronic. Hasnain Bakhtiar, a UX and UI designer, decided to improve the Vaughan City Electronic Parking Portal.

Task:
UX and UI redesign for an Electronic Parking Permit Portal

Process:
The initial Vaughan City Parking Permit Portal was created to make their parking permit obtaining process fully virtual. This would allow for users to easily obtain a permit without the burden of physical paperwork. When Bakhtiar looked at this website, he realized that there were many areas that needed to be improved in order to smooth the transition from paper to electronic permit applications.

The designer wanted to improve the site by making it user friendly, and create a new feature that accommodates people seeking Accessible parking space permits.

UX Design:
To begin the redesign, the designer ran a Heuristic Evaluation of the portal to identify which areas would need to be improved. Through this review, he noted that there were many flaws impeding a users experience such as a “lack of visual hierarchy” in the portal’s requirements section, improperly placed log-in or create account action buttons, a visually overwhelming create account page, an inconsistent layout, and a lack of ability to expand or clear error messages.

Based on the designer’s results from the Heuristic Evaluation, he decided to create a wireframe for the new site that includes a simplified registration experience with fewer locations to input user information per page. Additionally, the single column form would not be changed, however the navigation bar would be updated to seamlessly fit all options in one view to eliminate the need for an expanded option. Lastly, a progress bar will be incorporated to update users on their progress throughout the registration steps. This will provide clarity to the user.

This new design aims to reduce the risk of user frustration and provide consistency throughout the web pages. The layout greatly improves the functionality of the website offering users a stress-free transition from paper to electronic.
Image for post

UI Design:
Once the designer determined the optimal layout for the user’s experience, he updated the aesthetic of the interface to provide a more modern and visually appealing look. The original site featured a fully white background with black text and gray boxes to input information. This color palette was dated and lacked visual stimulation to keep the user engaged.

The new design of the website features a lively, yet calming blue toolbar which visually separates the navigation section of the portal from the main screen. This removes the need for excess gray lines and seamlessly integrates themes from the logo of the Vaughan City website which includes green and blue.

Redesigned interface featuring engaging color pallet
For the registration page, the designer reduced the visually overwhelming aspect, by dividing the input information sections into two pages with a blue progress bar to signal to the user how far along they are in the registration process. Here, the designer also changed the “Go back” and “Cancel” action buttons to a yellow color from a previous light blue. Yellow is a highly visually stimulating color which makes the button easily noticeable.

Lastly, the designer added to the consistency of the design by including the site’s logo at the top of each page. This reminds the user of why they are on the page and contributes to the visual aesthetic and brand recognition for the parking permit portal.

Overall:

The designer was successfully able to create an effective redesign of the Vaughan City parking permit portal. This new website follows many design principles with the intent of providing the user with the simplest registration process as possible, while maintaining the City’s registration restrictions.

This project is a great example of how a careful consideration of UX and UI design can be implemented to make previously tedious paper processes more efficient to save both the client and the user time and money.