Hyun S Kim
canvas banner.jpg

Canvas Orig

Independent Project
Project Nature
Research / Ideation / Prototyping / Testing / Visual Design
Date: May. 2016
Timeline: 4 weeks


Canvas is a learning management system that is designed to be customizable, extensible, and flexible to a variety of pedagogical perspectives. In this system redesign I attempted to correct some of the pervasive issues with the current design of Canvas. I decided to focus on the instructors side of Canvas since initial research uncovered these users as being in most need of a better design.



I conducted four interviews, including a Canvas subject matter expert, two teaching assistants, and a lecturer. From the interviews I discovered 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. 


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 modal. 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.

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

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. 



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.