Lean usability improvements to speed up TA scheduling time

Restructuring an internal scheduling dashboard and applying a modern design system so Course Coordinators can execute the central actions of their workflows faster.

Role

UX/UI Designer

Team

Myself, UX/UI Designer; Jeffrey Ho, Developer

Tools

Figma, VSCode

Timeline & Status

Aug 2023, 4 Weeks, shipped

Overview

During their busiest time of the year Course Coordinators must schedule 50-100+ Teaching Assistants to course sections, office hours, labs and more. Luckily they have a scheduling software to do so, but its unintuitive interface is so cumbersome, many would rather do the work manually.

In 4 short weeks, I partnered closely with an engineer to overhaul the software. To address the users’ highest priority pain points, I restructured the information architecture better mirroring users workflows and mental models of desktop software. Additionally, I introduced a modern design system to support usability, accessibility, and future maintenance, closely supporting engineer implementation throughout. Users unanimously agreed the new interface was easier to use and shortened scheduling time.

Problem

Users struggle to find and complete the central actions of their user flow, prolonging the time it takes to schedule TAs during their busiest work period.

Original Landing Page
Research Insights

Users are stressed, short on time and unfamiliar with the application.

The Course Coordinator role has high turnover, so users are frequently using the TA Scheduler for the first time.
The TA scheduling period is also the busiest and most stressful time of year for the Course Coordinators, frequently requiring them to work overtime to complete all their tasks.
Highlighted Problem of User Flow
Strategy

Leverage usability heuristics to improve learnability.

Focusing on the problem areas of the user flow (course event uploads, TA schedule upload, etc) and referencing Neilson & Molich's 10 evaluation heuristics, I decided making changes addressing the following 3 heuristics was going to improve usability and learnability of the application the most while requiring the least technical resources:

Visibility of System Status

Establishing clearer edit states and leveraging principles of visual perception to improve scanability of calendar events will help new users understand and use the application faster.

Consistency & Standards

Restructuring the application to mirror other SaaS dashboards that users are already familiar with will help them more quickly onboard to the application.

Aesthetic & Minimalist Design

De-cluttering the interface and leveraging gestalt principles to strategically focus user attention will help users understand the proper "next steps" with less difficulty.

Key Usability Issues

No visual cues to guide user flow

  • Similar actions are not grouped together, making them harder to find.
  • Actions central to user flow are 'below the fold' and have un-specific labels.
  • Positioning of actions on the page does not match the users' mental model of steps they need to complete.
Highlighted Event Upload Problem
Key Usability Issues

Many UI Barriers to Usability & Accessibility

  • Course information block appears to always be in an edit state, even when this is not the case, confusing users' understanding of system status.
  • Coverage status of course calendar events is not easily scannable, undermining the value this application brings to its users.
  • Coloring of labels and buttons is inconsistent and not WCAG 2.2 compliant, making interface confusing and challenging to use.
Highlighted Accessibility Problem
The Solution

A restructure and modern UI that helps users find actions faster with less friction.

After

Reorganized Information Architecture

Make the application feel familiar

Grouping actions with their associated courses and restructuring to familiar 2 column layout better matches users' mental model of a desktop application, helping them find information faster.

Before & After of Layout Restructure

Uploading events where users expect

Before
After
Uploading Events Solution Enlarged

Low-maintenance design system to modernize and maintain

New Buttons System and Documentation

Lean UI updates declutter the mind

  • A light-mode color palette is more consistent with other applications in the users' daily workflows, making the application feel familiar.
  • All colors are Bootstrap's default palette (easier developer maintenance), except for the primary blue to align with the UBC's brand color and system red to be WCAG 2.2 compliant.

Scannable calendar events

Using color to distinguish states is widely practiced and quickly scannable, making the experience more intuitive. Additionally, using multiple channels (color, iconography and text) to communicate meaning provides a more accessible experience.

Calendar Event Components
Calendar Events In-Context Before
Calendar Events In-Context After
Impact
"I found switching between tasks with the new one to be more intuitive and efficient, because I didn't have to look as hard for what I needed."
- Lead Course Coordinator

Easier scheduling = Faster & Happier Users

Decrease in scheduling time
It felt cleaner and less busy, so easier/faster to find what I needed.
I found switching between tasks with the new one to be more intuitive and efficient, because I didn't have to look as hard for what I needed.
Learnings

Developer hand-off is not one size fits all.

Some developers are ready to inspect components in Figma, others want verbose documentation, others a 15 min chat explaining an update. The "right" way to collaborate is the choice that

  • Ensures quality development
  • Respects both designers' and developers' time
  • Has enough documentation to support a design's maintenance over time given company structure and scale