loading

Show info
Amy Roberts

Canvas LMS

Details

Canvas LMS

Outcome

Interactive prototype, high fidelity visual comps

Period

2016 (8 weeks)

Context

Designing Interactive Systems, University of Washington

Skills

UX Design, UI Design

Challenge

Canvas is a learning management system (LMS) created by the educational technology company Instructure. While it serves a large number of students and teachers at the University of Washington, it has a large amount of information, and its current architecture can be difficult to navigate. It also has a number of under-utilized features, such as messaging and chat. In addition to this, the course pages can be difficult to customize, and there is no option for individual customization of the dashboard.

Solution

After examining and testing the Canvas system with students, I learned that many students use the Canvas iOS app to check new notifications for assignments or announcements, but they were frustrated by how buried some things were in the app. This led me to focus on redesigning the iOS app, creating an overview for each course that is easy to navigate and highlights new content. The interface also takes advantage of swipe interactions, which make it easier for the user to quickly view different sections.

I focused on both graduate and undergraduate student users for my redesign. The large number of student iOS app users and the ease of recruiting them for testing allowed me to explore issues with the Canvas app in-depth and effectively evaluate my redesign.

Role

l worked independently on this project, conducting all user research, generating wireframes, building and testing interactive prototypes, and creating high fidelity comps.

Constraints

Constraints include the limited timeline (we have eight weeks to evaluate and redesign components), availability of users (these include students and teachers, who might have differing schedules), and our limitation to just the UW version of Canvas. There is also the balance of retaining existing functionality to lessen the learning curve vs. adding new features, which would require new training for users.

System Needs

User

Users include students and teachers, who use Canvas to communicate with each other. Teachers need to share announcements, assignments, and grades, and students need to be able to view announcements, submit their assignments, and view their grades. Both groups also use Canvas to manage their academic schedules. Needs for all users include a simple enough learning curve and the ability for customization.

Business stakeholder

A stakeholder for Instructure would be interested in gaining more users and making money from the use of Canvas. Some business constraints may exist, such as the need to keep the system compatible with a variety of educational contexts.

Designer

The designers needs are to create something visually appealing and user-friendly that will best satisfy the needs of all stakeholders. The UI should be indicative of the functionality and visually consistent in style.

Print

System Map

I created a map of the Canvas LMS system to better understand how the system is organized and how students and teachers interact with different elements.

system-map2

Initial Research

Session with a Subject Matter Expert

To learn more about how students use Canvas, I attended a session with Tyler Fox, a subject matter expert on the University of Washington LMS who has access to a large amount of data on student Canvas use. He noted that many do not use Canvas for messaging, as there are other messaging services that are searchable, provide more consistency, and have mobile notifications.

While the benefits of Canvas include NetID integration, FERPA compliancy (giving students the right to privacy), Google Drive and DropBox integration, and discussion board integration, it has many drawbacks. It doesn’t factor in faculty user experience, it is difficult to have a universal design solution that fits many different class types, there little consistency in the way different instructors use Canvas, and there is little control over what Canvas looks like.

Analyzing Canvas LMS Survey Data

In addition to this, I analyzed Canvas LMS survey data. Some of the most useful data came from insights from students, who were asked what they would add if they designed their school’s LMS. Students mentioned wanting a better ways to communicate and collaborate, more customization across the system, better organization, a centralized place for everything, and improved mobile support as some of their main needs in an LMS.

wordcloud_edit

Word cloud visualization of the most common terms mentioned in survey data

Semi-Structured Interview

I conducted semi-structured interviews over the course of a week to gather more information on the ways students use Canvas. I chose this method because it was a good way to get a good variety of qualitative information within a short span of time. Semi-structured interviews allowed me to better gauge how users feel about Canvas and ask them additional questions when I wanted more detail on an answer.

My participants were three full time students at the University of Washington. I focused my questions on the way students manage their schedules and the ways they communicate with instructors and their peers. I asked them to describe what they liked and didn’t like about the Canvas system, and what they thought could be improved.

My findings from the interview lead me to believe that many students do not take full advantage of the features Canvas has to offer. Students use methods in addition to Canvas to manage their schedules, and they also rely on other methods such as email and chat to communicate with their peers and instructors. All students I interviewed expressed that Canvas had a lot of information and was not very well organized, yet they desired to have all of their information in one place. This leads me to believe that a better user experience would encourage more students to use the features of Canvas.

Target Participants

Students who attend University of Washington full time who have used Canvas for at least 6 months.

Research Questions

How can Canvas be improved to better suit the needs of students?

How do students use Canvas?

What do students use Canvas for?

How do students manage their schedules?

How do students communicate with their instructors and their peers?

What do students like about Canvas?

Are students running into any problems with Canvas?

Takeaways

Managing Schedules

Students used calendar app on mac, memory, and to-do lists to manage their schedules. Students who relied on calendar software said their efforts were very effective. One student connected their Canvas calendar to their gmail Calendar. One student reported making to-do lists using Evernote, while another student simply used sticky notes. One student mentioned importing readings to Mendeley to sync notes across devices. To manage big projects, all students reported breaking them down into some form of deadline or milestone.

Communication with Instructors and Peers

Students reported that they primarily rely on email to communicate with their instructors, and they have used Canvas email to varying degrees of success. One student was asked not to use Canvas to email their professor. All three used Slack to communicate with other students. None of them have used the chat feature in Canvas.

Use of Canvas

The students I interviewed used Canvas anywhere from 4 days to every day a week. The times of day they used Canvas varied and was dependent on assignments. All students noted that they did not use some features of Canvas regularly, like the calendar or chat. All participants used the Canvas mobile app, but noted that it was limited in its features. No students used the Canvas tablet app.

Use of Other Systems

One student used a system called tsquare in their undergraduate classes. Two of the students mentioned that they had nothing like Canvas in their undergraduate classes, one wishing that they had.

Two students had taken a class at UW where the instructor used a method other than Canvas to communicate with students. One instructor used email only, which the student found confusing. Another used an external website, which worked well enough, but the student wished for the ability to add its assignments to the Canvas calendar.

Usability Testing

I conducted usability tests to observe how people use Canvas, what they like and don’t like, and what their thinking process is throughout their navigation of the site.

In my previous interviews, the students I talked to did not use a number of features offered in Canvas. With this knowledge, I composed my questions around a variety of tasks to observe how users navigate through the site and uncover which problems to focus on. Then I mapped the questions to tasks I outlined in a user task matrix.

I conducted tests with an undergraduate student and a graduate student. Neither student owned a tablet, so I focused on desktop and mobile. I went through a list of the same tasks (with a few exceptions) first on desktop, then on mobile, asking the user to speak their thoughts out loud.

After each task, I also asked the user about their experience with the task and the frequency that they complete it. I ended by asking the students a few short questions about their experience with and opinions on Canvas to supplement the tasks and my previous user tests.

task-mapping

User task matrix

Results

Overall, the graduate student used the To Do list and Calendar more than the undergraduate, but still used them less on the mobile app. Both graduate and undergraduate students preferred the desktop version of Canvas for the calendar, citing the mobile version as difficult to use. However, they both mentioned relying on notifications sent by the mobile app to find out when new announcements and assignments are due. Both students used email over the Canvas messaging system and were not aware of a chat feature in Canvas at all, finding it useless since they relied on other platforms like Facebook and Slack.

usability-testing-results

Areas of Focus

Desktop

desktop-focus

Mobile

mobile-focus

Style Matrix

I organized different dashboards on a style matrix, positioning them on a spectrum based on level of complexity and amount of white space. Because I wanted to reduce clutter and the cognitive load on the user, I chose to focus on a simplified UI with a limited color palette and more white space.

style-matrix-target

Ideation

I sketched out UI ideas for both desktop and mobile, focusing on concepts for an overview or dashboard.

canvas-overview-ideation

User Task Flow

Checking assignment details on the Canvas mobile app

I learned from my research that students use the Canvas app to check on details of their assignments, so I explored this experience in a user flow. Although the easiest way to view a new assignment is to swipe right on the lock screen notification, there are several other ways an assignment can be viewed. Clarifying when there is new content in-app and simplifying the process of viewing an assignment could help reduce confusion for students.

user-task-flow

Wireframes

I created wireframes of my course overview concept, mapping out structure, layout, and visual hierarchy. I created these screens to be high enough fidelity to test with users in an interactive prototype.

canvas-wireframes1canvas-wireframes2

UI Flow

I created a basic UI flow to demonstrate the functionality of the overview, linking specific touch interactions to the screens they open. This is separated into three levels vertically to better illustrate each level of the information architecture.

canvas-ui-flow

Testing the Interactive Prototype

Area of Focus

The user research I conducted showed that students tend to use the Canvas app to check new notifications for assignments or announcements, but they were frustrated by how buried some things were in the app. This led me to focus on creating an overview for each course that is easy to navigate and highlights new content. I wanted to find a balance between maintaining consistency with the desktop functionality and providing easier access to some of the more commonly used features of Canvas.

Goal

My goal for this exploration was to determine whether my course overview design was an effective way for students to view and access course content in everyday Canvas use.

Usability Testing

I chose to conduct simple usability tests to determine whether my design was intuitive for everyday use. I included common tasks and some not-so-common ones, framing them in scenarios to create context. Throughout the testing, I asked the users to speak aloud what they were thinking so I could understand their thought process. I watched each user’s screen and took notes on successes, frustrations, and comments made by the user. Afterwards, I asked the user some questions about what they think of the new design.

Users

I recruited four users, all students at the University of Washington, to test my prototype. I used convenience sampling for recruiting, contacting two students I know in other departments and two of my sister’s friends. All were current users of the Canvas mobile app and had used the app for at least six months.

Setting

I met each user on campus at a location convenient to them and let them test my prototype on their personal phone. InVision lets you share and test their prototypes through a simulated app download, so I texted this link to each user, and they downloaded the app onto their phone as if it was a native iOS app.

Results

I created annotated screenshots to convey the results of my usability tests.

results1

Shortcuts to new content

On the second task, three out of four users closed the overview just to click on a shortcut again. After that, they figured out that they could use the menu in the overview to change screens.

Takeaway: Make the shortcuts and menu more apparent to new users.

results4

Cluttered main menu

Two out of four users remarked that the main menu at the bottom felt cluttered. One user thought that there was too much navigation on the course overview pages and suggested combining main menu items to reduce the crowding.

Takeaway: Replacing the wireframe circles with actual icons might help, or some of the menu items could be combined.

results2

Difficulty finding full course menu

All four users I tested with had difficulty finding the full course menu while looking for the instructor’s office hours. Three out of four said that the symbol of three dots was not prominent enough.

Takeaway: Find a way to emphasize the course overview menu for new users.

results5Differentiating content

Two users brought up the fact that they would have had an easier time identifying interactive menu items if the prototype had color. One user thought the circular numbered icons representing message replies were icons representing new content instead, as they looked similar.

Takeaway: Add basic colors to and tweak shapes to differentiate and clarify items for users.

results3

Cluttered course menu, swiping not apparent

Once users did find the menu, three out of four remarked that it had too many links. One person mentioned that even though this provides all the features of the desktop version, the old Canvas app did not have as many features, and they preferred it that way.

Only one of the users discovered that they could actually swipe to change screens in the course overview.

Takeaway: Minimize number of links, keeping only the most useful ones. Make it more apparent to the user that they can swipe from screen to screen.

UI and Visual Design

Below is a summary of my UI design and visual design process.

design-process

Process

I began my UI exploration by first examining and testing the current Canvas iOS app with students to discover its shortcomings and any user frustrations. A heuristic evaluation helped to confirm these issues and show areas where the app could be improved. One main shortcoming of the Canvas app was its complex navigation, so I looked at other apps that were doing navigation very well to inform my designs.

Based on my findings, I created rough sketches to illustrate multiple ideas, refining the best ones into higher fidelity digital wireframes. I evaluated these in a test with users, using their feedback to inform my final designs.

I focused on both graduate and undergraduate student users for my redesign. The large number of student iOS app users and the ease of recruiting them for testing allowed me to explore issues with the Canvas app in-depth and effectively evaluate my redesign.

Interactive Prototype: https://invis.io/377DJE3AF

canvas-app-icon

Focus on iOS App

Swipe Interactions

One of the main elements of my redesign is swipe interactions, which make it easier for the user to quickly view different sections. This is an affordance used by many other popular mobile apps, but the current Canvas iOS app had not taken advantage of this.

Navigation and Overview

I learned from my user research that students did not take full advantage of the features in the Canvas mobile app and disliked the number of taps it took to view content, so this led me to focus on creating a better navigation system and overview featuring frequently viewed sections. My heuristic evaluation of the app confirmed this, revealing multiple issues with “user control and freedom.”

Current Content

My interviews with students also revealed that many use the Canvas app primarily to check new updates and notifications, so I chose to highlight new content in my UI designs through conventions similar to ones used by other platforms like Facebook and Instagram.

canvas-colors

Style and Mood

My heuristic evaluation of the current Canvas app revealed issues with “consistency and standards” as well as “recognition rather than recall,” so I sought to improve consistency through a limited color palette and better organization of content.

In my designs, I chose a more playful style to make the experience of checking academic assignments more enjoyable. Using a lighter shade of purple like the one that the SpaceScout app uses helps to achieve this. This shade also complements other colors well without appearing very dark next to them. White space gives the UI a lighter feel and allows the content to be easily legible.

I relied on Apple’s Human Interface Guidelines for iOS to inform my redesign, taking into account conventions in mobile navigation, the size of target areas for touch, and the overall information hierarchy of the content.

High Fidelity Visual Comps

canvas-annotated1canvas-annotated2canvas-annotated3canvas-annotated4