Canvas Redesign

A redesigned Canvas system to help students collaborate on their group assignment in an efficient way.

Collaborate on the assignment with other students often requires the use of multiple tools across several platforms. I designed a new interface and function for the Canvas, a Learning Management System, to facilitate the collaboration process by introducing a new in-Canvas editor, chat room, and file sharing system.

Project type

Individual project

Project Aspects

Interviewing, IA analyzing, prototyping, User Testing

 

 

Canvas is a learning management system (LMS) creates by Instructure. It is one of the most popular LMSs that is used by over 2,000 higher educational institutes. Canvas allows instructors to set up course pages, set up and manage student groups, create assignments, host discussion threads, upload course materials, and send in-Canvas mails.

The goal of the redesign is to provide a solution that to improve student’s experience while using Canvas to manage their coursework. The project involves refining the dashboard to improve information clarity as well as to add a newly designed assignment collaboration function. The whole process was a 10-week long that involved user research, user-centered design, user-interface design, and design evaluation.

The overall redesign process

 

Research

As an LMS, Canvas provides lots of features that allows the student to keep track of the course related materials and information. The functions could be categories into four categories:

  1. Notification: Students can receive information about the assignment due date, events, and instructor's announcements. The built-in calendar helps students to keep track of all the events.
  2. Assignment and Grade: Students can submit assignments, review grades, and keep track of their course performance.
  3. Course page: Students can access to course materials and to download files that are shared by the instructor.
  4. Communication: Students can send and receive in-Canvas messages to fellow students and instructors as well as to join the discussion threads.

However, it is unsure whether students use the functions, so the next step was to learn from the user about how the Canvas is actually used.

 

The information architecture diagram of the Canvas system

To gain a better understanding of how Canvas was used in school, I:

  1. Conducted a subject matter expert (SME) interview with Dr. Tyler Fox, who is and studio director that is responsible for managing the Canvas system at University of Washington. 
  2. Looked into the LMS survey conducted by the UW to find what students care and what are their needs.
  3. Interviewed with two UW students to understand how they use Canvas and what were their expectation. 

From the interviews and survey, there are several issues that had been addressed. 

  1. There is still a large portion of instructors who do not want to use the Canvas because they need to learn how to use a new tool. Because of this, students also need to learn how to use a different platform to view announcements, access course materials, or submit the assignment for different courses.
  2. There is no guideline of how the course page should be built, so the information architecture varies across courses. Students are confused where to find the files, lecture slides, and other course materials since they are often being placed on a different page.
  3. Students found the front page is confusing, the information on the front page were poorly organized that 's hard to locate the information they need. The calendar is also difficult to use since you have to jump to another page, and no reminder or highlight function is provided.
  4. Although the Canvas already provides the inMail function that allows users to send messages inside the system. Most of the students are still used to use their medium to communicate (Facebook messages, Skype, Whats App, or Line) and exchange files (Dropbox, Google Drive, or just using Facebook Messages).
  5. There are more and more needs of collaborating on the assignment; students often use Google Docs or Google Slides to collaborate, but they also use other applications (for messaging and file sharing) while working on the assignment that is somehow difficult to manage.

Based on the research, there are three possible design directions.

  1. Lower the learning curve of Canvas to motivate instructors using the platform. It will benefit students since they can access all course information through one platform.
  2. Improve the usability of the Canvas on mobile by refining the interface.
  3. Refine the dashboard and the calendar so that the student can keep track of all the event and notification easily. 
  4. Design a collaboration system that allows students to manage and work on the group assignment. 

Direction one should be helpful to both students and instructors. However, it requires another round of investigation to determine the pain points before start doing the experience design, and it was out of the scope the project. So the redesign will be focused on direction two to four.

Persona

From these findings, I created three personas to use as the reference. The persona covered three major student groups at the UW, undergrads, full-time master students, and part-time professional students. The persona showed three major needs from students:

  1. A place to organize all relevant files so the student can focus on the project instead of wasting time on managing files.
  2. An intuitive way to exchange files and information with other people and to track where the files and messages are sent.
  3. A mobile version of Canvas that provides a similar experience as the desktop version so the student can get their work done with mobile devices.
Name:   Adam Parker Age:      21 Gender: Male Grade:   Junior business school student Works:   Full-time student, spends some time on extracurricular activities  Jose is an international student at the UW pursuing his Master's degree in transportation. Since he works as the research assistant in his lab, he spends most of the time working on his own. However, since his work evolves lots of graph and data, he needs to share the file with both his colleagues and professor. Google Drives is the tool he used to use, but since different people use different tools, how to send and share files had become a serious issue. To make sure that his colleagues and the professor got all the files, he always needs to send it through multiple channels, and he is often lost in all the links, messages, and emails that he sends out. He is wondering whether there is a tool that allows him to organize all the relevant files in one place so he can focus on the project instead of wasting time on managing files.

Name:   Adam Parker
Age:      21
Gender: Male
Grade:   Junior business school student
Works:   Full-time student, spends some time on extracurricular activities 

Jose is an international student at the UW pursuing his Master's degree in transportation. Since he works as the research assistant in his lab, he spends most of the time working on his own. However, since his work evolves lots of graph and data, he needs to share the file with both his colleagues and professor. Google Drives is the tool he used to use, but since different people use different tools, how to send and share files had become a serious issue. To make sure that his colleagues and the professor got all the files, he always needs to send it through multiple channels, and he is often lost in all the links, messages, and emails that he sends out. He is wondering whether there is a tool that allows him to organize all the relevant files in one place so he can focus on the project instead of wasting time on managing files.

Name:   José Mourinho Age:      29 Gender: Male Grade:   Master’s student in Transportation Works:   Full-time student, spends a lot of time in the research lab Jose is an international student at the UW pursuing his Master's degree in transportation. Since he works as the research assistant in his lab, he spends most of the time working on his own. However, since his work evolves lots of graph and data, he needs to share the file with both his colleagues and professor. Google Drives is the tool he used to use, but since every student is using different tools, how to send and share files had become a serious issue. To make sure that his colleagues and the professor got all the files, he always needs to send it through multiple channels, and he is often lost in all the links, messages, and emails that he sends out. He is wondering whether there is an intuitive way to exchange the files and information with other people and to track where the files and messages are sent.

Name:   José Mourinho
Age:      29
Gender: Male
Grade:   Master’s student in Transportation
Works:   Full-time student, spends a lot of time in the research lab

Jose is an international student at the UW pursuing his Master's degree in transportation. Since he works as the research assistant in his lab, he spends most of the time working on his own. However, since his work evolves lots of graph and data, he needs to share the file with both his colleagues and professor. Google Drives is the tool he used to use, but since every student is using different tools, how to send and share files had become a serious issue. To make sure that his colleagues and the professor got all the files, he always needs to send it through multiple channels, and he is often lost in all the links, messages, and emails that he sends out. He is wondering whether there is an intuitive way to exchange the files and information with other people and to track where the files and messages are sent.

Name:   Susan Neuman Age:      29 Gender: Female Grade:   Master student in HCDE Status:   Part-time student, has a full-time job As a part-time HCDE student, Susan not only needs to do school work but also needs to work in the daytime.  She and her classmates set up multiple channels on Slack to share the latest class and schoolwork information. Since she will not be at school all the time, she often asks her classmate to assign work to her so she can work on it in her leisure time. Although she found that the Slack is really convenient for sharing information and discussion, it is difficult for her to use it during work that she is always overwhelmed by the message after she opens it after work. And the shared link and files are often buried beneath the threads. She is wondering if there is a more efficient way to manage all the assignments and school-related information. Since she spends lots of time to commute, it will be even better if she can get the work done using mobile devices.

Name:   Susan Neuman
Age:      29
Gender: Female
Grade:   Master student in HCDE
Status:   Part-time student, has a full-time job

As a part-time HCDE student, Susan not only needs to do school work but also needs to work in the daytime.  She and her classmates set up multiple channels on Slack to share the latest class and schoolwork information. Since she will not be at school all the time, she often asks her classmate to assign work to her so she can work on it in her leisure time. Although she found that the Slack is really convenient for sharing information and discussion, it is difficult for her to use it during work that she is always overwhelmed by the message after she opens it after work. And the shared link and files are often buried beneath the threads. She is wondering if there is a more efficient way to manage all the assignments and school-related information. Since she spends lots of time to commute, it will be even better if she can get the work done using mobile devices.

 

Followed the persona, a Mood board was also put together as a reference for the design. The Mood board was considered an intuitive way to show the mood that I am trying to bring with the design, which is productive, organizes, reliable, ease, and relieve. 

A Mood board was created to demonstrate the emotion that the newly designed Canvas will bring to the user.

A Mood board was created to demonstrate the emotion that the newly designed Canvas will bring to the user.

Design

The initial design were targeting both desktop and smartphone. However, during the interview students shown less interest in using mobile to work on the assignment, and the data from the survey clearly shows that the most of the students use the mobile app just for checking grades or view announcements. I further showed the initial draft of the mobile interface to some of the students, and the feedback I got was that the design itself seemed good, but they prefer to use the desktop if possible. Based on the feedback, I decided to drop the mobile interface design at this point and to focus on the desktop version that most of the people is going to spend their time on it.

The user flow was created along with the draft of the user interface. Although the mobile version was discarded, the overall user flow remains the same, and the wireframe and prototype I created later were all based on the flow chart. Furthermore, I created a Critical Path diagram to illustrate how the application should work, the experience it should bring to the user, and how it can change the user's behavior.

The first draft of the user flows of the newly designed Canvas system.

The Critical Path shows how the newly designed Canvas could make a difference to the user's experience of handling group assignments.

The Critical Path shows how the newly designed Canvas could make a difference to the user's experience of handling group assignments.

Homepage

The information displayed on the homepage is reconsidered, based on the interview result, I kept only announcement and assignment information and color-coded the courses so that the user can tell the assignment or announcement belongs to which course. The calendar is also being integrated into the page, so the user no longer needs to jump to another page.
The inbox function is removed and integrated with the chat function since user said that they never use the chat function. And I added some notification symbol to remind people about the new messages and events.

 

New Collaboration Function

The new collaboration was designed based on the observation that users often needs to open multiple applications when they are doing group assignment. Consider the feasibility, the function currently allows the user to choose from four different document types, which the files will be linked and stored in user’s Google service. Four functions are designed to assist the collaboration. Users can chat with others, share files, send the notification to teammates after updating the document, and submit the assignment by clicking on the "Submit" button.

 

The Wireframe

Based on the sketches, I used Sketch to made a wireframe. However, because color codes play an important role in my design, I added too many details into it that it appeared more like a high-fidelity prototype. This suppose to be the initial draft of the design had caused some issue during the user testing that some participant focused too much on the visual elements, and some users asked a lot of questions about how the system was implemented.

Evaluation

To evaluate my prototype, I went to San Jose State University to conduct a few Guerrilla tests. Since San Jose State University also uses the Canvas, it could be a good opportunity to learn from students from another school. I randomly selected one male and two female students at the school and asked them to go through the prototype and give me some feedback. The test protocol was designed to be a 10-minute long test with several tasks, and the whole process was designed to answer two design questions:

  1. Does the newly designed homepage display the information in a clear way?
  2. Does the newly designed collaboration function meet students need of collaborating on assignments?

Additionally, I invited an HCI major student to evaluate the design. I shared my design intention and concept and asked him to perform an informal heuristic evaluation. Some of the challenges that users had faced during the evaluation were:

  1. The user could not understand why there is a plus sign next to the "Assignment" section.
  2. The user asked about how the color codes of the courses were determined.
  3. The user did not want to create a new document but to update existing files to editor. 
  4. The "code" logo is a bit confusing since it usually means "git."
  5. How can I name the file I created?
  6. The editor only supported one file at a time, so the user said that they still need to open multiple windows since they often need to work on multiple documents simultaneously. 
  7. The user was trying to submit multiple files at the same time since that is what she usually did, but she was not able to find any options on the page. 

Apart from the usability issued, I had also received some recommendation about the design.

  1. The assignment section on the homepage should be moved to the top. Most users considered it as the most important section and would like to see it at first glance.
  2. The card-style layout on the homepage occupied too much space, the dashboard should be able to show more information at the same time.
  3. The official UW logo should be used.

 

The First High-Fidelity Prototype

Based on the feedback, I turned the wireframe into a high fidelity prototype by adding more design elements, changing some of the layouts, and making the color and layout more consistent across pages. Some of the key changes include:

  1. The official UW logo was used.
  2. The user is now able to select between create a new file with a name or to upload an existing file to the editor. An "Add File" button was added to the editor.
  3. The editor now support multiple files to be opened at the same time. The user can jump between files by clicking on the file tab. 
  4. Since the assignment might require the user to submit multiple files or to turn in files that Google Drive does not support, the interface now supports file-upload together with some other submission types.

The Second High-Fidelity Prototype

The first design received positive feedback. Based on another round of design review, a few issues were identified:

  1. It did not follow the design guide provided by the University of Washington.
  2. Some of the color used looked odd.
  3. How can the user jump between classes?
  4. Some of the functions that were listed in the flow chart, such as plagiarism check, was not included in the design.
  5. Some of the pages were missing, such as browsing the assignments.

To resolve all the issues mentioned above, I went back and redone the design. The first step was to create a new, detailed user flow. The new user flow was to reflect the changes and to break down the user experience into individual steps.

Next, I created a style guide that meets the design guideline provided by the University of Washington. The new design has following changes: 

  1. The color and font used were all based on the style guide.
  2. A new page was added to show how the assignment will be listed.
  3. Since some students said that they were not used to the grid layout, and prefer the layout that is used by the Canvas now, I decided to give them the freedom to choose between two different layouts by click on the toggle button.

The Style guide was created, and it fulfilled the requirement of the University of Washington.

 

FINAL THOUGHTS

The materials used for Guerrilla Testing are high fidelity since I was targeting the color coding and representation. Although the test went pretty well, it was obvious that the user was distracted by the color and texts that some of their feedback are based on the design rather than the information architecture and element placement of the website. It might be better to break down the test into two sections so that users could test the wireframe in the first section, and focus the other design elements in the second section.

Also, due to time constraint, I had only interviewed two users and one expert before diving into the design phase, this was considered risky and I should have done more interview before making any conclusion about users' needs. Additionally, since we do not have time for another round of usability test based on the final design, the next step of the project is to go out and conduct another round of testing to evaluate and refine the design.