Restructuring an internal scheduling dashboard and applying a modern design system so Course Coordinators can execute the central actions of their workflows faster.
UX/UI Designer
Myself, UX/UI Designer; Jeffrey Ho, Developer
Figma, VSCode
Aug 2023, 4 Weeks, shipped
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.
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:
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.
Restructuring the application to mirror other SaaS dashboards that users are already familiar with will help them more quickly onboard to the application.
De-cluttering the interface and leveraging gestalt principles to strategically focus user attention will help users understand the proper "next steps" with less difficulty.
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.
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.
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