Tarp: Canvas Panel Redesign
Team
Ziyang Fang,
Cameron White,
Guh Feng,
Timeline
Aug - Dec 2021
Role
UX Designer
Front-End Developer
Skills
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.
Goals
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.
Video
