Refactoring a Scheduling UI

This is an example of refactoring a user interface design (inspired in part by the excellent book Refactoring UI by Adam Wathan and Steve Schoger). For the original design, I contributed to some of the details of the interface, but was not primarily responsible for the overall page layout. Regardless, I wanted to see how I could simplify and improve the UI from a visual persepctive.

This is the main step in a multi-interviewer scheduling tool in the ClearCompany Talent Management Platform. The primary use case is for recruiters and hiring mangers to schedule on-site interviews with a panel of interviewers (there was actually a separate tool for scheduling phone screens and other 1:1 interviews).

Many of the changes shown below were not feasible at the time the design and development work was performed, as the design patterns (colors and visual styles) were already established and we lacked the budget to make changes with ramifications across the entire product.

Design Goals

My main goals for the redesign were:

• Simplify and reduce visual clutter. This included using a single field style through the UI, using fewer text styles, as well as reducing the noise created by having too many dividing lines, outlines, and "sub-sections” in the UI.
• Establish a clear visual hierarchy to direct attention to the most important parts of the UI (i.e., scheduled meeting times, the call to action to proceed to the next step in the scheduling tool).
• Modernize the UI by using brighter colors and “de-greying" where possible.

Before:

After: