TA Scheduler Web App Case Study

My Role

Leadership - I scoped the project, established and prioritized the goals, and established communication practices and cadence.

Heuristic Analysis- I selected the most important heuristics for user needs and project goals, conducted analysis, then identified and prioritized the jobs to be done given project constraints.
‍
UX/UI Design - Restructured the application layout to mirror modern dashboards and their interaction patterns. Conducted color and button component audits. Provided detailed specifications for developer.

Team

Myself, Designer
Jeffrey Ho, Developer

Tools

Figma, Visual Studio Code, Zoom

Timeline

4 Weeks

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.

Before of Course Homepage

Solution

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

After Course Homepage - Events Upload Flow

Impact

Decrease in scheduling time

"It felt cleaner and less busy, so easier/faster to find what I needed."

Lead Course Coordinator Feedback

"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."

Course Coordinator Feedback

Process

Users

Unfamiliar with the Application

The Course Coordinator role (CC) has high turnover, so team members are frequently using the TA Scheduler app for the first time. ‍

Short on Time

The TA scheduling period is the busiest and most stressful for CCs, frequently requiring them to work overtime to complete all their tasks.

Problem In-Depth

Highlighted Problem of User Flow

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.

Highlighted Event Upload Problem

No Visual Cues to Guide User Flow

Positioning of actions on the page does not match the users' mental model of steps they need to complete.
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.

Highlighted Event Upload Problem

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.
Coloring of labels and buttons is inconsistent and not WCAG 2.2 compliant, making interface confusing and challenging to use.
Coverage status of course calendar events is not easily scannable, weakening they key value this application brings to its users.

Opportunity

How might we make the interface more intuitive so users can create initial schedule assignments with less friction?

Strategy

Usability Heuristics & Lean Prioritization

To improve usability of the application I performed a heuristic analysis, focusing on 3 of Neilson & Molich's 10 evaluation heuristics:

because improvement in these areas would create significant impact on application learnability (the central problem for users) and be easier to implement than other changes, allowing our team to deliver more value in a shorter time frame.

Final Designs

Creating a Familiar Structure

Restructuring to familiar 2 column layout better matches users' mental model of a desktop app, helping them find information faster.

Layout Changes Before & After

Uploading Events Where You'd Expect

Before

After

Uploading Events Flow

Lean UI Updates to Declutter the Mind

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

Buttons Documentation

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

After

Reflection

Designer-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