top of page
Canvas3.jpg
Canvas1.jpg

Canvas LMS: Application Redeisgn

Mobile Application Redesign / Individual project / 2 months

About Canvas LMS

 

Canvas LMS is a popular application widely used among college students and instructors in US. It is a cloud-hosted learning management system from Instructure (Higher Ed). Canvas recently surpassed the 200-customer threshold and is in use by Auburn University, Brown University, New Mexico State University, and the Utah Education Network (including University of Utah and Utah State University). It is currently being used by the University of Maryland and the University of Washington. 

 

In addition to the web version, Canvas also has its mobile application and  tablet version for student and instructors. 

 

Problem Statement 

 

The common tasks users have while using tablet Canvas:

 

  • Check the upcoming assignments and deadlines.

  • Manage assignments’ order based on their due date/ points/course.

  • Get notifications anytime, anywhere.

  • Communicate with classmates/instructors anytime.

Pros and cons of using tablet version compared with desktop version:

  • Less clicking. Users don’t need to login each time.

  • More user-friendly interface.

  • No instant notification of new message.

  • Weekly deadlines cannot be seen.

  • Cannot communicate efficiently with others on Canvas.

Solution 

 

By redesigning the functions and interfaces, I have made this system more personalized. There's an instant notification function on the top of the interface. Users are able to check out the upcoming assignments' deadlines and graphically view grade ranges. The interface is entirely redesigned. 

What's new in this redesign?

 

  • More aesthetic interface design.

  • Clearer features and easier startup.

  • Personalized design and notifications.

  • Visualize grade changes in real time.

  • Instant notifications and new messages. 

Research Methods  

Interview/ Observation/ Literature Review

 Design Methods  

Brainstorming/ Storyboards/ Sketching User Experience

Wireframes

 

High Fidelity Interfaces on Tablets

 

User Tests and Evaluations

 

Three usability tests conducted with different users, all of whom have used Canvas before. Two of them use Canvas almost everyday, but one of the users uses Canvas not very frequently--just several times per week. The users will be asked to finish 6 tasks on the tablet verion of Canvas:

  • Go to discussion board; 

  • Hide recent activities;

  • Go to the first discussion;

  • Go to "people";

  • See someone’s profile;

  • Go to announcement board. 

USER 1

Frequency of use: several times per day 

USER 2

Frequency of use: 2-3 times a week

USER 3

Frequency of use: several times a month

"I can’t tell why there’s only three people’s image on each disscusion in discussion page."

 

"There’s some information overlapping on the image of people and replies shown on the bottom."

 

"I really confused by the recent activity. It seems never changed while I clicked on different functions. There shoule be some changes happened with clicking on different functions. "

"It looks good for me! I like the color you choosed. But if the banner could be thinner it will be better!"

 

"In the people page, I’m thinking if there are more than 10 students in a course, once you clicked on one student’s image, it will hide other students after it, right?"

 

"I’m not sure the importance of recent activity. Is that in the same importance with the nevagation on the left? If not, it shouldn’t be still on the right side. You can use a buttion to indicate there’s a hidden function, instead of showing all the time."

"I like the visual design patterns, and the flow looks very clear. But there’s one thing I think you can refine, it is the function of hide recent activities. There’s no obviouse buttons telling me this window could be hide."

 

"The way to refine it, I think you can add some arrows, or make the window floating on right side of screen. It could be contract up or down, or right and left. But it needs a button to show the function."

Refinements Based on Evaluation

 

 

 

 

Canvas Redesign

Affinity

bottom of page