Adopted by thousands of colleges and universities around the world, Canvas is a learning management system designed to allow students easy access to each of their course's assignments, grades, and contact with professors through announcements and instant messaging, among several other features. As a current university student myself, I use Canvas daily not just on my desktop, but on my smartphone as well through its mobile app. Whenever I'm on the app, usually it's between classes while on campus, in an area where I can't easily take out my laptop, and/or if I'm running short on time before my next obligation.
Even though Canvas mobile is very similar to the desktop version in terms of functionality and the way it's presented, I almost never use some of the features that I normally would on my laptop. Due to this, I want to be able to easily navigate through to get exactly what I need quickly, whether that be checking grades, viewing class announcements, or whatever is pertinent in the moment. While anyone can get used to something in due time, no matter how well or poorly its designed, parts of the interface of the Canvas app I felt could be altered to be more optimized for those "on the go" or "in a hurry" type of situations where I value efficiency over anything else.
Design Question: How might we improve the experience of student users of Canvas navigating and accessing important class information in a convenient, timely, and organized manner?
Process
I approached the task of redesigning parts of the main interface utilizing this UX design process:
Empathize - Define - Ideate - Prototype - Test - Iterate
Empathize with your users, break down each of their troubles into a few key points, use these insights to come up with solutions, sketch and mock up prototypes of the design, test the design, and continue interating. For the purposes of this assignment, I only completed this process up until the prototyping stage. I was not asked to test and iterate my design solution.
Empathize
Analyzing the App's Design
I began by breaking down the app's current user flow as it pertains to navigating between courses as well as their individual pages. It begins at the Dashboard and goes to the course homepage, "Announcements" page, and then finally "Announcement Details."
Understanding User Needs
I created a google form and posted it on my Facebook in order to survey users of the app, which happened to be friends who were all college students as well. I received 14 responses in total ranging from 18 - 23 years of age and freshmen - 5th year students. 71.4% of respondents say they are daily users of the app, with 28.6% reporting that they open it several times each day. As demonstrated by the bar graph, the top four reasons participants mainly use Canvas mobile is to check grades, due dates, assignment details, and view announcements, with 85.7% - 100% of participants selecting all four.
Now knowing what users' priorities are when on Canvas mobile, I asked them a few slightly more specific questions pertaining to their general experiences in dealing with navigation, accessibility, and convenience. In response to these, one participant said in talking about features feeling time consuming that “going from module to module to assignment seems a little unnecessary to me sometimes,” and another saying the same for “going back to your ‘dashboard’ after on a class.” Some of the participants’ thoughts on making the app overall more convenient for them included “getting rid of excess junk that I never use for classes and consolidating it to only the stuff I need” and making some of the features more “readily available” to them.
Defining the Problem
Upon reading over and studying all of my responses, I distilled users' issues with the app into three main points.
Pain Point #1
Users want to spend less time figuring out navigation of the app and more actually accessing pertinent information to a class in a timely and convenient manner.
Pain Point #2
Users have different experiences even going from class module to class module because features are so customizable to professors/instructors that there is not much uniformity across sections, making figuring out where to locate important files a task in and of itself.
Pain Point #3
Users want more of a degree of personal customization with their course pages in order to consolidate it to only what they wish to access quickly and view.
Ideate: The Redesign
Synthesize
At this point, I know now and have narrowed down what exactly I can do to solve this design question:
Have important class information readily available and immediately in view
Create and require uniformity of tabs/links across class modules
Help make users' experiences more customizable to their needs
Information Architecture
Before even sketching out design ideas, I mapped out the information architecture the app currently has and then modified it to fit a navigation and interface that I felt would be best for users' needs.
Wireframe
Once my architecture was in place and some rough pencil sketches of a new interface were finished, I was able to create a few wireframes.
Visual Design
Mock Up
Pain Point #1: Users want to spend less time figuring out navigation of the app and more actually accessing pertinent information to a class in a timely and convenient manner.
Solution: In an effort to reduce the amount of time users spend going back and forth between a course page and the Dashboard, I added a "quick select" at the top of the course pages. By tapping "Courses" at the top right corner, a dropdown menu appears allowing users to scroll horizontally through their other classes to reduce unnecessary navigation. For instance, instead of tapping the "Back" button multilpe times just to get back to the Dashboard everytime users want to access another class, they can simply drop the quick select menu down wherever they are within a course page. With this feature, it is now much easier to check through each of your courses at a fast rate.
Pain Point #2: Users have different experiences even going from class module to class module because features are so customizable to professors/instructors that there is not much uniformity across sections, making figuring out where to locate important files a task in and of itself.
Solution: In order to solve this issue, I wanted to make certain links required to be at the top of every course homepage so that students know exactly where to easily find the most important class information. Based on the results of the user survey, I chose "Announcements," "Assignments" and "Grades" as the top three links since those were the most popular reasons students were opening the app. From my experience, I found that these three links are also ones that professors will almost always have included on their course pages, albeit in different places. Since every professor has their own method of teaching and organization, however, I kept the links customizable after the first three since there are a variety of options Canvas allows to be added to each page.
Pain Point #3: Users want more of a degree of personal customization with their course pages in order to consolidate it to only what they wish to access quickly and view.
Solution: I approached this point by adding shortcuts to each course tab, allowing users to efficiently open the app to the Dashboard and have the ability to instantly go to the "Discussion" page, "Grades" page, or whatever page they feel is most pertinent to them. The shortcut icons are customizable and can be found by tapping the elipses at the top right of each course module, which still navigates to the "Customize Course" pop-up that used to only have the options to change a course's nickname and module color. This is an idea that's already present in the desktop version which allows for up to four shortcut icons, but I chose three to make tapping on each one easier. The shortcuts on the desktop version are also only customizable to the professor, so in some cases they might not even make them available to students. Now, they are fully customizable to students to choose which parts of a class they want instant access to.
Thanks for Reading
I hope you enjoyed looking through some of my possible redesign ideas for the Canvas Mobile App. I really liked understanding what users actually think of this app that is so integral to accessing their education, especially now, and modifying it in such a way as to make their stressful lives as college and university students just a little bit easier to manage. This project was created to complete an App Flow Redesign assignment in the SMAD 308: Interactive Design II course at James Madison University.