Cardonex featured image

Cardonex

Master schedule building application that maximizes teaching staff utilization and deliver over 90% of students’ first-choice classes.

Visit Site

Role

UI/UX Design

How Can We Make This Better?

When I first joined Education Advanced, my primary task was to imagine what the next iteration of Cardonex would look like. We had a strong MVP tool built on top of Bootstrap, and styled very lightly. As time progressed and Cardonex proved itself in the market, more resources were put into iterating on the next phase of the product.

Because Cardonex had a smaller user-base, we didn’t want to abandon what the current users were getting used to, but instead we focused on clarifying those ideas and organized a lot of the flows around reducing as many steps as possible, while still having an instructional nature.

We aligned branding to be consistent with our other products and focused on an accessible color palette. We also use color as a meaningful differentiator inside the application to help users associate course subjects with color (i.e., Career & Technical Ed is blue and Athletics is pink).

Logo revamp & color palette
Onboarding steps

Logo brand alignment and onboarding steps to guide users

A Guiding Hand

Many users are new to the process of staffing and master schedule building, the tool does a really good job guiding them through each step of the process to be successful. We focus on clearly defining new vernacular and pointing out features that can provide “short-cuts” in the process.

A good example of this are “tip” messages—peppered throughout the UI, we supply useful details on how to use key parts of the interface to speed things up. Pointing features out like using advanced search functionality early, exposes patterns the users will see throughout other areas of the application as they move through future steps in the process.

Teacher assignments overview
Course size designations

Teacher assignment management and course metric adjustments

Fine-Tuning for Best Results

One of Cardonex’s biggest benefits is the ability to get an accurate assessment of how teachers are being utilized in a school. This can lead to re-balancing of teacher workloads and sometimes even letting some go if they aren’t being utilized properly. This is a difficult subject, but once users see how Cardonex can provide the insights needed to make these decisions, it becomes invaluable—ultimately saving a school district multitudes of money and resources.

The important part of this process if providing as accurate information as possible about current teachers workloads as well as the needs of upcoming courses. Users spend a good amount of time in the application fine-tuning these details, and the interface provides many “levers and knobs” to improve the accuracy of the data input into the system.

Staffing plan overview
Teacher section adjustments

Staffing plan overview and course reconciliation

An Accurate Staffing Plan

The end result is a comprehensive Staffing Plan which provides insights of where sections of courses are over—or—under-staffed. Once users have a clear picture of where they need to make decisions, they can “snapshot” the plan, and tweak it further until they reach a result that works for them.

After staffing concerns have been addressed, the next part of the process includes reconciling course assignments. It’s critical to have the correct amount of teachers for assignment before designating how many sections they might teach. The application even warns you if you try to over-assign a teacher—which of course isn’t optimal for scheduling.

Chip configuration interaction
Scheduler chip drag-and-drop

Chip configuration and scheduler drag-and-drop interaction

The Schedule Students Want

The essence of Cardonex is the Master Schedule builder—it’s presented as a large grid of available “slots” to place “chips” on. A chip is representative of a portion of a course, that’s been broken down into digestible teaching segments. For example, a teacher can only teach a specific number of students within a pre-defined timeframe per day—a chip is a great visual metaphor for what that portion of a course may be.

Users drag-and-drop chips on to various positions of the scheduling board—with visual feedback when chips can be prioritized for best results—until they’ve achieved an ideal schedule for each teacher at the school. There is an order of operations for how chips are placed, and there are multiple ways to filter chips to work around how different users prefer to schedule.

At the end of this process users are presented with a report indicating the schedule for all the teachers at their school. The schedule takes into account all student course requests, balanced with valuable data-points about proper course assignment that yields a schedule where students get over 90% of the courses they’ve requested.

Colophon

Colors

base base--ish base--mid base--semi base--light base--ghost highlight highlight--ish highlight--mid highlight--semi highlight--light highlight--ghost contrast contrast--extra

Typography

Tooling