Case Study Banner

Canvas is the world's #1 teaching and learning software.
It is essentially has teaching tools, gives students access to instructions and learning materials, assesses student learning, and is a web-based learning management system.
This software is used by institutions, educators, and students.
It is mostly a web-based tool, but students also access the Canvas app on their mobile devices.

This project considers the process of how and when students submit their assignments, as well considering their busy schedules.
To better improve the Canvas student experience, the case study presents an approach to solving the issue of late assignments faced during a student's assignment submission experience by integrating a reminder system.

Project Details

Role :

Design Lead

User Research

Duration :

September - Present

Task :

Design Canvas integrating a reminder feature

Tools :

Miro, Figma, Axure

Team:

Independent Case Study

Challenge :

Design Canvas to help improve a student’s experience while submitting assignments through the integration of a reminder feature.

Solution :

Design a reminder feature that helps students remember their deadlines and customize when to receive the notification before the due date.

Visit Prototype:

Visit Axure prototype

Research Insights

I conducted user interviews to learn more about the different experiences students have had with Canvas and assignment submission.
Through my research, I wanted to understand student challenges with turning in assignments, evaluate Canvas' strengths and weaknesses, and discover the goals, needs, motivations, and frustrations of Canvas' Users.
Hypothesis: I believe that a button that sets reminders for student users when an assignment is about to be due will improve their experience because they will remember to turn assignments in on time. 

User Interview Questions

User Interview Dialouge

In order to learn about the real experiences students have while using Canvas, I interviewed 5 UTA students.
Here, I focused on asking open-ended questions about their experiences to learn as much as possible about Canvas' users.

View Dialouge
Interview Insights

Analyze Data

To synthesis all the information I had gathered from the user interviews, I made a Miro board to connect common patterns.
With grouping motivations and challenges, I was able to uncover key insights which helped me understand who Canvas' students are and what they truly need.

View Patterns
Customer Persona

Insight & Need

I learned students feel overwhelmed and want assistance to remember to submit assignments.
Students have difficulty balancing school and work.
Needs include to be able to always submit work on time and remembering to do so.

User Persona

To make sure that my decisions moving forward in the process are user-centered, I wanted to have a clear understanding of who Canvas' students are.
Using what I learned from patterns from the user interviews, I created a user persona to represent who I will be designing for - Meet Taylor!

Taylor User Persona

User Journey Map

I created a user journey map for my user persona, Taylor, to identify all of the key steps in a student’s journey that will take them from awareness to advocacy.
This also includes the student's perceived value of the Canvas feature, as well as their desired outcomes and pain points.

By understanding a student's pathway with submitting an assignment, I am are able to address the weaknesses and threats in the design.
I can then adopt a student perspective and identify unmet user needs.

User Journey Map Image

Fidelity Concepts

Using my understanding of the user, our goals, the architecture, and the user’s interaction with Canvas, I worked on making informed decisions on how to design Canvas’ screens.
After identifying touch points and key pages Taylor uses when trying to complete her goal of submitting assignments, I created a medium fidelity mobile to-do-list page.
The page has implemented a notification button, with a dropdown to choose when to receive a notification before the assignment's deadline.

Mid-Fidelity Mobile Canvas

I decided to create a mid-fidelity prototype which would help me quickly test the design on real students and make any priority revisions before integrating the visual design.

Design System and Style

I created a design system that would not only build the consistency, but also feel familiar with the student.
This will improve the overall process and experience for Canvas' students. Also, the notification button is a universal symbol.

Design System Colors
Design System Buttons, Images, Icons
Design System Typography

Demos And Pages

With the completed mobile mid-fidelity wireframe, I built a functional and responsive prototype of Canvas on Axure with the notification feature.
I wanted to ensure there will be a notification feature that will meet the user's needs and expectations, with a reasonable time selection (1-3hours) to be reminded before turning in an assignment.
User will use the notification to button to select a reminder time, click the button again to receive the notification, click the notification, and then return to canvas to submit the assignment.

Demo Pages - Setting hours on notification button

Home

Demo Pages - Receiving Canvas Notification

Categories, Filter, and Checkout

Demo Pages - Submitting Assignment Mobile

Book Appointment

Demo Pages Desktop - Selecting hours on notification feature

Registration and Preferences

Demo Pages Desktop - Receiving notification

Payment Information

Demo Page Desktop - Submitting Assignment

Registration Complete

Reflection

I faced new challenges during this project that I haven't faced before - seamlessly integrating a new feature into an existing design.

Through this project, I learned the importance of really diving into studying the existing design and flow of the application to introduce a new feature that looks and feels like Canvas' existing design.

To validate the revisions made, I learned how to conduct usability testing and tested the prototype with users.

Once I've re-tested to make sure the changes improved the feature's usability, Canvas would then implement and launch these new features.