Redesigning Canvas

About the Project

Overview: Students all over the country face a world in which they are forced to go to school remotely. They need a learning management system that functions more as an interactive, organizational tool they currently use and less of a virtual cloud for their teachers’ class materials.

Solution: A learning management system that improves (1) navigating between different classes, (2) keeping track of upcoming due dates for their classes, and (3) having an area where classes are better integrated

Timeline: 10 weeks

Group Project

My Role: User research, user flows, UI sketches, user testing, Wireframing, User Experience Design, and Interaction Design

Henry Pham-Tran’s Role: User research, user flows, UI sketches, user testing, Wireframing, User Experience Design, and Interaction Design

Ryan Wey’s Role: User research, user flows, UI sketches, user testing, Wireframing, User Experience Design, and Interaction Design

Tools: Figma, pen, and paper

Problem Statement

Students all over the country face a world in which they are forced to go to school remotely. They need a learning management system that functions more as an interactive, organizational tool they currently use and less of a virtual cloud for their teachers’ class materials.

Background

We are focusing on designing for online education during the current COVID-19 pandemic because of how remote online education has become a defining characteristic for the unusual, tumultuous times we are living in. Online education is obviously not an optimal solution when it comes to education. Students are forced to attend class from home, a possible unstable environment that might be distracting. Because there are a plethora of nuanced issues related to online education, we are casting a wide net to simply gain some insight on the level of user engagement on the current platforms being employed and how the user experience is impacted by the available feature sets and feedback systems. Furthermore, due to the safety constraints set by the ongoing pandemic and our extremely limited access to specific types of users, we are targeting K-12 students to help optimize their learning experience.

In light of these issues, education apps, in particular, are seeing an increase in their user traffic, attracting all sorts of people from diverse backgrounds. Thus, we believe that, besides functionality changes, design can be a powerful tool to improve and encourage learning and growth in these times, enabling the utility of an app to be accessible and usable to a larger audience.

Research Methods

A big goal that we are striving for is to improve an education app used by students in K-12 schooling. We will strive to make improvements that could greatly help improve students’ learning experience while making it accessible to people of all backgrounds. In order to do so, we have to research and interview students in k-12 schooling who use the app. Getting direct feedback from the users is necessary to pinpoint what things they would like or need to have a better workflow.

Possible research methods include interviewing users, direct surveying from users, or feedback on general user trends from educators who create content for the apps. One way of interviewing people may include having the user record or share their screen as they use the app as they normally would. In doing so we can see how they use the app, how they interact with the app, and what things we can improve on. We can then directly ask the user why they did certain things or would like to see improvements based on their experience with the app. Surveying allows us to get feedback from many users without having to spend much time. We do have to make sure that our questions are as clear as possible.

Interview volunteers were asked to provide either a screen-recording with audio narration or separate text explanation, images with a text description, or text description alone of their usage of the Canvas website and/or app. Interviewees were told a screen-recording was preferred and should be no more than a few minutes in length. Regardless of the format, the purpose of the interview was to gain observation and insight on how the app was used by typical users, what thought processes were used to navigate the app, and what habits and pet peeves resulted.

Interview Questions

• “What did you find frustrating about the app [layout/response/UI]?”
• “What would you like to see changed about the app [layout/UI/etc]?”
• Have the person explain how [feature] is used.
• “How have you seen or know others use [app feature] that is different from how you use it?”
• “How does the app facilitate your learning?”
• “Are you using this app any differently compared to when you used it before COVID, if you used it?”

Research Findings

Canvas (Interviewee names abbreviated: KT, YJ, LZ)

Information overload and poor management of information from courses was a persistent issue. One user, KT, expressed frustration with the organization of the “Assignments” tab in Canvas. Intuitively, this tab should be clearly shown, organized, and informative without clutter. This would be especially important since many students, like KT, are taking several classes, with many assignments each.

A second issue was that reaching frequently used categories (eg. “Assignments”) required several clicks/taps. These links were not always in clear sight. The same user, KT, complained that they actually struggled to find the Assignments tab to show for the screen recording, despite having used the app frequently and having familiarity with their classes. They scrolled up and down the app a few times to reach certain categories.

From this, we can see that a Canvas has a persistent issue with its default layout, which shows too much information to the user right away, with minimal ways to clean up. Information is not readily available on the same screen; yet at the same time, when it is there, there is little organization. Some of this is on the instructors’ end to properly add sections. However, until then, student users lack a way to easily and intuitively adjust the layout for their own workflow.

User YJ voiced opposite complaints about the categorization of lectures — while reaching them is not an issue, YJ described the lack of an auto-grouped “All Lectures” and all-class calendar as an impediment to productivity. YJ attributed this issue to the lack of a single structure for class content, which is helpful for education but can be frustrating for students.

Lastly, YJ also described issues with the layout of embedded videos and media, which have small controls and are not as intuitive and simple to use. They often open in separate windows. They also don’t support common controls like double-tapping to skip forward/backward, or quality of life allowances like background audio playback.

User LZ expressed frustration with the way File Uploading was implemented. LZ’s gripe was that, as is, there was no way to upload multiple files. “I need to add each file and then browse for it . . . and there’s no way to drag it in”. LZ was also unsure if the functionality existed at all, implying the UI is not clear about what actions are possible. It is known that Canvas lacks a ‘tutorial’ for how to do things.

Competitor Analysis

From the competitor analysis, we can see that Canvas, compared to other LMS and learning platforms, is a boon for administrators. Having the ability to change the course structure, close and open modules, and create independent sections with one class page is great for the organization — if you can put the time in.

In practice, this isn’t always the case for lack of time, knowledge, or training. While a one-size solution like Google Classrooms is not an ideal solution, improving the default layout to accommodate more usage cases is a good start, starting with mobile users. These users, in particular, suffer the most from having to open new windows/tabs — improving the interface to use fewer taps and page/screen switches is a good starting point.

In addition, with the COVID pandemic still an issue, safety has to be considered and students are mostly online. Yet, Canvas lacks the kind of communication integration that its competitors have. While ‘modules’ are a logical way to organize, it might not be intuitive or useful for users. Instead, a good take-away from Google Classrooms is the need for streamlined and easy to access communication tools, calendars, and social tools in a safe environment.

UI Flow

Option 1: Assignment Calendar

Assignments are auto-sorted by class and due-date into tiles on the front page. The user will be able to cross out completed assignments from the list. All assignments due that week are put on the front. Important things such as tests or quizzes are also put on the front. Accessing a class requires a tap/click on the relevant subheading in the list, after moving to another tab/screen. The typical default sort of classes will be by last interacted.

Option 2: Tabs on Sidebar with Swipe Interface

Classes are accessed through a persistent sidebar, like the tabs in a binder. Tapping a tab will “pull” it out partway into the screen, revealing a list of contents to be accessed. Similar to what is available in Canvas already, but allowing for previewing course contents without a new page load. Sidebars and left/right screen navigation are used over long-presses.

UI Sketches

Option 1: “Assignments/Due Dates” tab/list

Option 2: Tabs on Sidebar with Swipe Interface

Prototyping Background/Explanation

To refresh, Option 1 is an iteration of the list-based structure commonly used in many existing apps. However, more quantitative information is shown in this layout in a table, including ‘Days Left on Assignment’. It is very focused on particular items, akin to a checklist or to-do-list. We believe this has good utility for users in an efficient and intuitive way.

Option 2 is an iteration on the sidebar/tiled interface. This design uses a persistent sidebar that can be ‘pulled’ out and different ‘folders’ perused through, akin to a set of nested manila folders in both appearance and functionality. This design option was chosen based on its uniqueness and positive feedback for its development from mentors and peers.

Prototyping: Low Fidelity Wireframes/Mockups

Prototype 1: Adaptive List(Option 1)

Prototype 2: Folder/Sidebar(Option 2)

Both of these prototypes were chosen for the added functionality’s ability to optimize the user experience by immediately presenting all the information the user is most likely to look for first in a more organized, readable format. From our UX flows, UI sketches, and the feedback we have received over the past few weeks, we knew that we needed to update our problem statement to align with the goals we wanted to achieve with our solutions which are reflected in our prototypes. We didn’t want the user to just be able to do things quicker, but we wanted the information required by the user to be presented in a more accessible and readable format so that the user does not disengage from the platform. This meant that the design needed to organize the information in a way that the user would organize themselves. Users would not have to dig in an information heap to look for their answers and risk being distracted by something else. Both of these prototypes streamline that information stream for the users to easily locate whatever information they’re looking for.

High Fidelity (Hi-Fi) Prototype

Background

We incorporated feedback from peers and a mentor session in deciding which prototype to develop into a hi-fi prototype. While we ultimately chose the prototype with a ‘Sidebar’ tool, we were able to identify some problem areas needing adjustment before moving forward. These issues are addressed in the Write-Up section.

The following prototypes were based on the ‘Sidebar’ design, with adjustments made. These changes are to focus on its new intended utility as a Quick Access and minimizing its visual overlap with other navigation options, while keeping it familiar and intuitive. One prototype uses a list that pulls in from the side, like what many ‘hamburger’ menus are like. That icon and its settings are to avoid overlap. The other design hides menu options in an icon on the bottom bar; with similar behavior to the icons on a desktop operating system.

Both prototypes are similar across their main pages. In our design process, we went from the user flows we made into one ‘template’ for the Hi-Fi designs, and branched from there. Rather than working completely collaboratively as we did before, we believed that ‘forking’ the designs would allow for faster prototyping, and a final design could be settled on once we incorporated cross-feedback from each other and users, refined, and tested again, iterating as necessary.

Hi-Fi Prototypes

Using Tab/Swipe

Using Bottom Bar

Write-Up

In this prototype, we aimed to address a typical user flow, while showcasing changes we have made since the low-fi prototype to the ‘Sidebar’ design. The changes are as follows.

First, we needed to justify the usage of the Sidebar, when the hamburger menu is nigh-ubiquitous and often provides similar utility. To address this, we decided to focus the Sidebar into a ‘Quick Access’ or ‘Hotbar’, wherein Classes, Assignments, and other useful links can be accessed in fewer actions, without the need for a complete screen change. The same end result can technically be achieved by going to a ‘Home’ or ‘Classes’ page, and so a Quick Access can seem redundant. So, we intend for it to be a persistent, useful utility that allows quickly navigating without a page change. Rather, in all prototypes, navigation options are overlaid on the screen temporarily until dismissed.

Secondly, the animation overlap was a concern with this utility. In the original concept, it was intended for the Sidebar to mimic nested folders, with ‘Tabs’ you could pull or tap. The visual design would mimic that of many popular web browsers. However, this concept it was not expanded upon until our mentor meeting, where the idea was brought up again. We use this visual design to differentiate from the ‘Hamburger Menu’ while allowing for the familiar slide/pull interaction. This is combined with allowing for ‘Tap’ to open, giving users flexibility. Animation overlap is avoided in the ‘bubble’ design, which uses a fairly unique design compared to almost all other utilities on Canvas.

Third, the intended interaction method of a left-to-right or right to left slide was discovered to potentially interfere with the system UI navigation on recent Android and iOS versions, as well as some custom Android utilities from Samsung and Sony. Using the ‘Tab’ visuals as mentioned above helps this issue, by allowing for a larger area to use, avoiding the edges, and allowing for an intuitive place to Tap if all else fails. For the other prototype, this issue was avoided by hiding options in the icon and compartmentalizing them in a bubble. Though this requires an additional tap, it hides away options until needed, preserving screen space.