Redesigning the web interface of UW's learning management system from a user-centered approach
Sketch, Invision, after effects
Canvas is a learning management system (LMS) created by Instructure. It is the University of Washington's primary LMS since replacing Catalyst Web Tools in 2013. Since then, Canvas has continued to be evaluated and improved, making it a valuable tool for both instructors and students. However, my investigation into the space has revealed several user needs that should be addressed through a redesign.
The end result is an improved experience inspired by Google's Material Design that focuses on providing users with more customization options, streamlined page navigation, and easier access to various features.
Over the course of the project, I designed a new Canvas interface by conducting research, ideating potential solutions, prototyping and evaluating an interactive wireframe, and producing a refined digital mockup. Finally, I animated the interface in After Effects to explore how motion cues could guide interactive flow.
Having extensive personal experience suing both Canvas and it's predecessor (Catalyst), I had an understanding of the LMS and first-hand experience of many pain-points as I started my investigation. My research activities with other users validated some of these issues and I focused my redesign on two primary issues with the current Canvas system that kept resurfacing during my investigation into the problem space: dashboard customization and page navigation.
How can Canvas utilize better customization options and streamlined page navigation in order to prevent stakeholders from being overwhelmed with irrelevant information while still having easy access to different features?
I started out my exploration by creating a system map of the Canvas platform, including the different groups of stakeholders involved in the system and how they might access Canvas. This also helped me visualize some of the higher-level relationships between the core components of Canvas.
LMS Survey Data
Having access to survey data gathered from students and instructors regarding existing LMS usage, I sought to examine their goals, frustrations, and needs in detail to gain a better understanding of the problem space.
From the quantitative data, I immediately noticed an overwhelming 96% of surveyed students own a laptop, but only 51% indicated that they were satisfied with the LMS overall. This led me to focus my investigation primarily on the laptop web experience.
While most of the data was quantitative survey data, there was also a large amount of open-ended responses regarding desired features in an LMS redesign. This qualitative data was valuable for uncovering specific user needs and goals, and I noticed several trends in the responses.
Key patterns in desired features:
- better customization and ways to organize information based on relevance and importance
- simpler and centralized interface that is easier to use with less page navigation
- personalized calendar with more focus on assignment due dates and time management
- more transparent and contextual grading system
- better mobile experience and push notifications
- better student-instructor communication channels
My interviews focused on understanding a few research questions:
- What are students' most important needs in an LMS?
- How do students typically interact with Canvas?
- What are major paint-points with Canvas and how do students deal with them?
- Canvas lacks customization, especially in the dashboard. Users value customization to organize information.
- Previous system was poorly designed and did not scale well.
- The system has a steep learning curve worsened by lack of technical knowledge in instructors and feature overload.
- Many features are hidden or difficult to access - users are unaware of or had never used may features (e.g. chat, collaboration, hiding classes).
- Dashboard customization and simpler page navigation is very important to users, as "it takes too many clicks to see what [they] want."
Tablet experience needs improvement and is "super sluggish."
In order to get an idea of user expectation and values, I recruited an undergraduate student to participate in a closed cart sorting activity using Keynote and a laptop. I generated 23 cards that included various features and components of the Canvas system and asked the participant to sort them into five categories from a Likert scale of importance and then into a scale of usefulness.
The activity allowed me to not only understand perceived importance and usefulness of the features relative to other features, but also uncover any disparities between usefulness and importance. For example, dashboard and grades were considered 'very important' but only 'slightly useful', which suggests a design opportunity.
My user research insights helped me generate rough thumbnails for various ideas, features, and UI improvements. I then chose the ideas most relevant to my problem statement and incorporated them into more complete UI sketches.
I explored different dashboard layouts through several UI sketches for a more complete visualization of potential directions. Some details were inspired by aspects of Google's material design, since I wanted to provide users with a strong sense of hierarchy and modular dashboard components. In particular, a permanent navigation bar and customizable cards for specific groups (e.g. classes, to-do list) were key ideas I decided to pursue. My goal for the dashboard was to provide relevant and personalized information without overwhelming the user or requiring unnecessary clicks.
In order to get an overview of the architecture, I created a site map of the current version of Canvas. I noticed that there are several redundant links between certain pages, making navigation inconsistent and confusing. For example, the grades tab is a major element of the interface, but it only links back to the grades from the course pages. Furthermore, many important course pages such as detailed assignment views and feedback are buried deep.
Wireframes and user testing
I took some concepts from my sketches and created a set of wireframes in Sketch based on the user flow of navigating to the assignment page from the dashboard and submitting an assignment, a common task that typically requires too many unnecessary navigational clicks. To test my design with real users, I imported the screens into InVision to create an interactive prototype.
I conducted 1-on-1 guerrilla testing with three participants (all students familiar with Canvas) in order to evaluate whether my design choices were successful at achieving my goals for the specific use cases of navigating the site and submitting an assignment. Do users find any interface elements to be confusing or ambiguous? Can they navigate between pages efficiently? What challenges exist in the task flows?
In order to answer my questions, I wrote an evaluation protocol and presented the prototype on my laptop. Each session lasted about 10-15 minutes and revealed useful insights that I used to improve my design.
The main concerns I found had to do with clarity of interface elements and access to more features / information, although ease of navigation through the site and reduced clutter in the dashboard was welcomed.
- “New” indicators are confusing but made sense after explanation. One participant expected them to indicate time sensitivity.
- Sidebar is great for navigation but feels too large for desktop
- Customization is very appreciated since information can now be filtered out through the panels.
- Dropdown arrow for additional information is unclear in its function
- Navigation seems to be missing a lot of pages that the current Canvas provides
- Resized interface elements to be more suitable for desktop view
- Redesigned the navigation bar to be simpler but with access to more (less-used) features
- Adjusted the “new” markers to be less ambiguous
- Added more iconography to help reduce unnecessary text
- Made it more clear when information can be expanded
After making several changes and tweaks to my design to address the pain-points I discovered, the next step was to incorporate visual design and produce high-fidelity screens based on my updated wireframes.
To inform my visual design, I created a style matrix after analyzing several examples of popular dashboards for web content by text-graphics balance and customization options. I decided to target more customization of information with less focus on graphics since the majority of the LMS content will be user-generated text.
The existing color scheme borrows some of UW's colors, with dark purple, white, and light grey. Blue is used for both links and notification marks. The cold / neutral color scheme makes it easy to lose track of important information. I wanted to preserve the familiar feel of the school and platform but introduce brighter and more saturated colors that would highlight important elements or hierarchy. For example, urgent tasks that demand the user's attention would stand out via a bright warm color.
The dashboard is the main page that shows up when a student logs on. Customizable panels allow students to see the information that is most important to them and hide irrelevant information. This provides a more effective overview of their courses. An add button allows users to add new panels to the dashboard such as additional courses. Panels can be reorganized by dragging the colored title bars.
The sidebar allows for much faster navigation to important pages. This streamlined navigation bar is a permanent element that also provides a better sense of hierarchy, something the current version of Canvas sorely lacks.
The navigation drawer expands sections such as courses for faster access to deeper pages. Users are able to hover over favorited courses in the sidebar to view sub-pages such as assignments and discussions. Less frequently visited pages can be accessed via expansion ("show more").
The assignments page under each course shows upcoming and past assignments like the current version of canvas, but also provides visual cues to show which assignments are new / updated (circle indicator), or are time-sensitive (bar indicator). The added color cues and notification marks direct attention much more effectively than in the wireframes.
Detailed Assignment View
In the assignments page, a detailed overlay pops up and allows the user to read assignment instructions and upload an assignment for submission. The instructions are scrollable and the overlay adjusts to the height and width of the browser window. This streamlined submission process allows for removal of submitted assignments, a feature missing from the current version of Canvas.
I created a quick animated mockup of the interface to visualize how certain motion cues could guide interaction. To do this, I exported my Sketch project files to Illustrator and then animated the assets in After Effects.
Overall, I believe my exploration of Canvas was successful at accomplishing my goals. Although the visual design could use more polish, I was able to streamline page navigation and add better customization options to the dashboard in order to improve the usability of the web experience. This design should also be much easier to translate across devices such as tablets than the current interface, though additional exploration is needed.
Potential ways to take this project further would be to evaluate my final design with users in order to verify that the changes I made based on my prototype evaluations were effective. I am also interested in exploring how additional communication channels could see stronger implementation in the platform, since the current experience is quite isolated.