Instructure Canvas Redesign

An exercise in solo design on a strict time limit.

Team/Roles: Solo project

Date: May - June, 2015

Skills used: Visual design, interaction design, UI design, design research, secondary research, wireframing, guerrilla user testing, layout, project management

For full detail on this project, the final deliverable, a process book, is avilable to look through. Ask me about seeing the physical copy in person!

Project Summary

     Instructure's Canvas learning management system was something of a bugaboo for myself and my classmates in grad school. Every assignment was assigned, tracked, and handed in through this software, so we were using it at least once daily, if not more. Its design flaws, then, became highly apparent. After multiple terms of whining about having to use it, my Designing Interactive Systems class was given an opportunity to redesign the platform for tablets using what we'd learned about the user-centered design process. The catch? We had six weeks to not only go through the entire design process from initial research to prototyping and user testing, but also deliver a laid out and visually designed process book section each week detailing our progress. In addition, we had to draft a new feature for Canvas, and make at least one mockup of our design for another platform. Groups were disallowed; the purpose of the exercise was doing everything ourselves. I was naturally a bit daunted, but as someone who likes putting his finger into as many pies as possible in the design process, I was excited as well.

Initial Research

     With only one week to perform research before ideation began, some rather savage corner-cutting had to occur here. As the vast majority of people I had easy access to for interviewing had almost the exact same use context as I did, I decided to avoid using time on that until post-prototype user testing, instead performing some literature review on tablet usage and how it differs from usage of other devices. As well, I made use of a method from the IDEO method cards called "scenarios," which a way of constructing what are essentially pre-research personas used to focus further design. The results of these can be found in the process book linked above.

Design Research

     After initial research, I spent a full week on design research, as the visual look and feel was a fairly significant part of the redesign; the information architecture and other, more theoretical UX-related parts of the project were not significantly different from the product being redesigned, new feature notwithstanding. As represented in the process book above and the gallery below, I created a concept model of the core assignments feature, a mood board and UI matrix for my redesign, and a color analysis of similar LMS like Moodle, Blackboard, and Litmos.

Ideation

     Ideation and information architecture were combined into one week, which meant working quickly. I employed one abstract ideation method, using VisuWords Visual Thesaurus to create a map of all words related to the word "learn" to focus my thinking, and one concrete method, quickly sketching out a number of very low-fidelity UI ideas. Following that, I mapped out the basic information architecture of the app and a detailed user flow for the task of turning in an assignment in OmniGraffle in preparation for wireframing.

Prototyping

     I had two weeks for prototyping: one for wireframes, and another for high-fidelity, finished-looking prototypes based on those wireframes. In an ideal world, I would have been able to gather more feedback between those stages, but this project was an exercise in efficiently cutting corners and making tough decisions with deadlines, so it was not to be. As the project didn't allow time for learning new tools, I turned to my favorite wireframing tool, Balsamiq Mockups, to create my initial mockups. Thankfully, I didn't have to mock up every screen of the new interface. Instead, I created mockups of two screens essential to demonstrating the function of the new design, as well as one of the new feature, a collaborative real-time chat in the style of Slack to replace Canvas's forum-style communication, and an initial mockup of the design as it would exist on an Apple Watch. From there, after collecting some quick informal feedback from classmates and potential users, I used Sketch to create final UI mockups using Apple's iPad UI standards. All of these can be viewed in the final process book, or the gallery below.

User Testing

     Though there was, unfortunately, no time to implement it, the last week of the project was dedicated to user testing. Any readers familiar with user testing will understand how comically short a time frame this was for collecting feedback, so I used guerrilla techniques, performing informal interviews about the prototypes with a convenience sampling of potential users. Obviously, this was not ideal, but I did receive quite a bit of useful feedback, which would then be implemented in any further iteration of the prototypes. All in all, this project, while hectic, taught me just how valuable time is to the user-centered design process, and certainly ensured that I would appreciate group projects and more humane timeframes in the future.