Hyun S Kim
canvas-mockup brighter.jpg

Canvas

Canvas 


Independent Project
Project Nature
Research, Ideation, Prototyping, Testing, & Visual Design
Timeline
May 2016
4 weeks

Redesigning the educator’s experience in Canvas, a learning management system

Canvas is a learning management system that is designed to be customizable, extensible, and flexible to a variety of pedagogical perspectives. Perhaps as a result, Canvas is flush with features and has poor discoverability and understandability. The student experience is curated and filtered through courses that educators create for them, however educators are exposed to the entirety of Canvas and its cluttered design. In this system redesign I attempted to correct some of these pervasive issues with the educator’s interface of Canvas.

 

Research


Interviews

"The instructor’s component of the Canvas app is not well optimized, and many instructors are not very tech savvy." Tyler Fox Canvas subject matter expert Studio Director & Lecturer at the University of Washington

"The instructor’s component of the Canvas app is not well optimized, and many instructors are not very tech savvy."

Tyler Fox

Canvas subject matter expert

Studio Director & Lecturer at the University of Washington

"Where the hell are the links to regrade an assignment?" Spencer James User Research Teaching Assistant at the University of Washington

"Where the hell are the links to regrade an assignment?"

Spencer James

User Research Teaching Assistant at the University of Washington

"I have no idea what the student experience is like on Canvas, [ I only know what I see as an educator on Canvas ]." Scott Zheng Physics TA at the University of Washington

"I have no idea what the student experience is like on Canvas, [ I only know what I see as an educator on Canvas ]."

Scott Zheng

Physics TA at the University of Washington

"I want a big spreadsheet to see the entire overview [ of assignments on Canvas ]." Andrew Davidson Senior Lecturer at the University of Washington

"I want a big spreadsheet to see the entire overview [ of assignments on Canvas ]."

Andrew Davidson

Senior Lecturer at the University of Washington

I conducted four interviews, including a Canvas subject matter expert, two teaching assistants, and a lecturer. My research questions were:

  1. How do educators use Canvas currently?

  2. What works well and what, if anything, can be improved in the Canvas experience for educators?

  3. What devices do educators prefer to use Canvas on? 

From the interview data I discovered that educators’ interactions with Canvas vary significantly. For some departments Canvas is only used to host course syllabuses and dole out assignments in paper. Other departments use Canvas extensively: publishing assignments, grades, and communicating with students through the Canvas site. When asked about which devices the interviewees used to access Canvas, the response was unanimous in favoring and currently using desktop computers or laptops. Creating and grading assignments were one of the most common features used on Canvas for the participants interviewed, and these features were mentioned to be especially problematic. 
Additionally, I found repeated themes of Canvas' lack of system state visibility, information discoverability, and feature understandability.

 

Research & Design Methods

An extensive list of research methods were employed to better understand issues and to guide redesign direction. 

 

Andy Davidson participating in an open card sort.

A main component of the redesign was improving the information architecture. An open card sort was conducted with senior lecturer Andy Davidson to get insights into feature affinities and priority.

From an interview and card sort with Andy, I discovered that he perceives assignments, discussions, and quizzes as a single entity in his mental model. The commonality for each is that they are all potentially graded activities to engage students in learning. These activities, in his experience are often finalized and created in Canvas as the course is being taught.

Original Site Map

The original site architecture for the courses section is extremely broad and shallow. In fact, this site map does not represent the complete list of sections under a course. The main problem with this structure is that it maps poorly to instructors modes and activities. Additionally, it overwhelms new users with visual clutter. 

Proposed Site Map

My proposed site map clusters features by user task mental models. There are three modes that instructors switch between when interacting with a learning management system. Creating and sharing, clarifying content and setting expectations, and collecting and evaluating. The main course sections map to these modes: creating and sharing is accomplished in the content section, clarifying content and setting expectations is accomplished in the messages section, and collecting and evaluating is accomplished in the grades section.

Assignment creation user flow

Andy cited the assignment section as being the most problematic workflow. He often finds that he begins to create an activity only to find that he has accidentally created the wrong type, for example creating an assignment instead of a discussion. My proposed user flow combines the three types of activities into a single user flow that branches based on selected type. The activity type selection is clearly called out in the eventual design, and allows for type switching without forcing the user to re-enter fields.

 

Prototyping & Evaluation


I developed simple wireframes to test my initial design direction. The usability test involved an evaluation of the "exercises" section, which was later renamed to "activities." I tested three participants and found that generally the design was usable and intuitive. However, I still had some additional development to do on the side navigation. 

Having a more wireframes to complete the user flow would have been helpful to gain more comprehensive insights. However, I dove into evaluation to make sure my efforts would be worthwhile.

Check out the interactive prototype here.

 

Visual Design


Mood board

I wanted the redesign to reflect a clean and serene place to work and think.

 

Content Section / Activities List

 

Content Section / View Activity

 

Content Section / New Activity

 

Grades Section / Attendance

 

The final phase of the project was visual design based on modified wireframes that corrected issues learned from testing. I also introduced a new section for attendance. The attendance interface incorporates portraits of the students to aid in the process of marking attendance. This feature seems obvious, however the current implementation of Canvas does not include portraits even though they exist in the system. 

Several of the interviewees mentioned opening multiple instances of Canvas to support their activities. For example, when taking attendance, one teaching assistant mentioned opening the student roster to aid in identification. An instructor mentioned opening existing assignments when creating a new one. I have sketched a few ideas on how to incorporate multiple screens into a single layout, and am continuing to ideate on the most effective way to do so. 

 

Outcome


My redesign could have been focused on the student side of the Canvas LMS. However, after hearing from a subject matter expert on Canvas and speaking to students, I concluded that instructors were in greater need. Canvas is a monolithic application, and students only get exposed to the features that are chosen by instructors. Instructors on the other hand get the entirety of features all at once.

I also felt that since I am a daily user of Canvas as a student, it was an interesting opportunity to learn what an instructor’s experience is like on Canvas. Despite the fact that we had access to the instructor’s portal through test accounts it was a bit difficult to gain context without data or students. Through user interviews and playing with the application I gained a fairly good insight into the experience.

My designs generally tested well and were found to be intuitive in use. By thinking through user goals and reorganizing the site map I have a fairly concrete idea on how to reorganize and optimize other sections. Although the information on the site is discrete and needs discrete sections, such as assignments, communications, grades, and people, the user tasks often require a combination of information to provide enough context to perform tasks. A good example of this is communications. Students often need clarification on assignments and course content. As it stands Canvas has a separate messaging section that does not provide affordances to contextualize conversations.

Additionally, instructors need a high level overview of the actions they need to take without having to dive into subsections. Understanding that a high level overview is needed and wanted, I have planned for building a global messaging page that surfaces messages in a single central with necessary context. These messages should be linked out to the subsections for more context. A dashboard or landing page would also be useful for the redesign. I will be building out these sections in the coming weeks, and validating them with instructors and staff.

I have also planned out transition animations to guide the user through the site navigation. My philosophy towards transition animations is that they should provide consistent and informative queues into the behavior and navigation of the application.