Ontario Driving and Roads
Revamp the information architecture of Ontario's driving and roads webpage to improve info-seeking efficiency.
Timeline
Sept - Dec 2022
Tools
Optimal Workshop
Octopus
Figma
Whimsical
Deliverables
IA Analysis Report*1
Usability Test Reports*2
IA Schematic Diagrams*2
Wireframe
Prototype
Roles
Information Architecture(IA) Analysis
Usability Testings:
Card Sorting
Tree Testing
User Interview
(Done in a group of 8)
Visual Design
Prototyping
(Individual)
At a Glance
About the Website
Ontario.ca is the official website of the Government of Ontario, Canada.
The site provides a wide range of information and services to the public, which is categorized into fifteen major topics including Arts and Culture, Business and Economy, Driving and Roads, Taxes and Benefits, and so on.
The Problem
The Driving and Road page of Ontario.ca serves many residents of Ontario to navigate daily life. It provides the most updated information about road conditions, driver's licences, vehicle registration, and so on.
However, the fact that it lacks a clear navigation structure and contains a large amount of text makes it harder for users to find the information they need, particularly for those who may not be tech-savvy or have language barriers.
The Solution
A redesigned webpage with a clearer layout and simpler labeling languages. Visually striking elements will be introduced on the main page to help locate information efficiently. A top navigation bar will be added for users to easily access all content without the need for excessive scrolling.
The Redesign Process
The Current IA Schematic Diagram
The content audit process started with the examination of the site's current IA to gain a wholesome view of the webpage. Varying shades of color were used to group similar sub-labels according to their affinity.
Content Analysis
The layout and elements of the site were closely examined in order to determine potential design opportunities related to information architecture.
Who are we designing for
The team conducted a series of user interviews to understand the barriers people have when looking for information on the Driving and Road page of Ontario.ca. We summarized our findings into two representative personas.
How do they use the site
Based on the quantitative and qualitative data collected through 17 questionnaire responses and usability test results, the team arrived at the following insights on the common user behaviors on this site.
The most commonly sought information is about Driver's License
The majority of participants (10 out of 17) reported that they had used this website less than 3 times. Some of the information that was frequently needed and accessed was about driver’s licenses, including drive test information, and renewals and replacements. This finding is limited in scope since most of the participants we could get access to in this user group were students, recent graduates, and office workers.
TL;DR: the search bar is frequently used to avoid scanning through long labels and sub-labels
In general (14 out of 17), participants reported that not all titles/subheadings were effective, and the most frequent (8 out of 17) rating of satisfaction regarding clarity of labeling was 3 (neutral).
For finding information, 8 participants mentioned that they have to browse over all categories since the search bar leads to all contents on Ontairo.ca, 5 use the search bar anyway, and 4 use both browsing and the search bar to search for information.
What confuses the users
A semi-structured card sorting activity was conducted to evaluate whether the current information scheme, along with the headings and sub-labels, makes sense for the users.
Repeating Labels
Example: The participants found the organizational structure unclear and the categories demonstrate some degree of overlap, for example, the definition of the category “New drivers” is ambiguous, and some information could belong to both “New drivers” and “Truck and bus drivers”.
Inconsistent Labels
Example: The “Medical, Vision and hearing standards for commercial drivers” was originally under the category of “Truck and bus drivers”, however, the notion of commercial drivers hasn't been mentioned previously.
Ambiguous Labels
Example: The “Commercial vehicles” label under the “Truck and bus drivers” category, for instance, actually contains the specific requirements and services for commercial vehicles but the label is too ambiguous.
Define the Design Goals
Start with the labels. Based on the card sorting results, all the sub-labels should be simplified, concise, and categorized under the most relevant main labels.
Design a navigation bar. A search bar on the top f the webpage that incorporates all the contents and layers will help users to navigate.
Introduce visual focal points. A majority of interviewees reported responding to pictures better than text when following the structure of the webpage.
The New IA Schematic Diagram
In response to the qualitative and quantitative research findings, keeping the user behaviors and needs in mind, a new information architecture was mapped out.
The following is the final version of our new IA schematic, which took the team 2 runs of usability tests and alterations to arrive at.
Rapid Wireframing
Within the limited time, the team created a series of low-fi drawings to visualize the updates in the labeling system, webpage layout, and other minor changes.
Evaluations
As the team move from low-fidelity sketches to higher fidelity prototypes, a series of tree-testing activities were conducted during the usability tests.
This helped the team to evaluate the efficiency of the updated labeling system and hierarchy in terms of direct information seeking.
Tree-testing Process
Tree-testing Result
Hi-fi Redesign
Three major updates were applied to the final design solution:
1) A clear visual indication of the purpose of this site
2) A new navigation bar summarizes and contains the content of this page.
3) Use concise phrases to replace the original long sentence link.
↗High Fidelity Prototype Coming Soon
Reflect and Grow
Design for specific groups can be beneficial for all. Our initial attempt was to redesign the website, especially for people who are non-tech-savvy and with language barriers. However, it's shown in the final usability test that all groups that users were able to navigate through the site more efficiently.
Making information findable and understandable. Especially for a government website like Ontario.ca that is all-inclusive, information-rich, and service-oriented. Combing through the IA of this site was a challenging process for the team, but in the last few rounds of usability tests, it was fulfilling to see that users could use the site smoothly.
IA reconstruction is a long and continuous process. In this redesign process, the team felt the time and effort that went into building the initial IA of the page, and yet there was still room for improvement. And even though the team provided our design solution within the limited time that works well in the final usability test, there are still a few updates that we would like to add if given more time.