Untangling Canvas
UT Austin Canvas Page Redesign
Untangling Canvas
UT's Canvas Page Redesign
Academic Project
Academic Project
Project Overview
Project Overview
This academic project transforms the unclear Canvas entry for UT Austin users into a modern, user-centric and visually engaging website using Information Architecture principle and user research.
This academic project transforms the unclear Canvas entry for UT Austin users into a modern, user-centric website.
The project was to redesign the Canvas landing page for UT Austin- an essential entry point within the UT system for faculty, staff and students.
Redesigning the essential entrance point for faculty, staff and students by improving information architecture and making content more findable.
My Role
UX Research
Design
Project Scope
Information Architecture
UI Design
Prototyping
Tools
ScreamingFrog
Figma
Google Sheets
Team Members
Chiyun Tsou
Tanya Gurung
Athy Shixuan Zhou
Kayleen Kim
Duration
4 months
My Role
UX Research
Design
Project Scope
Information Architecture
UI Design
Prototyping
Tools
ScreamingFrog
Figma
Google Sheets
Team Members
Chiyun Tsou
Tanya Gurung
Athy Shixuan Zhou
Kayleen Kim
Duration
4 months
The Challenge
Image: UT's current Canvas page
Canvas is a university Learning Management System (LMS) used as a central online hub for courses, allowing students and faculty to access materials and manage content.
With over 60,000 daily users, the scattered and unclear Canvas' site structure presents a significant usability challenge for students, faculty, and staff trying to find specific information quickly.
This resulted in increase in service tickets to the IT department, majorly receiving for similar problems.
Problem Statement
How Might We design a coherent and clearly labelled structure to help users find information efficiently?
Our Goal
Restructure UT's Canvas Information Architecture to reduce friction and improve the overall user experience.
Storyboards
There were mainly two categories of users in this project,
Faculty (Instructors, staff and TAs) and Students
Persona 1
UT Faculty
Persona 2
UT Student
Storyboards
There were mainly two categories of users in this project,
Faculty (Instructors, staff and TAs) and Students
Persona 1
UT Faculty
Persona 2
UT Student
Research Approach
Our approach started from understanding the problem of users, planning the structure, implementing changes and visualizing the findings in a mockup. The research for the project was done in 4 different parts.
01
Interviews
We started with stakeholder interview to gather insights on goals, user needs, pain points, and expected improvements for the Canvas Resource Page.
02
Content Inventory
We then went on to scrape out the website and create an inventory using digital tool (Screaming Frog) and manually hunting data link by link, going 2 layers deep.
03
Content Audit
The content audit was crucial and reflected missing, redundant links and navigation issues in UT's Canvas portal.
04
Card Sorts
Conducted moderated closed card sorts with 10 participants to understand mental models and validate proposed IA structure.
The Challenge
Problem Statement
How Might We design an information architecture into a coherent and clearly labelled structure to help users find information efficiently?
Image: UT's current Canvas page
Canvas is a university Learning Management System (LMS) used as a central online hub for courses, allowing students and faculty to access materials and manage content.
With over 60,000 daily users, the scattered and unclear Canvas' site structure presents a significant usability challenge for students, faculty, and staff trying to find specific information quickly.
This resulted in increase in service tickets to the IT department, majorly receiving for similar problems.
Project Goal
Restructure UT's Canvas Information Architecture to
reduce friction and improve the overall user experience.
Storyboards
There were mainly two categories of users in this project,
Faculty (Instructors, staff and TAs) and Students
Persona 1
UT Faculty
Persona 2
UT Student
Research Approach
Our approach started from understanding the problem of users, planning the structure, implementing changes and visualizing the findings in a mockup. The research for the project was done in 4 different parts.
01
Interviews
We started with stakeholder interview to gather insights on goals, user needs, pain points, and expected improvements for the Canvas Resource Page.
02
Content Inventory
We then went on to scrape out the website and create an inventory using digital tool (Screaming Frog) and manually hunting data link by link, going 2 layers deep.
03
Content Audit
The content audit was crucial and reflected missing, redundant links and navigation issues in UT's Canvas portal.
04
Card Sorts
Conducted moderated closed card sorts with 10 participants to understand mental models and validate proposed IA structure.
Card Sorts
Card Sorts
We conducted moderated closed card sorts with 10 participants. Each of their responses were recorded and the activity were carried out virtually and in person.
We conducted moderated closed card sorts with 10 participants. Each of their responses were recorded and the activity were carried out virtually and in person.
10
Participants
8
Students
+
2
Faculty
10
Participants
8
Students
+
2
Faculty
Card Sort on FigJam via Zoom
Card Sort on FigJam via Zoom
Research Findings and Solutions
Findings and Solutions
'Role Based Organization'
'Role Based Organization'
We introduced a ' Role Based' Organization.
This will help us ensure that the faculty and students like the personas can seek information easily and more smoothly.
This also improves user experience and reduces cognitive load in users.
We introduced a ' Role Based' Organization.
This will help us ensure that the faculty and students like the personas can seek information easily and more smoothly.
This also improves user experience and reduces cognitive load in users.
We introduced a ' Role Based' Organization.
This will ensure that the faculty and students can seek information easily and more smoothly.
This also improves user experience and reduces cognitive load in users.
'Sitemap & Navigation Structure'
'Sitemap & Navigation Structure'
Research Insights
Research Insights
Information Overload and Repetition: The main page was cluttered with too many different sections. Additionally, there were multiple links on the page with same destination.
Illogical Grouping: Some information hidden under pager which were difficult to find by both personas
Unclear Naming: Since most of the labels were unrecognized, faculty was engaging in exploratory behavior rather than identifying the main action.
Lack of CTA button: Since users didn't know what the landing page was used for, everybody bookmarked 'Enter Canvas'.
Information Overload and Repetition: The main page was cluttered with too many different sections. Additionally, there were multiple links on the page with same destination.
Illogical Grouping: Some information hidden under pager which were difficult to find by both personas
Unclear Naming: Since most of the labels were unrecognized, faculty was engaging in exploratory behavior rather than identifying the main action.
Lack of CTA button: Since users didn't know what the landing page was used for, everybody bookmarked 'Enter Canvas'.
Original Sitemap
Original Sitemap
Final Sitemap Redesign
Final Sitemap Redesign
Based on the insights, we developed a new streamlined IA. With multiple iterations of sitemap and labelling, we aimed at making the navigation findable for every user.
Based on the insights, we developed a new streamlined IA. With multiple iterations of sitemap and labelling, we aimed at making the navigation findable for every user.
Role Based Organization: The content for the top navigation was consolidated and kept clean and simple by organizing as per the user: For Faculty, For Students, Training & Events, Teaching & Learning Support, About.
Role Based Organization: The content for the top navigation was consolidated and kept clean and simple by organizing as per the user: For Faculty, For Students, Training & Events, Teaching & Learning Support, About.
Reorganized content: Sections like "Canvas policies" were logically moved under "About". "Download Canvas" were important and kept on the top navigation.
Reorganized content: Sections like "Canvas policies" were logically moved under "About". "Download Canvas" were important and kept on the top navigation.
Clarified Labels: For unrecognizable content, we used action oriented labels. Such as "Ally Accessibility Platform” → "Build Accessible Courses"
Clarified Labels: For unrecognizable content, we used action oriented labels. Such as "Ally Accessibility Platform” → "Build Accessible Courses"
**Due to time constraints, we could not dive deeper into the "Search" IA and has only been hosted on the Top navigation of the prototype.**
**Due to time constraints, we could not dive deeper into the "Search" IA and has only been hosted on the Top navigation of the prototype.**
Proposed New Sitemap
Proposed New Sitemap
Navigation System
Navigation System
We proposed a new top navigation system to ensure users could find the task or information they need on the main site easily.
Global Structural Navigation: A persistent top navigation bar featuring the eight main sections.
Local Structural Navigation: Secondary subheadings within each main section for drilling down into specific content. (Comparative Analysis: Purdue Library)
Global Utility: A prominent search bar for direct queries.
We proposed a new top navigation system to ensure users could find the task or information they need on the main site easily.
Global Structural Navigation: A persistent top navigation bar featuring the eight main sections.
Local Structural Navigation: Secondary subheadings within each main section for drilling down into specific content. (Comparative Analysis: Purdue Library)
Global Utility: A prominent search bar for direct queries.
Proposed Navigation System for UT Canvas
Proposed Navigation System for UT Canvas
'Taxonomy and Labelling Decisions'
'Taxonomy and Labelling Decisions'
23 Outdated or unclear page titles were renamed to align with user mental models.
Similarly, redundant labels were consolidated and reorganized content for clarity and discoverability.
23 Outdated or unclear page titles were renamed to align with user mental models.
Similarly, redundant labels were consolidated and reorganized content for clarity and discoverability.
23 Outdated or unclear page titles were renamed to align with user mental models.
Similarly, redundant labels were consolidated and reorganized content for clarity and discoverability.
Observation I
' Labels are unfamiliar or unclear to users '
Solution
Replaced Jagon: Product names or institutional jargon changed into plain language labels.
Observation I
' Labels are unfamiliar or unclear to users '
Solution
Replaced Jagon: Product names or institutional jargon changed into plain language labels.
Created a unified label style: Used consistent verb + object patterns
Observation II
' Overlapping/ redundant labels cause confusion '
Solution
Standardized Labels Across Page: Created a unified naming system so that labels referring to the same concept use the same wording across all pages.
Merged labels: Combined labels that served similar purposes into a single category.
Observation III
' Some tools serve both faculty and students or only serve one group, but labels don’t signal that. '
Solution
Applied audience tags to avoid misclassification.
Observation II
' Overlapping/ redundant labels cause confusion '
Solution
Standardized Labels Across Page: Created a unified naming system so that labels referring to the same concept use the same wording across all pages.
Merged labels: Combined labels that served similar purposes into a single category.
Observation III
' Some tools serve both faculty and students or only serve one group, but labels don’t signal that. '
Solution
Applied audience tags to avoid misclassification.
Figma Board with Renamed Labels
Figma Board with Renamed Labels
Next Steps
Next Steps
Tree Testing
Tree testing will help to improves the site by validating content organization and labeling
Research on Search
Deeper study on Search Bar and addition of frequent visited suggestions.
Tree Testing
Tree testing will help to improves the site by validating content organization and labeling
Accessibility Audit
While the site adheres to accessibility standards, an audit validates and strengthens the overall user experience.
Research on Search
Deeper study on Search Bar and addition of frequent visited suggestions.
Accessibility Audit
While the site adheres to accessibility standards, an audit validates and strengthens the overall user experience.