Research, Ideation, Prototyping, User Testing, UI Design
Adobe Illustrator, Sketchbook
"Re-Designing the Canvas Experience."
Canvas is a learning management system used by the University of Washington. It facilitates connections between faculty and students, allowing them to share resources, communicate, and turn in assignments. It's a flexible platform available on different devices that simulates a classroom environment.
Currently, Canvas is falling short of meeting some of the needs of students and faculty. There are usability issues affecting the information architecture, visual design, and overall structure of the website. By utilizing the data from the session with Tyler Fox, doing primary and secondary research, and analyzing the existing usability problems in the Canvas system, I identified design solutions to improve the user experience.
Limited time frame. (6 weeks)
Limited access to experts
Technical constraints of Canvas
I created a System Map outlining relationships, differet types of users, and different components of the current Canvas system. This helped me understand where information was, how people currently access it, and the current shortcomings in Canvas.
Canvas LMS Survey Data
We were given access to a large data set from a survey sent to University of Washington students, concerning their thoughts and opinons about Canvas. Students were asked questions like "What device do you use Canvas most on?", "How satisfied are you with Canvas?", and "How frequently do you use Canvas?"
Using this data, I created a chloropleth map of questions students asked. The darker the circle, the more frequent the concern. This helped surface some of the more common pain points students faced using Canvas.
Subject Matter Expert Session with Tyler Fox
In our Design of Interactive Systems class in MHCID, we all had the opportunity to sit down with Tyler Fox, who is a key player in the implementation of Canvas at the University of Washington. His expertise gave us insights a typical user wouldn't have, which allowed me to better understand Canvas and how to approach the problem. Below are a few notes from his session with our class.
Research Methods Overview
I conducted three semi structured interviews with instructors and students regarding the current format of Canvas, features they liked, and asked them to perform an activity where they ranked different pages they used from most frequent to least frequent. I sectioned the interview into 3 parts: warm-up questions, body questions, and a short activity. The LMS survey data, my survey results, and the SME session with Tyler Fox all hinted at problems with Canvas’ information architecture, so I created a interview guide that was structured to provide more insight around how current users felt about the organization within the current system. Because of the short timeframe, I made a quick survey to send out to current users to understand their perspective of what the most and least useful parts of Canvas are.
Main Research Findings
Because of the disorganization of information in the current Canvas system, users find it hard to navigate. There is no "main path" or trends of navigation that surfaced when examining survey data or interview data.
Many users have the Canvas app installed on their phone, but they only use it to check notifications or grades. The interface is too difficult to use, and very buggy. It serves only as a dashboard, users prefer to use their laptops.
Information that some users find valuable, is buried in the information architecture of the website. Overall the interface requires too many actions to achieve simple tasks.
At the beginning of the ideation phase, I made thumbnail sketches, a persona, and a site map. I made thumbnails to quickly get concepts down of ideas I had to improve Canvas. I made a persona based on general student demographic and qualitative data I uncovered during the research phase. Having this persona helped ground my design in my research, and adhere to user data instead of biases I had about the system.
Making a site map visualized the information architecture problems evident in the website. Some information was buried, and some information was given too much prominence for its value.
I conducted a heuristic analysis on the Grades, Discussions, and Home page. I used Norman Nielsen's 10 Usability Heuristics for Interface Design. These 3 components of Canvas were the ones I focused on for my [re]design.
My Canvas [re]design was created for tablets. As such, I consolidated some features, and added a few. I tested the wireframes on my own tablet, using the "Guerilla Testing" method. Guerilla Testing is going out and testing your prototype as quickly as possible, while getting targeted feedback. I tested the prototype with friends and strangers at the University of Washington.
Some of the participants at first had a hard time understanding that this wasn’t a actual interface of Canvas, and sometimes focused more on the visual design more than the layout of information and content in the interface. Because many people are not familiar with the concept of wireframes, its easy for them to assume that wireframes are the final product. I made "hotspots" on my wireframes, which were highlighted in blue, indicating the user could tap them. Getting this data allowed me make final changes to my design.
Home page doesnt have calendar access.
Home page chat isnt relevant for me.
(new) Home page has a better use of space.
Participants liked dashboard feel of home page
Participants weren't sure where to go to find more information and statistics about grades.
Because chat is on the home page, its more relevant.
More detail and information needed once clicking content in the main 3 modules on home page.
Re-Designed Canvas Homepage
The new homepage is a dashboard that provides a student all the information they need quickly and efficiently.
Outcome + Next Steps
One goal with this redesign was to create an experience that would be conducive to using Canvas quickly and accessing information as fast as possible. Data from interviews, surveys, and guerilla testing suggested that people wanted to access information faster, from their starting point (homepage). I also wanted to create an experience that would work well not only on a tablet, but desktop as well. Visually, I wanted to use the current color palette of Canvas, but utilize colors to highlight information, draw the eye, and create “hotspots” that contain key information (ex, notifications module on the homepage). My main goal was to make the experience simpler, but provide more information to students.