CLOVER APPOINTMENT MANAGEMENT

An appointment with success

Clover Point of Sale provides a comprehensive range of features for small businesses, covering everything from payment processing to sales tracking and daily operations. However, it had a significant gap in its capabilities when it came to managing appointments.

web-dashboard-calendar-day-view

The goal - An all in one solution

Targeting salons, spas, and gyms, we set out to streamline their operation of booking appointments, managing customer communication, employee scheduling, and taking payments – all within Clover. 

biz-barber
biz-nails
biz-salon
biz-gym

My role

I led the design of merchant-side appointment management across web, devices, and companion app.

This was a massive initiative spanning multiple teams. My goal was to design net-new features for calendar views, merchant booking an appointment, and appointment lifecycle managment.

Key insights - A big opportunity

When I joined this project there had been a fair amount of feedback gathered by my research and design collegues.  I utilized these important details to inform my design decisions.

Clover is losing merchants to competitors by failing to offer an embedded solution for appointments.

Existing Clover merchants who need appointments capabilities to run their business can only fill the gap today with a partner solution.

Prospective merchants who need appointments booking capabilities to run their business don’t choose Clover, as there is no native solution.

Merchants leverage their phone for running everything from booking appointments to taking payments.

Zoom out

In order to wrap my head around all the touchpoints I worked with a fellow designer to map the booking flow.

BOOKING FLOW

Just start somewhere

The sheer amount of items that needed to be addressed within the time frame for appointment management was daunting.

I wasn't able to to work through a thorough design process so my strategy was to build a prototype for the merchant calendar and appointment management from the Clover dashboard. This served as a mid point between wireframing and fully completed UI/UX.

“If a picture is worth 1000 words, a prototype is worth 1000 meetings.”

— Tom & David Kelley

Gut check

I worked closely with my research partner to run 12 moderated user tests with the initial prototype I had built.

This served as a great way to confirm we were on the right track and proved to be a critical storytelling tool for the team and company stakeholders.

Armed with this feedback, I moved ahead with finalizing design.

user-testing-prototype-2

Moderated user testing session utlizing my prototype

Solution - Calendar views

The calendar is the main screen where merchants will focus their attention for managing appointments. My goals were to make it easy to understand at a glance, controls for filtering appointments, and responsiveness for the variety of screens and devices. 

web-dashboard-calendar-list-view

Calendar day view - Web dashboard

web-dashboard-calendar-view

Calendar view - Web mobile

Flex-calendar

Calendar list view - Flex handheld device

Mini-calendar-day-view

Calendar day view - Mini countertop device

Station-calendar-week-view

Calendar week view - Station Solo device

Solution - Mechant booking an appointment

From their web dashboard or device, merchants can create an appointment. The design challenge here was to avoid cognitive overload by balancing the myriad of editable details.

merchant-booking-0

Merchant booking - Web dashboard

merchant-booking-1

Merchant booking - expanded sections

Mini-booking-appointment

Add discounts to an appointment utilizes our side panel pattern

merchant-booking-mobile-1

Appointment booking on web mobile and Clover Go app

flex-merchant-booking-mobile

Appointment booking on Flex handheld device

Solution - Appointment lifecycle managment

Once an appointment is created the next part of the experience is to manage it. This includes changing its editing details, status, cancelations, and taking payment.

Merchants expressed they wanted an easy way to view all details and take any actions on that appointment.

web-dashboard-appointment-details-1

Appointment details - Web dashboard

web-dashboard-appointment-details

Appointment details - Web mobile and Clover Go app

Flex-appointment-details

Cancel appointment - Flex handheld device

Mini-appointment-details

Cancel appointment - Mini countertop device

Initial results

At the time of this writing we've launched appointment management within the Services Growth plan.

We've completed a beta test of the new features with 12 existing Clover service merchants. Most of the feedback has been very positive and we're quickly learning where we can make improvements.

Personal insights

Documentation is critical but also really difficult when you’re moving so quickly. Implementing better documentation practices for design has been key to keeping my thoughts and communication less chaotic with PMs and Engineers.

It feels good to ship! Even though moving so quickly has been a bit overwhelming I am reminded that the whole point is to ship products, learn, and iterate. This should be paramount for any team that is building software.

Selected Works

Clover AppointmentsProduct Design
Dao Of DesignPersonal project