Canvas Redesign

Redesigning the web interface of UW's learning management system from a user-centered approach

Role  
INDIVIDUAL

TEAM
Individual

TIMEFRAME  
6 Weeks

Tools  
Sketch, Invision, after effects

Canvas is a learning management system (LMS) created by Instructure.  It is the University of Washington's primary LMS since replacing Catalyst Web Tools in 2013.  Since then, Canvas has continued to be evaluated and improved, making it a valuable tool for both instructors and students.  However, my investigation into the space has revealed several user needs that should be addressed through a redesign.

The end result is an improved experience inspired by Google's Material Design that focuses on providing users with more customization options, streamlined page navigation, and easier access to various features.

Over the course of the project, I designed a new Canvas interface by conducting research, ideating potential solutions, prototyping and evaluating an interactive wireframe, and producing a refined digital mockup.  Finally, I animated the interface in After Effects to explore how motion cues could guide interactive flow.


Problem

Having extensive personal experience suing both Canvas and it's predecessor (Catalyst), I had an understanding of the LMS and first-hand experience of many pain-points as I started my investigation.  My research activities with other users validated some of these issues and I focused my redesign on two primary issues with the current Canvas system that kept resurfacing during my investigation into the problem space: dashboard customization and page navigation.
 

Problem statement

How can Canvas utilize better customization options and streamlined page navigation in order to prevent stakeholders from being overwhelmed with irrelevant information while still having easy access to different features? 

Old Canvas dashboard

Old Canvas dashboard


Research

SYSTEM MAP

I started out my exploration by creating a system map of the Canvas platform, including the different groups of stakeholders involved in the system and how they might access Canvas.  This also helped me visualize some of the higher-level relationships between the core components of Canvas.

systemmap.jpg

LMS Survey Data

Having access to survey data gathered from students and instructors regarding existing LMS usage, I sought to examine their goals, frustrations, and needs in detail to gain a better understanding of the problem space.

From the quantitative data, I immediately noticed an overwhelming 96% of surveyed students own a laptop, but only 51% indicated that they were satisfied with the LMS overall.  This led me to focus my investigation primarily on the laptop web experience.

While most of the data was quantitative survey data, there was also a large amount of open-ended responses regarding desired features in an LMS redesign.  This qualitative data was valuable for uncovering specific user needs and goals, and I noticed several trends in the responses.

 

Key patterns in desired features:

  • better customization and ways to organize information based on relevance and importance
  • simpler and centralized interface that is easier to use with less page navigation
  • personalized calendar with more focus on assignment due dates and time management
  • more transparent and contextual grading system
  • better mobile experience and push notifications
  • better student-instructor communication channels

Semi-structured Interviews

To understand the context of Canvas in terms of users' needs, I was able to speak with both an instructor and three current undergraduate students from UW.  The interview participants have extensive experience using Canvas and were able to provide valuable insights during individual one-hour interview sessions. 

My interviews focused on understanding a few research questions:

  • What are students' most important needs in an LMS?
  • How do students typically interact with Canvas?
  • What are major paint-points with Canvas and how do students deal with them?

Key takeaways:

  • Canvas lacks customization, especially in the dashboard.  Users value customization to organize information.
  • Previous system was poorly designed and did not scale well.
  • The system has a steep learning curve worsened by lack of technical knowledge in instructors and feature overload.
  • Many features are hidden or difficult to access - users are unaware of or had never used may features (e.g. chat, collaboration, hiding classes).
  • Dashboard customization and simpler page navigation is very important to users, as "it takes too many clicks to see what [they] want."
  • Tablet experience needs improvement and is "super sluggish."

Card sorting

In order to get an idea of user expectation and values, I recruited an undergraduate student to participate in a closed cart sorting activity using Keynote and a laptop.  I generated 23 cards that included various features and components of the Canvas system and asked the participant to sort them into five categories from a Likert scale of importance and then into a scale of usefulness.  

The activity allowed me to not only understand perceived importance and usefulness of the features relative to other features, but also uncover any disparities between usefulness and importance.  For example, dashboard and grades were considered 'very important' but only 'slightly useful', which suggests a design opportunity.


ideation

Thumbnails

My user research insights helped me generate rough thumbnails for various ideas, features, and UI improvements.  I then chose the ideas most relevant to my problem statement and incorporated them into more complete UI sketches.

UI Sketches

I explored different dashboard layouts through several UI sketches for a more complete visualization of potential directions.  Some details were inspired by aspects of Google's material design, since I wanted to provide users with a strong sense of hierarchy and modular dashboard components.  In particular, a permanent navigation bar and customizable cards for specific groups (e.g. classes, to-do list) were key ideas I decided to pursue.  My goal for the dashboard was to provide relevant and personalized information without overwhelming the user or requiring unnecessary clicks.

Site Map

In order to get an overview of the architecture, I created a site map of the current version of Canvas.  I noticed that there are several redundant links between certain pages, making navigation inconsistent and confusing.  For example, the grades tab is a major element of the interface, but it only links back to the grades from the course pages.  Furthermore, many important course pages such as detailed assignment views and feedback are buried deep.

 

Wireframes and user testing

WIREFRAMES

I took some concepts from my sketches and created a set of wireframes in Sketch based on the user flow of navigating to the assignment page from the dashboard and submitting an assignment, a common task that typically requires too many unnecessary navigational clicks.  To test my design with real users, I imported the screens into InVision to create an interactive prototype.

EVALUATION

I conducted 1-on-1 guerrilla testing with three participants (all students familiar with Canvas) in order to evaluate whether my design choices were successful at achieving my goals for the specific use cases of navigating the site and submitting an assignment.  Do users find any interface elements to be confusing or ambiguous?  Can they navigate between pages efficiently?  What challenges exist in the task flows? 

In order to answer my questions, I wrote an evaluation protocol and presented the prototype on my laptop.  Each session lasted about 10-15 minutes and revealed useful insights that I used to improve my design.

Results

The main concerns I found had to do with clarity of interface elements and access to more features / information, although ease of navigation through the site and reduced clutter in the dashboard was welcomed.

 

Findings

  • “New” indicators are confusing but made sense after explanation. One participant expected them to indicate time sensitivity.
  • Sidebar is great for navigation but feels too large for desktop
  • Customization is very appreciated since information can now be filtered out through the panels. 
  • Dropdown arrow for additional information is unclear in its function
  • Navigation seems to be missing a lot of pages that the current Canvas provides

Changes

  • Resized interface elements to be more suitable for desktop view
  • Redesigned the navigation bar to be simpler but with access to more (less-used) features
  • Adjusted the “new” markers to be less ambiguous
  • Added more iconography to help reduce unnecessary text
  • Made it more clear when information can be expanded

Production

After making several changes and tweaks to my design to address the pain-points I discovered, the next step was to incorporate visual design and produce high-fidelity screens based on my updated wireframes.

 

STYLE Analysis

To inform my visual design, I created a style matrix after analyzing several examples of popular dashboards for web content by text-graphics balance and customization options.  I decided to target more customization of information with less focus on graphics since the majority of the LMS content will be user-generated text.

The existing color scheme borrows some of UW's colors, with dark purple, white, and light grey.  Blue is used for both links and notification marks.  The cold / neutral color scheme makes it easy to lose track of important information.  I wanted to preserve the familiar feel of the school and platform but introduce brighter and more saturated colors that would highlight important elements or hierarchy.  For example, urgent tasks that demand the user's attention would stand out via a bright warm color.

Visual Comps

Customizable Dashboard

The dashboard is the main page that shows up when a student logs on.  Customizable panels allow students to see the information that is most important to them and hide irrelevant information.  This provides a more effective overview of their courses.  An add button allows users to add new panels to the dashboard such as additional courses.  Panels can be reorganized by dragging the colored title bars.

The sidebar allows for much faster navigation to important pages.  This streamlined navigation bar is a permanent element that also provides a better sense of hierarchy, something the current version of Canvas sorely lacks.

Dashboard 2.png

Navigation Drawer

The navigation drawer expands sections such as courses for faster access to deeper pages.  Users are able to hover over favorited courses in the sidebar to view sub-pages such as assignments and discussions.  Less frequently visited pages can be accessed via expansion ("show more").

 

Assignment 1.png

Assignments Page

The assignments page under each course shows upcoming and past assignments like the current version of canvas, but also provides visual cues to show which assignments are new / updated (circle indicator), or are time-sensitive (bar indicator). The added color cues and notification marks direct attention much more effectively than in the wireframes. 

Detailed Assignment View

In the assignments page, a detailed overlay pops up and allows the user to read assignment instructions and upload an assignment for submission.  The instructions are scrollable and the overlay adjusts to the height and width of the browser window.  This streamlined submission process allows for removal of submitted assignments, a feature missing from the current version of Canvas. 

Motion Mockup

I created a quick animated mockup of the interface to visualize how certain motion cues could guide interaction.  To do this, I exported my Sketch project files to Illustrator and then animated the assets in After Effects.


Results

Overall, I believe my exploration of Canvas was successful at accomplishing my goals.  Although the visual design could use more polish, I was able to streamline page navigation and add better customization options to the dashboard in order to improve the usability of the web experience.  This design should also be much easier to translate across devices such as tablets than the current interface, though additional exploration is needed.

Potential ways to take this project further would be to evaluate my final design with users in order to verify that the changes I made based on my prototype evaluations were effective.  I am also interested in exploring how additional communication channels could see stronger implementation in the platform, since the current experience is quite isolated.