Drive with confidence, navigate with ease - Discover Ontario's roads with us!
Ontario Drive and Road
Overview
Ontario Drive and Road website is designed to provide guidance to individuals who are seeking information on road conditions, driver license, vehicle registration, and other concerns regarding the subject matter.
As we conducted usability test on original website, we found the webpage's information architecture is poorly structured based on four IA elements: navigation, search system, organizational system and labeling.
The redesigned website was designed, sketched and prototyped by Jinghao Xiao, Margarita Cifuentes, Weiqian Ding, Xinyi Gao, Zoe Huang, Jielin Jiang, Tianlei Wu, Ruiying Xu.
Role
Conducted usability testings on target user groups and analysis results
Designed Information Architecture diagram by using Figma
Wireframed preliminary sketches
Designed high-fidelity prototype by using Balsamiq
Presented redesign journey and prototype to stakeholders
Understand the problem
My role: Structured interview questions, conducted usability testing research with 3 participants, Illustrated problem statement and analyzed user flow
The users of Ontario Drive and Roads are mainly residents of Ontario, who are at least 16 years old. Therefore, to better understand their experience using this website, we collected user experience data from three different user groups:
-
Adults fluent in English, who are familiar with computer and the website
-
New immigrants and international students who are familiar with computers but are new to the website
-
Older adults and other people who may have technical challenges, and/or language and knowledge barriers
The usability testing research aimed to examine how users choose to locate certain information on the website, which information and functions they find relevant, and how long it takes them to find the information to complete a task.
We built three scenarios for our target user group to perform on Ontario Drive and Road website:
-
Task 1: Imagine you are a bus driver and your license plate is expired. You need to check your driver's license status and renew your license plate. Could you demonstrate and explain how you would find the relevant information to do so on the website?
-
Task 2: Imagine that your personalized plate was stolen and you needed to find information about replacing it. Could you demonstrate and explain how you would find this information on the website?
-
Task 3: Imagine that you encountered some difficulties while attempting to renew your driver’s license, what would you do to seek help? Could you demonstrate and explain how you would find the contact information you need for help on the website.
After observed user performed the tasks, we discovered the top frustrations:
Poor navigation system: Some young users familiar with computers reported using the ‘Ctrl+F’ function to find keywords on the page. Since they are not utilizing the webpage's navigation tools to find their needed information, this indicates that the current navigation system is not a sufficient tool for users.
Crowded content: Half of the users said there was too much text on the page. This suggests that there are challenges regarding the ease of finding information, and that there should be a more efficient combination of text and images.
Misleading subheadings: Users explained that they read subheadings carefully to find the information they need, and that the naming of these subheadings is not sufficiently clear, and some of the link names are misleading.
The detailed results including interview scripts, usability testing performance and survey questions could be access under here
Card sorting study
My role: Organized card's categories and distributed study
To better understand the users’ perception and possible confusion of the website’s information structure, and by utilizing the Optimal Workshop Card Sorting, we divided the card sort study into two sessions. The first session of the card sort is named driver licensing, while the second one is for all categories except driver licensing.
Results
These cards were the least agreed on which category they fit:
-
Medical review for Ontario drivers
-
Medical, Vision and hearing standards for commercial drivers
-
Get an accident report for a vehicle collision
-
Replace a lost, stolen, or damaged licence plate
-
All the information under the category of Highway traveller information.
Preliminary sketches
My role: Sketched low-fidelity prototype, Reorganized website's information architecture based on the card sorting study
I conducted workshop and sketch sessions with the team to map out the user flow and come up with a storyboard to capture the MVP
We identified the following key changes on the website's information architecture:
-
Adding an overarching navigation bar, which encompasses all the information that were once scattered on the main page. We then combed through each labels to merge the repeating contents and relocate the misplaced labels.
-
Merged tasks that apply to all user groups into "General Information", Considering new drivers as a majority of user group, we specifically create a “New Driver” category (first level) which encompasses all the information relevant to both “Non-commercial drivers” and “Commercial drivers” (second level), and then we introduced third level labels that explained the vehicle types belonged to each aforementioned drivers’ type.
-
Rephrasing the complex labels, we save our users from being deluged by the redundant information, which removes the obstacles on their journey to complete their tasks on the website.
Because of the massive information and tasks on the website, our group decided to sketched low-fidelity prototype by following one user task which is change address on the driver license
Change address through navigation
Change address through search bar
Change address through carousel
Tree testing study
My role: Designed user flows and conducted second usability testing with three user groups. Learned about the target users behaviour and analyzed quantitative data into opportunities to improve.
Our group decided to conduct a further usability test on our sketch of the redesigned website to improve its labeling, findability and information architecture. We chose tree testing, assigning user groups to perform five tasks and collect their user paths.
Task 5: You have some minor eyesight problems but would like to become a bus driver, you would like to find resources to see whether you met the vision standard for becoming a commercial driver (pie chart).
Task 5: You have some minor eyesight problems but would like to become a bus driver, you would like to find resources to see whether you met the vision standard for becoming a commercial driver (user journey flow).
In the fifth task, 60% of participants failed to arrive at the correct subheadings, and the average time taken was 45.98 seconds, compared with the average 80% success rate and 25 seconds response time on the other four tasks. Our group realize "Driver licensing" module is still having the problem of category overload and ambiguous components positioning.
The tree testing study provides insights into which categories still need improving and whether the current information architecture could provide users with consistent words, actions and enough user freedom.
Defining the MVP
My role: Reorganized website's information architecture based on the card sorting study, Designed after IA by using Figma
Before we starting prototyping, our group decide to restructure the current information architecture on a IA diagram. The "Before IA" demonstrate the current website's labels, navigations, layers and organization system. The "After IA" showcase the information architecture of the redesigned Ontario Drive and Road website and we could use it as a guide to design the high-fidelity prototype.
Before IA
After IA
.png)
After the tree test was conducted, here are some major changes we made based on the preliminary sketches:
-
Decrease vertical depth by increasing horizontal depth. The “after” IA schematic diagram has a more flattened structure than the “before” IA schematic diagram. This will overall benefit our users by giving them clear directions of where to find information that applies to them, and by allowing them to receive the information in a simpler form.
-
Break the "Driver Licensing" module down into two categories, "Have an ON licence" and "Get an ON licence ." This approach not only trims down the information taken by users in each category but also points to the navigation direction to the user in language that is precise and easier for them to digest.
-
Change the "General Information" label to "New driver resources ." From the tree testing, general information is still ambiguous for users looking for driver schools information and driving test booking. "New driver resources" could help users to identify which sections could provide them with the information they need as a new driver.
Design Concept
My role: Prototyped redesigned website by using Balsamiq, solely designed search bar.
Our redesigned journey is focused on four major Information Architecture elements which are: Navigation, organizational system, labeling and search system. Along the design journey, our strategy is to merge redundant labels, rename ambiguous terms, relocate confusing categories ,creating breadcrumbs and reduce layers to maximize user freedom and minimize user frustration
High fidelity prototype demonstration video
In addition to being a UX designer, I was also responsible for the marketing side, where I pitched our ideas to stakeholders to illustrate the full cycle design journey of our redesigned website and the value it could bring to the target users.
Takeaways and next steps
The design goal at the beginning of the project
If the aforementioned issues are solved, the webpage will be in a relatively organized and consistent structure, allowing users to find the specific information they need efficiently. Each heading and subheading will become logically structured, which means clicking on the navigation bar will not take users to a page that contains irrelevant information. Additionally, users can utilize the keyword search bar directly to search for the information within the page. The user experience will be improved considerably.
The clickable prototype will be further tested by using think-aloud protocol to observe whether our redesign is robust, accessible, integrated and pleasing. Based on user's behaviour and their journey on our new designed website, we will continue prototyping the website by using Figma to make it more realistic and flexible.
Some takeaways
-
The government website usually have enormous content volume of information. And it is by far the most complicated information architecture diagram we did on a website
-
There are several differences between corporate and government websites regarding their purpose, tone, funding and legal requirements. As a UX professional, I learned to design based on the context, content and environment of the properties of either a business or government. And I tailored my design based on the differences.
-
I have implied my professions from marketing into the design process, so we can ensure our redesigned websites could bring value or funding to the government and increase residents' satisfaction.