Problem Statement
The COVID-19 pandemic meant that, more than ever, students would have to use online learning platforms in their education. These sites and apps can be lynchpins in one’s educational experience especially now that many students attend class via conference call, finish reading, and complete activities and assignments online. Short of functionality overhauls however, 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.
We chose Canvas as the redesign target due to its ubiquity and mostly unchanged interface through the years. Our goal was to redesign for:
1. Improved workflow 2. Easier navigation 3. An easy, all-in one home screen
The timeline for this project was under 10 weeks.
Background
This was a group project for the COGS187A class at the University of California, San Diego done remotely in the Fall 2020 term.
Team roles were as follows:
Henry Pham-Tran: Redesign Concepts, User Research Interviews, UI Hi-Fidelity Designs, UX and Interaction Design, Final Testing, Background and Analysis
Fernando Reyes Jr.: Redesign Concepts, User Research Interviews, UI Low-Fidelity/Hi-Fidelity Designs, UX and Interaction Design, Final Design
My role: Redesign Concepts, User Research Interviews, UI Low/Hi-Fidelity Designs, UX and Interaction Design, Final User Interviews
Research Background
We initially planned to do video interviews with users of the Canvas desktop website and apps, as well as teachers. In practice, we were limited to interviewing mostly older students (high school and older, college students) and few educators. However, we believe our data are still representative of many users.
One way of interviewing people we considered included having the user record or share their screen as they use the app as they normally would. In doing so we would see how they use and interact with the app, and what things we could improve on. We would then directly ask the user why they did certain things or would like to see improvements based on their experience with the app. However, surveying would allow us us to get feedback from many users without having to spend much time.
A concern was as always, that of privacy. This was of particular note as education apps have a large proportion of users in K-12 schooling — obtaining direct information from surveying would have to comply with various laws or ethical standards. For this reason, we considered instead one possible method that would use focus groups of volunteers who review hypothetical designs. We would then take these into consideration, while finding starting points for design iteration from sources like online reviews and the user feedback.
Ultimately, we performed user research via video call on Zoom, but limited our participant types (mostly high school/college and older, no educators) based on convenience sampling, as our available users were quite limited due to remote learning. Regardless, we aimed for direct feedback from users, as opposed to a take-home survey or poll. An interview could 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.
Research
Research Methods
Interview volunteers were asked to provide either a screen-recording with audio narration or separate text explanation, images with 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 would be no more than a few minutes in length.
Interview Questions
Interviewees were asked to guide their recording on along the following:
- What they found frustrating about the layout/UI
- What they wanted to see changed”
- How they think features are used
- How they think or have seen other use features
- How the app helps their learning
- Whether the COVID-19 pandemic affected their usage of the app in any way
Research Findings
We interviewed primarily users of Canvas, but in order to form a competitor analysis and better understand the target audience of education/learning management system apps, we interviewed some users of Google Classrooms and Schoology.
Interviewees are anonymized by their initials (changed if requested).
Google Classroom users:
JM expressed a need for a centralized homepage to see all assignments and to-dos easily, owing to a busy home schedule.
Schoology users:
ET and SM noted the disorganized feel of their online classroom, and how it could be overwhelming to look at all the work at the same time. This was one of the primary concerns we decided to address in Canvas.
Canvas Users:
KT expressed a frustration with the organization of the “Assignments” tab in Canvas. KT, takes several classes, with many assignments each, and expressed a need for a clearer or faster to access organization of to-dos.
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, and frequently had to go through multiple links or pages to reach their destination.
User YJ voiced opposite complaints about the categorization of lectures — while reaching them was not an issue, YJ described the lack of an auto-grouped lectures and calendars 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 often open in separate windows without controls. 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.
Analysis
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.
Personas
We developed personas using these interviews and images from thispersondoesnotexist.com, for educational use.
Sample Persona:
Competitor Analyses
We can see that Canvas allows for changing the course structure easily, but this can be a both a boon and a burden. For students it may be better to have a useful default setup.
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.
Canvas lacks the kind of communication integration that its competitors have. Its use of modules are a logical way to organize, but not necessarily intuitive or useful for users. A good take-away from competitors is the need for streamlined and easy to access communication tools, calendars, and social tools in a safe environment.
Prototyping
UI Flows
Based on the analyses and feedback, we developed the UI flows, with my involvement being primarily in the following:
Tiled Interface for Classes, due dates in List
Classes are sorted into tiles on the front page. Accessing that class requires a tap/click on the relevant tile. The typical default sort of classes depends on the user’s schedule. Accessing a class requires a tap/click on the relevant subheading in the list, after moving to another tab/screen.
Assignments/Due Dates on Tabs/Lists
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.
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
We then proceeded from the UI flows to producing low fidelity UI sketches.
Tiled Interface for Classes, due dates in List
Tabs on Sidebar with Swipe Interface
Low-Fidelity Prototypes
We then proceeded to develop two of our sketches into low-fidelity prototypes to user test and further refine. While clearly prototype work, we were able to demonstrate usability and features nonetheless through the format of the prototypes. By recording GIFs, we eliminated the need for users to figure out Figma interactions, and vastly reducing the hurdle of getting feedback.
Adaptive List
Folder/Sidebar
In making these prototypes, we were able to refine our project statement and design goals as well. 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.
User Feedback
We solicited feedback from 3 users to evaluate the prototypes above, with the following take-aways:
We noticed that a lot of users had ingrained habits for navigating apps, especially mobile apps, that did not change easily even when given a very different design. Many users also made heavy use of the system navigation to quickly go back, as it is an intuitive and low-cognitive-load action that is near-universal. In both prototypes we received feedback from users to have more obvious buttons, settings, etc, or at least in a more easily recognized space. Some users navigated by undoing prior actions. At the same time, some users wanted more traditional navigation tools like breadcrumbs trails, which was an insight that we hope to incorporate.
Steps Leading to Hi-Fidelity Designs
We altered our design philosophy to steer away from radical redesign in favor of working within a user’s existing habits to some degree. We then decided to partially merge some prototypes and further the development.
Hi-Fidelity Prototypes
Based on feedback from peers and a mentor session in deciding which prototype to develop, we ultimately chose the prototype with a ‘Sidebar’ tool.
Changes were made 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.
Using Tab/Swipe
Using Bottom Bar
Prototype Description
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 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 option are overlaid on the screen temporarily until dismissed.
Secondly, 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 as 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.
Alternative App Screen
Our alternative designs involved a bubble, or a ‘taskbar’ layout. My involvement in the hi-fidelity designs was primarily. Each has two screens: organizing either by date, or by class category.
Bubble Layout
Organized By Date
Organized By Date
List Layout
Organized By Date
Organized By Class
Prototype Description
These alternate app screens were mostly a UI appearance/aesthetic redesign. However, they both utilize a ‘taskbar’, differing in the use of either a bubble to hold shortcuts, or a simple list format.
Finalizing
To get started on finalizing our prototype, we solicited informal feedback from a number of users. As Figma, our design software of choice, can be daunting to navigate, we shared these as gifs with some brief description, as you’ve seen throughout the document. Feedback is organized below by each prototype.
For this redesign, we worked to address flaws noted in the designs, while incorporating features from any time a user stated a preference for the alternative designs.
Since users gave little feedback on sorting, we can assume that there is a need for both at times or no clear preference. As there is not always enough room to sort by separate dates (except on desktop), we will sort by ‘Class’ as a default and include an option to change sort type.
We took the user feedback we gained from our first set of high fidelity prototypes to provide some more visibility to the organizational feature we wanted to add to the Canvas app. Because the bottom bar design was well-received by our users, we iterated on our past bottom bar design with heightened visibility added to it to optimize for a better user experience.
Before-and-after stories
Before
After
This represents our finalized design after 10 weeks, many user interviews, and many hours spent in Figma.
