Lyle Klyne – Canvas Redesign

Canvas Redesign

A web re-design of the popular Learning Management System.

Canvas Redesign hero image

Problem

Canvas lacks continuity, clarity and flexibility. How can the experience be improved for students and teachers?

Background

Canvas is a learning management system (LMS) that supports student and teacher education needs. For students, it provides a means to access course information and interact with their teacher and classmates. It meets organizational needs by supporting single sign in (you are able to log in with your school id) and being FERPA compliant (it meets privacy standards set by the U.S. Board of education). Although the platform is owned by Instructure, it allows implementation of open-source modules, meaning that institutions can build custom tools and plugins and share them with a broader community.

System Map

Canvas System Map



* * *


Research & Evaluation

Methods

  • Subject Matter Expert Interviews
  • User Interviews
  • Survey Data
  • Heuristic Evaluation

Tyler Fox: Subjet Matter Expert

Tyler Fox is the interactive media design studio director at University of Washington. He was also a key player in the Canvas implementation at UW. We sat down with Tyler to better understand Canvas.

Student & Teacher Interviews

I also spoke to two graduate students who use Canvas for their academics and a senior professor who has been using Canvas since it was initially implemented. For one of the students and the professor I conducted a semi-structured interview to understand how they use Canvas and any pain points they encounter. With another student, I used a modified card sort to understand their opinions on value and frustration regarding various Canvas features.

Canvas Card Sort

Heuristic Analysis

To understand hangups in the existing interaction design, I evaluated Canvas based on Jakob Nielsen’s 10 Usability Heuristics. Unsurprisingly, there were glaring issues for all of them.

Key Research Findings

  • Messaging and collaboration are terrible
    • Most users use email, slack, and Google Drive / Docs to interact with each other. Canvas largely serves an access point to information rather than a hub of interaction.
  • Canvas is difficult to learn and navigate
    • New instructors frequently attend workshops to learn how to use it, as opposed to learning through intuition and exploration. All content is accessed through an unwieldy drop down menu.

To illustrate how strongly leveraged this drop down menu is, I created a diagram of the current information architecture through a site map.

Canvas Site Map

* * *

Ideation

I wanted to make Canvas easier to navigate, more discoverable and more interactive.

Goals

  • Remove dropdown menu
  • Create a visual dashboard
  • Consolidate and improve built-in communication tools

User Flow

To understand different communication channels a Canvas user must navigate while submitting an assignment, I created this user flow to better understand the process.

Canvas User Flow

Sketches

Canvas Sketches



* * *


Wireframing & Testing

After clarifying the features I wanted to add and their underlying goals, I mocked-up some wireframes and put them into a clickable Invision prototype. I guerrilla tested the prototype with friends, classmates, and strangers.

Feedback

Canvas Wireframe Screen 1 Canvas Wireframe Screen 2 Canvas Wireframe Screen 3 Canvas Wireframe Screen 4

* * *

Final Mockup

I built upon the card-based system outlined in the wireframes to develop an interaction model that would be customizable and modular. My target for the visual design aesthetic was in between a text heavy website like Medium and a more colorful yet still text forward website such as Google Inbox. Medium is highly focused on the content: written copy. I think this works well for Medium’s users, many of whom are tech-savvy readers and writers. I wanted to take a similar, content-forward approach with Canvas, yet incorporate more color to make it feel more playful and approachable. My hunch was that this would create a more pleasant experience for all age ranges of users.

The front dashboard organizes courses by cards, enabling the user to quickly survey grades, upcomoing assignments, and notifications. Canvas Mockup Screen 1

Single pages allow for smaller modular cards to be displayed along the right side of the page, affording tools to get more information or interact with the content. Canvas Comp Screen 2

On single pages, these modules allow the user to interact with other students and teachers through in-line discussion. Here students and teachers interact publicly to clarify an assignment. Canvas Comp Screen 4

Outcome

With this project, I was torn between adhering directly to the Canvas style guide and the visual aesthetic provided by Instructure, and improving the visual style with a redesign. My final veered away from the Canvas style guide, yet still used the typeface and general layout already in place. Although I’m pleased with how the visual design turned out, I think designing within the Canvas aesthetic would have provided a unique yet valuable set of constraints. Apart from the aesthetic approach, I feel the functionality I added is highly generalizable. The modular card sidebar could be implemented across many Canvas sections, and the inline discussions could be used on any page with confusing content.

Next Steps

  • Do a second round of testing with the high- delity comps.
  • Explore using colors from the Canvas style guide to further adhere to existing style guidelines.
  • Ideate on bene cial modules that could be included on single pages such as assignments.
  • Reach out to Instructure regarding the redesign for feedback.

More Projects


Work

Fun

Quest (coming soon)

hide treasures in the real world

Trumpmoji (coming soon)

Neural networks combining emojis and terrible politicians

Blog