top of page

Tarp: Canvas Panel Redesign


Ziyang Fang,

Cameron White,

Guh Feng,


Aug - Dec 2021


UX Designer

Front-End Developer


Survey Design & Analysis 

User Research

Interactive Prototyping

​Usability Testing

​Agile Development

Problem Statement

The current version of Canvas presents difficulties for students in

managing multiple types of information, such as announcements, emails, and discussions, which are spread across different panels and used inconsistently by different professors.


Tarp's mission is to improve the user experience for students on Canvas by providing a more efficient and effective way to manage various types of information simultaneously.

Design Process


1. Emphatize

To evaluate the satisfaction and frequency of use of the Canvas messaging system among student users, our team administered over 100 questionnaires, which consisted of both multiple-choice and free-response questions. In addition, we conducted in-depth interviews with 5 selected participants.

2. Define & Design

In all, user needs...

A unified dashboard that can accommodate various communication methods utilized in distinct courses, thereby consolidating different types of messages.

A filter designed to sort through a high volume of automated Zoom meeting emails and eliminate unnecessary ones.

Quotes from interviewees:​

"Canvas’ Zoom integration makes the Canvas mail feature almost unusable due to a large number of automatically sent."

Initial Design

The updated design encompasses all communication channels available in Canvas, namely email, discussion boards, and announcements. Apart from the typical email features, the design also integrates a ribbon with filtering buttons.

We added a search bar to address a crucial deficiency in Canvas's inbox. Moreover, the design includes a navigation panel on the side that enables users to sort messages by class and sender.

3. Build

We built the web application with React as the front-end framework and Flask (Python) as the back-end. The front-end utilizes various libraries such as React, Bootstrap, Redux, Formik 2, Yup, and Axios. Meanwhile, the backend employs Flask, SQLAlchemy, and Cerberus as the core libraries.

In Tarp, messages are presented as cards on a message stream, which are arranged in a grid format.

Course Filter

On the right-hand side of the message stream, the course filter displays the courses that the user is enrolled in. Clicking on a course button will filter out all messages not associated with that course, displaying only those relevant to it.

Search Bar

The search bar located beneath the ribbon enables users to conduct real-time text searches.

Message Ribbon

The ribbon design draws inspiration from Microsoft PowerPoint and Outlook. It serves a dual purpose in allowing users to filter the messages they want to see and perform operations on the currently displayed messages.

Additional essential features of the web application include the ability to filter and manipulate messages, manage course enrollment, and perform operations on courses.

4. Test

In order to assess how our updated design impacted users, we conducted usability testing and solicited feedback from nine participants who had prior experience with Canvas.

Primary Hypothesis: Satisfaction

The satisfaction questionnaire results were somewhat ambiguous. Participants reported slightly higher levels of satisfaction while using Tarp as opposed to Canvas, but they also indicated that they would not choose to use Tarp over Canvas in their daily use. This apparent inconsistency suggests that Tarp may lack some qualities that make it appealing to users, even though they recognize some value in it.

Task completion times for Tarp (hh:mm:ss)

Task completion times for Canvas (hh:mm:ss)

Secondary Hypothesis: Speed

A total of 9 participants completed 7 distinct tasks using 2 different software suites, resulting in 126 total tasks and 63 comparisons. As demonstrated above, participants consistently found messages more quickly using Tarp than with Canvas, despite having no prior experience with Tarp.

Next Steps

Further investigation is necessary to determine how to reap the advantages of a centralized message stream without compromising the user experience. Conducting informal interviews or focus groups may be useful in identifying why users may not adopt a system like Tarp as a substitute for Canvas, even if they are satisfied with its use.


The user interface (UI) design may be a significant factor to consider. In the future, Tarp's UI design can be aligned with Canvas to minimize learning costs and stabilize variables that may be introduced by the appearance. Our questionnaire was too limited in scope to provide a complete explanation for why participants felt this way.


bottom of page