Sebastian M
Product Designer
Made with

Step 1: Challenge

Canvas LMS


In the University of British Columbia, Canvas is the leading platform for managing course content. 

Although nearly every student at UBC uses the desktop version of Canvas, the same can’t be said about the mobile app: over 1/3 of the student population are not active users even though they are aware of the app's existence. 

My goal for this project was to design the mobile version of Canvas so that it caters to the user cases that go along with the mobile phone experience. 


To learn more about the Canvas use cases, 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? 
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

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. 

Canvas LMS


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


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


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

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:

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.