Problem STATEMENT

Canvas is a Learning Management System (LMS) adopted by the University of Washington that integrates with the course system across the UW Seattle Campus. Despite the successes with its adoption, Canvas has also struggled with the effects of poor user interface design choices that has led to inefficient user flows, and inconsistent LMS experiences across courses as well as devices.

ROLE

UX Design


Process Overview


Investigation

SURVEY & Semi-Structured INTERVIEWS

During the investigation phase of this project, I set out to learn about the thoughts, behaviors, and pain points of the various stakeholders involved in the Canvas system. I looked at responses from a web survey which provided a rich collection of data regarding UW students' goals, frustrations, and needs for general use of the Canvas LMS system via web and mobile platforms. In addition to looking at quantitative results, I also generated a word cloud of their open-ended responses (right).

I also conducted a series of semi-structured interviews with students at UW to learn more about how they use Canvas. The following are some key findings from the interviews:

  • Students access Canvas daily, mostly to accomplish one small, specific task at a time.
  • Overall activities fall under three main categories: accessing info, turning in assignments, and participating in discussions.
  • Canvas is accessed most often through the web. The mobile app is mostly used occasion to access course or grade info.

Expert Interview

I met with Dr. Tyler Fox, the past director of the UW Learning Systems team. He is a Canvas subject matter expert with a wealth of data related to university members' needs and behaviors while using the UW LMS. The following are some key takeaways from our discussion.

Problems with Adoption

  • Canvas was brought on mostly for students who needed 24/7 access to learning material. It was geared to make an awesome learning experience for students, but is not necessarily a great one for teachers.
  • There is a steep learning curve and varying levels of aptitude: some faculty are bad with technology, some find the system limiting and create their own custom websites.

Pain Points for Students

  • Students want a consistent experience across all courses, yet classes are inherently different. There is no tool to help students prioritize work across different classes.
  • A lot of rich data/features are buried in the system, without an obvious way to connect the dots or tag related items.
  • People want the same Canvas experience regardless of which device is being used.

Cognitive Walkthrough

The cognitive walkthrough is a usability evaluation method in which evaluators work through a series of tasks and ask a set of questions from the perspective of the user. This method allowed me to question assumptions about what the user may think during each step.

Themes from Investigation

The following are the key themes that I picked out across all the findings from my investigations:

  • Canvas has many rich features, but confusing UI elements create buried functionality, and unused modules.
  • Varying instructor aptitudes lead to problems with adoption and an inconsistent LMS experience for students.
  • Poor navigation and filtering options makes it difficult for students to easily customize their course experience.

Ideation

Focus Areas

For the ideation phase, I focused on three problem areas that I identified during my investigations. Some potential improvements:

Focus Area 1: Course Management

  • Ability to sort list by Course ID, Course Name, or Term
  • Allow user to edit Course Name directly
  • Clearer indication of how to bookmark a course
  • Automatically bookmark courses when published

Focus Area 2: Grade Overview

  • Ability to sort list by Course ID, Course Name, or Term
  • Ability to expand a course to show the grade breakdown (assignments & percentages)
  • Access to class statistics and visualized data diagrams

Focus Area 3: Calendar Scheduling

  • Improve the weekly schedule view so that the full schedule is visible above the fold
  • Add a module/plugin that allows you to compare your schedule with other classmates’ schedules

Mind Mapping

STYLE MATRIX

USER FLOW (START OF A NEW QUARTER)

Site Map

Heuristic Analysis (Calendar & Course Customization)


Prototyping & Evaluation

FINAL Focus Area

From my investigations, I decided to focus on course management and navigation since this feature impacts nearly every single user visit to the site. The goal of my redesign was to improve wayfinding for students from the landing page of the Canvas website to their desired course page. The redesign allows the user to customize and navigate to their most visited pages in a faster and more direct manner.

Main Courses Page (navigation to system-curated targets)

Students don’t seem to be making much use of their current dashboard. Instead their first action is to mouse over the Courses & Groups navigation bar item and select a course from the panel that pops up, and to check information course by course. The redesign will make their bookmarked course links visible and accessible from the front page, and also organize notifications by course.

Featured Courses & Groups (navigation to user-curated targets)

The pages where courses and groups are organized are organized poorly, since they are only able to be sorted by course name. The redesign will allow courses to be sorted based on multiple criteria, but default to organizing them by quarter. There will also be a separate Groups page which can similarly be sorted and bookmarked for the front page.

Color Coding (customization)

Courses are color coded on the Calendar feature of the site, but none of the color codes show up on any other section of the site. The redesign will incorporate the color codes into the other sections of the site, which will allow the user to be able to locate a class more quickly from the front page (scanning by color rather than by words) and also make different course pages distinct from each other while still maintaining a consistent interface structure. Colors are automatically assigned, but able to be customized from the Courses page.

Wireframes

An interactive version of the wireframe prototype is available here. (InvisionApp)

Guerrilla Testing

In order to determine whether the redesign would be effective or not, I did some testing using the low fidelity wireframes that I had produced. The purpose of the test was to quickly gauge user opinions on whether or not the new user flow improved the user’s overall Canvas experience, and also whether or not the UI elements were usable and clear. Three participants were approached and recruited to do the study. All the participants were involved in the HCI academic field as part of their current occupation. All three participants also had previous experience using Canvas as a Content Management System platform.

Overall the participants liked my initial redesign. However, based on their comments I was able to identify some areas for further consideration or improvement. For Tasks 1 and 2, I identified the need for better affordances. Participant suggestions included figuring out what to do when many courses are pinned, and adding a page listing all the courses ever taken. For Task 3, there was a suggestion to make the customized color components for each page more subtle  so as to not take away from the overall style of the site.


Production

High Fidelity Visual Comps

Reflection

The goal of my redesign is to improve wayfinding for students from the landing page of the Canvas website to their desired course page. During my redesign process, I focused on three main features: Course Overview & Navigation, Featured Courses & Groups, and Color Coding. The redesign bookmarked course links visible and accessible from the front page for students, also allowed courses to be sorted based on multiple criteria, but default to organizing them by quarter. The redesign also incorporates color codes into the other sections of the site, which will allow the user to be able to locate a class more quickly from the front page (scanning by color rather than by words) and also make different course pages distinct from each other while still maintaining a consistent interface structure.

Although my redesign focused more on the courses management and navigation flow of the site, there are also other redesign elements that I considered, including having a separate page to manage user Groups which can similarly be sorted and bookmarked, organizing notifications by course, and adding affordances for customizable features by providing helpful tips for a first time user.

After producing a set of high-fidelity comps, I was able to showcase my redesign to others for feedback, as well as check out redesigns that other students produced for the class. There were a couple of interesting ideas that I felt that I could incorporate into my design to improve it further. One particular feature that I would like to try to incorporate is reducing the horizontal breadth (width of the sitemap tree) of the typical user flow even further, in order to reduce the number of clicks required for navigation even further. Other next steps include having expert users run a heuristic analysis on my comps, in order to improve my redesigns even further before trying to implement it in code.