Canvas

Helping students get to where they want to go, faster.

Canvas is a popular learning management system used by educational institutions all over the world. But the tablet interface leaves a lot to be desired. I improved the navigation and added some nifty new features along the way

In this 4 week project, I use a condensed version of a user-centered design process to first understand Canvas' users and their experiences with the product before proposing a redesign for the tablet experience. Deliverables included process artifacts, a process book, and a presentation.

Type

Individual project for Designing Interactive Systems

Role/Project Aspects

Ideation, visual design research, wireframes, visual design, animation

Timeline

Feb - Mar 2015 (4 weeks)

Process Overview

I began the project by understanding how student currently use canvas and what their biggest frustrations are. Based on my findings, I decided to tackle 2 problems.

  1. Simplified navigation
  2. Built-in meeting room reservations

I then carried out viual design research, before sketching out some ideas, wireframing to get quick feedback, and finally creating high-fidelity visuals. I also created animations to better describe some of the interactions.

Navigation was designed to be simple, intuitive, and effortless. Primary navigation lives in the sidebar of the app. Choosing a course reveals a panel that lists sub-pages within the course. Finally, selecting a page reveals a final panel that houses all the entries within that page. This then becomes the new sidebar for the user until the user naviagates backwards.

Navigating backward is as simple as dragging out the previous panels. Thus, with a flick of a finger, the user can drill down and up to navigate through their course content.

I created a style matrix to form a framework for creative decisions on the project. I aim for an aesthetic that is playful and fun. Since all of canvas' content is user (instructor or student) generated, the 'playfulness' on the design should manifest from type, colors and icons rather than imagery.

I set out to understand what makes an interface feel fun to use. I examined a few existing app I thought embodied the emotion I wanted to design for and did a color analysis.

A simple user flow for the task: "Submitting an assignment"

Sketches help get ideas out of my head and onto paper.

Here, I'm experimenting with a multi-level drawer navigation system to enable easy access to courses and their sub-pages.

Before creating high-fidelity mockups, I created simple wireframes to see how the content could best be laid out on the page.

By creating a clickable prototype in inVision and guerilla testing it with strangers and friends, I was quickly able to identify important usability and functional issues for the next iteration.