The Urban Studies Program website serves as an essential information hub for current and prospective University of Toronto undergraduate students.
However, the current website design has not been updated since its creation 10 years ago, and is difficult to use for both the stakeholders and its intended audiences.
How can we better address current users' information needs through the website's new redesign?
3 months from Oct-Dec 2018
UofT Urban Studies Department
UX Design and Research
Victoria Ho, Adrienn Kassai, Yuan Ma, Jessica Yao
Website
Onpoint Auditor, Optimal Workshop, Figma, Google Surveys
Card Sorting, Tree Testing, Surveys, Usability Testing, Storyboarding
Before we began to do any redesign work, we needed to understand the stakeholders’ perspective, and any limitations that would be critical for this project.
We had meetings with the program director, program coordinator and the IT coordinator to find out what the expectations, goals and limitations are for the project.
To understand the current state of the website's information architecture, we also conducted a content audit using OnPoint Content Auditor, and used the report generated to develop a sitemap for the existing website.
.png)
To learn more about users’ current experience with the website, we enlisted the help of the Urban Studies department to distribute our surveys to the student body. We also conducted user interviews and usability tests, to learn where they go to find program information, what they struggle or like about the existing site, and what content is important to them.
From our research findings, we determined that the website needed a rehaul of its global navigation and organization of content.
To inform the new structure and navigation of the current website, we designed an open, online card sorting study using Optimal workshop.
In the study, we used a combination of pre-existing labels (i.e. cards), as well as modified/new labels based on our findings from the research phase.
The labels are of 3 types:
During the study, we asked participants to generate categories to place the labels/cards under, and compared all the category labels afterwards to understand the language that is intuitive for users, and whether these categories contain similar cards.
To help inform the redesign of the global navigation menu, we took the categories generated by the participants and organized it in a list, then created standardized category names by matching similar names and cards. We also analyzed the similarity matrix results generated by Optimal Workshop to understand which cards were commonly grouped together by participants. We created a table below highlighting important card groupings and percentages.
By identifying common patterns in category names and card groupings through the similarity matrix, we were able to match category names with content, and make sure similar cards were grouped together based on users' mental models.
We used these patterns to inform a new information architecture schematic for the website redesign.
.png)
Once we completed our analysis of the card sorting results, we individually drew up rough sketches for our redesign. Guided by visual design principles on layout, we discussed our designs and collaboratively created an annotated wireframe that included best aspects from our sketches.
To evaluate our redesign, we ran tree tests with 4 participants, and consolidated the results of the test below. Based on their success rates and timing to complete the task, we determined the participants found the redesign clear and intuitive.
After evaluation of the redesign, we created a medium-fidelity clickable prototype available here. We also created annotated workflows to present to our stakeholders.
During the presentation, we highlighted our process, research and key findings that informed our redesign, as well as benefits of the new design including:
In hindsight, we should have conducted a tree test study with the existing website's architecture, to see whether there was an improvement on the usability of the website ('before and after' bench-marking). It would have made for a stronger case for our redesign if we could do a direct comparison with the results.
Our participant size should have been larger for our tree test study (of our new design) in order to get results that could better validate our navigation system redesign. Although it was positive, the results should be taken with a grain of salt given how small our participant pool was.
Our next steps would be to re-run the tree test with more participants for more robust results, and conduct a closed card sorting study to find out if representative users agreed on our revised organization and labeling systems.
