Sebastian M
Product Designer
Made with

About the Project

Goal: Redesign the Canvas App so it's suited for students who are always on-the-go
Type: Product Design, Concept 
Duration: October 2018 - July 2019 (8 Months)
Skills: Interaction Design, Visual Design, UX Research
Responsibility: I designed this mobile app to practice my UX skills. 

Step 1: Challenge

Canvas LMS

Background

In the University of British Columbia, Canvas is the leading platform for students to manage their course content. 

Canvas works both through a webapp portal and a mobile app, giving students access to all of their course information including assignments, deadlines, lecture slides, etc. 

The idea for this project came to me as I realized a lack of consistency between the use of the desktop vs. the mobile version of Canvas. 

Surveys

To learn more about how students use the Canvas app, I launched a survey looking to try to answer the following three questions: 

  • What is the percentage usage between mobile and desktop? 
  • What features does Canvas have that are the most important to students? 
  • Why do students use Canvas, and what does it offer that makes it unique? 

Here are some of the results: 

73
Students surveyed
33%
Have never used
the Canvas Mobile App
79%
Rely on Canvas
multiple times a day
Canvas LMS

Mobile vs. Desktop

As you can see, nearly every student uses Canvas for desktop, but at least 1/3 of them have never touched the mobile app. 

However, a small number of students who did stick around were able to find the app useful. Why is this the case? 

Canvas LMS

User Persona

Based on my research, I was able to narrow down one key user personas to base this product around. Having Bill as my persona makes it easy to refer back to in every design decision. 

Canvas LMS

Ranking Features

The survey also included a section where students could rate the following features currently offered in the Canvas app on a scale from 1-7 while also leaving a space for them to type their own thoughts about why they like/dislike about the app.

From these insights, I was able to narrow down the top 3 features that bring the most value to the user, and may explain to how they give value to the app: 

  1. Lecture Slides
  2. Professor’s Information
  3. Assignment Deadlines

Canvas LMS

User Feedback

In my survey I also included a box where students could fill in their feedback on the Canvas mobile app. I was able to sort out the comments into the following categories. 

These insights helped make decisions on what areas to focus on. 

Pain Points

This redesign aims to solve the following key user pain points that are unique to the mobile experience:

Key course information is hard to find: because of how the app is organized, course details such as classroom locations, assignment details, etc, are not easily accessible. My research shows that for a mobile app to be successful with students, they should be able to access their course information in a simple and quick manner.

Keeping track of multiple assignment due dates is tedious: The current structure of the app makes it confusing to view individual due dates for projects as this function is separated into two different tabs.

App interface is outdated: Feedback from users kept pointing out that the current app interface for Canvas Mobile not only felt outdated, but that it wasn’t designed visually to best assist users. 

Canvas LMS

Insights 

This space allowed me to discover many underlying issues with the app, and allowed me to set goals for each of these based on the feedback from students. 

What is interesting to note is how students often times rely more on the web-app version of Canvas than the actual app because of its complicated design and constant malfunctioning. 

The core objective behind this redesign was to use their feedback and make sure those pain points do not occur again. 

2. Approach

Canvas LMS

Information Architecture

The first major change I made to the information architecture was reduce the number of bottom tabs from five to three. 

The objective behind this was that users tended to confuse tabs like inbox and notifications with each other, especially as professors would simply email students instead of pinging them via Canvas. 

In addition to this, I structured the app so that it would focus around the "Courses" portion, while notifications and to-do acted as supplements to the core content. 

Canvas LMS
Canvas LMS

Sketches

Some of my first initial sketches were focused on brainstorming lots of ideas for both the flows and the components of this app. 

I used the crazy eights method to try and get as many sketches as possible to broaden my perspective in what this app could look like. 


Canvas LMS

Wireframes

As the designs began shaping up a bit more, I decided to take them into Sketch. 

The stylistic choices are focused on reducing the amount of initial options so that it focuses primarily on the course content. However, this structure ended up changing quite a bit as it was translated into a higher fidelity. 

Canvas LMS

Wireframes V2

The second version of the wireframes helped organize the content as well as offer a better hierarchy of information. 

The main focus on this was to outline in detail how the class pages will look like as this is the secret sauce behind this design. 

3. Results

What are the new features?

Canvas LMS

1. Easy Course Access

Accessing your classes directly from the homepage was something already available in the original version. However, this design aims to reduce the cognitive load from the user and be primarily oriented towards getting them to click as soon as they can.

Maintaining the original Canvas color-scheme helps to differentiate between classes and to keep a modern and clean aesthetic. In this version, I decided to use a typical first-year student’s schedule in order to illustrate the functionality of the app. 

Canvas LMS

2. Functional To-do List

One of the core issues that the previous version’s to-do list had was that it was automatically generated by the courses. Having such a complex system would not only be hard to manage from the professors side, but also from the student, especially if they’re unable to check-off or add any more items to the list.

Because of this, I decided to make the to-do list feature simple and accessible. Even though students are very likely to already be using another app for managing their tasks, having this directly on Canvas may prove to be useful for improving their work-life balance. 

Canvas LMS

3. Detailed Course Pages

What if you had all the information you needed to find your class within a simple glance? 

By simplifying the course pages to the simplest features, users are able to access these pages at a more casual basis. As reported by the survey, the most popular uses for the canvas app were for accessing the course syllabus, checking office hours, and reviewing class lecture notes.  

Link to FramerX prototype:

https://warmhearted-circle-7.framer.live/preview/

What metrics should we test? 

1. Average uses per day: Are students actively engaging with this app and finding it valuable to their day-to-day schedule?

2. Student GPA: Is this app actually helping students get into good study habits? 

3. Course Engagement: are students on average more engaged in courses?
(Attendance, iClicker responses, etc)

What have you learned from this project?

Designing these changes to an app I use almost daily seemed at first very weird, but as soon as I began to delve into them, there was no going back.

Going from Sketch to FramerX was a very smooth transition, and I hope to continue using it in future projects. Although more research can be implemented through direct qualitative user testing, the data obtained is proportionate to the resources utilized in this study.

I’ve learned that although people can have their own assumptions in how a design should look and feel, doing the research is extremely important for being able to viably justify each design decision and into knowing that they really are the best changes you can make to a product. I hope to continue doing these projects and to continue practicing using design research methods and user experience.