top of page

UI/UX case study

Canvas LMS Redesign

UI/UX redesign of the Canvas LMS calendar feature

Banner.png

TYPE

Team project for Data-Driven UX/Product Design course

COLLABORATORS

Issac ln, Quinton Ramaswamy, Maged Waly

ROLE

BACKGROUND

Canvas is the main hub for UC San Diego and many other universities students to manage their school work and class schedules but the way Canvas’s built in Calendar handles its funtionalities made the feature not intuitive or useful. Thus, my team and I were interested in redesigning the calendar feature of the Canvas LMS, to enhance student productivity and quality of life on the platform.

UX designer and UX researcher

TOOL

Figma

PROTOTYPE

TIMELINE

8 weeks (March 2022)

Frame 126.png
Problem

Problem

A calendar-savvy, organized student needs Canvas Calendar to be more useful in that it can act as a calendar hub, merging both curricular and extracurricular aspects to keep themselves organized and aware of deadlines.

User Testing

User Research

Click the spreadsheet linked here to view the interview questions and notes!

  • Students of various backgrounds were interviewed on both desktop and mobile version of the current canvas calendar

  • Many students found that the current calendar felt not optimized and lack flexibility in features like the event/task creations

  • Student had trouble creating repeating events and voiced annoyance for the "more option" window moved the user from the calendar.

Personas

Personas

Competitive Audit

Frame 129.png
Competitive Audit

Competitive Audit

Frame 138.png

Apple Calendar is an app hosted on Apple devices such as IPhones and Macbooks. It supports casual use primarily, but it can be connected to external calendar applications such as google calendar to keep all events localized on the same platform. Calendar events can be imported and exported as .ics files.

Frame 139.png

Google Calendar is a calendar app that is used by professionals and casual users alike. Allows for importing and exporting .ics files. Creating tasks and recurring events seems to be pretty simple. Doesn't seem to be able to create same events/tasks for different days of the months.

Frame 140.png

Outlook Calendar is a calendar app that tends to be used in professional work environments to be integrated with MS Teams and other MS products. Can import (couldn't find a way to export) .ics files. Straight forward to set-up events by clicking on the calendar for the time, dark mode, repeating events is easy to do.

Wireframes

Wireframes

This is the initial landing page of a redesigned Canvas Calendar, the idea is to take elements of a dashboard and mix it with the current calendar. Users can switch between the views if needed.

Initial ideation of the create event/task GUI, a more streamlined and clean UI versus the original design that forces users to move to separate screen.

Wireframe1.png
Hi-fi Prototype

Hi-fi Prototype

Frame 135.png

Monthly View

After another round of user testing, we decided that this will be landing page for the calendar redesign over the agenda as users are more used to monthly styled view.
On the right, each class is assigned a color. Clicking on the three dots opens a color palette page to change class colors if desired.Users can toggle the bottom right "Hide" option to hide completed or past events.

Frame 134.png

Weekly View

Users can now view each day of the week without having to scroll within the Canvas Calendar. A tracker using red line as and indicator allows users to identify what date and time it currently is in weekly view more readily.

Frame 136.png

Agenda View

Users now have the option to toggle between showing deadlines or just events. Time and date is added to the right to improved clarity. Users can also check-off completed deadlines and events to keep track of what work they've done and have yet to do.

Frame 137.png

Create Event/Task

GUI accents are now dependent on the color of the selected calendar. Users no longer have to select "More Options" to make an event "All Day" or not. Additionally, users can now make events/tasks repeatable & add descriptions to them without having to go to "More Options". Repeat functionality has been more intuitively implemented, including custom repeat functionality.

Showcases (GIFs)

Calendar Features Showcases

Event Creation.gif
Agenda.gif
Hide Past.gif
Export Agenda.gif

Create Event/Task

Showcase of the create event/task feature and it's new functionalities.

Toggle Deadlines & Events

Showcase of the toggling of the deadlines and event filter, allowing users to view either deadline, events, or both.

Hide Past/Submitted

Showcase of the "Hide Past/Submitted" feature, allowing users to hide past/submitted events & deadlines from their monthly & weekly views.

Export Calendar

Showcase of the "Export Calendar" feature which is now clear with exporting animations.

Check out my other projects!
bottom of page