SCHEDULING CALENDAR - Club automation


Overview

Limitations with Club Automation’s existing scheduling calendar continue to cause customer frustration. A revamp of the functionality, including modernizing the UI kit and adding mobile responsiveness, is needed to ease customer pain points and allow more clubs to utilize the calendar more effectively.

Understanding the Problem

The scheduling calendar is one of the most utilized features of Club Automation. Imagine how many classes, training sessions, tennis programs, etc. are going on at any given time of the day. Staff need to be able to quickly reference today’s schedule, see what’s planned for the entire week, manage their own hours, and book appointments from anywhere in the gym.

But Club Automation was not originally built to be mobile friendly. The calendar is impossible to access on a mobile phone, and the process to book an appointment is laborious. Busy staff don’t have time to wait for the system to catch up. On top of this, the UI is outdated and could use a refresh.

CA's existing calendar

Club Automation’s existing calendar

Product Vision

As a product team, we discussed the scheduling feedback we’d been hearing, and came up with a few goals for the project.

  • Allow staff to be able to view and interact with the calendar on their mobile phones

  • Allow staff to more easily set and manage their own working hours

  • Revitalize the UI kit and develop a design system to expand to all parts of Club Automation

Designs

First up, I started with UI components. Reviewing the scheduler and determining the most commonly used components, I set to work creating the refreshed UI kit.

UI components

A sample of updated UI components

I proposed a limited color palette with high contrast, and each component was developed with ADA guidelines in mind. However, we quickly found out it is hard to create a full library of components in a vacuum without truly knowing how they work together as a whole.

So next up, I reviewed competitive examples of scheduling features and created a few low fidelity designs and user flows for booking appointments. After validating with stakeholders, I moved on to high fidelity designs for the happy paths - booking an appointment, managing staff hours, and mobile screens.

Hi fi scheduler

Design concept - Add appointment

Manage staff hours

Design concept - Manage staff hours

Once the prototype was built out, I conducted several usability testing sessions with our end-users. I gave them several tasks to complete, including booking an appointment for a massage, adding another shift for a particular staff member, and cancelling an appointment. Overall usability testing was successful and customers were excited about the new changes.

Development

I worked closely with engineers to implement the scheduling designs. The UI kit is built using React, and we continue to add to it as the need arises.

Scheduling Calendar - Before and After

Results

We released the new scheduler to several beta clubs and started gathering feedback on our MVP. We soon learned that customers were quite excited for the new scheduler and loved the new UI, but there were features we needed to add before they could fully utilize it.

Future Iterations

We continue to prioritize feature gaps based on feedback from the beta group, so we can release the scheduling calendar to a broader audience. Also, we have had much success with the updated UI kit and have expanded its use to more areas of the system. Moving forward, this refreshed look will be applied to all new functionality added to Club Automation.