Booker POS

Booker.jpg

Introduction

Booker is a complete business management solution for appointment-based service businesses such as spas and salons. The users are mostly front desk employees at busy, customer-centric small businesses. Their most common daily workflow is managing appointments via a Calendar and taking payments via the POS.

The Calendar view

The Calendar view

Booker’s legacy POS

Booker’s legacy POS


The Challenge

When Booker partnered with First Data as a payment processor, they built an entirely separate POS to support First Data’s Clover payment terminals.  The new POS was incompatible with Booker’s legacy codebase and opened in a different browser tab, creating a jarring transition for the users each time they needed to take payment.  Since this interaction happened many times in a typical workday, it was starting to degrade the overall user experience.

At the time, I was Booker’s UX lead and I felt this was a significant problem that needed to be addressed.

I observed that the workflow could be greatly improved by putting the POS functionality in context with the calendar.  My proposed solution was simple: put the POS inside an iFrame so it could share the screen with the calendar.

After the front end team validated my assumption, we got the green light to proceed.  Now came the design challenge. At the time, the POS was a standalone desktop app -- could we successfully fit all this functionality into a narrow side panel while preserving usability?

A Clover payment terminal

A Clover payment terminal

The First Data compliant POS app running in a separate browser tab

The First Data compliant POS app running in a separate browser tab


The Solution

I began by developing an overall concept for the new POS. The vertical layout naturally suggested the appearance of a paper receipt, adding a subtle skeuomorphic element.

Although we were initially targeting desktop users, this design would naturally adapt to a smartphone at a later date.  Designing simultaneously for desktop and mobile guided my design decisions, like avoiding hover states and other interactions that wouldn’t work with a touchscreen.

Because the most important aspect of a service business is the customer identity, I placed this component at the top of the panel and used color to indicate changes in state, from order open to complete.



POS side panel structure showing customer identity

POS side panel structure showing customer identity

Order complete receipt view

Order complete receipt view

At several points in the flow, users had to choose from a range of distinct options. I opted for large tiles with carefully chosen icons to represent each choice visually.

Inline add to order menu

Inline add to order menu

Select payment method

Select payment method

The main function of a POS, of course, is taking payment. Each payment method had its own UI for completing the transaction, since tipping varies by payment method.  I designed interaction states that were specific to Clover terminals so the front desk staff would know what was happening while the device screen was facing the customer.

Booker CC Clover.jpg
Booker CC Clover Expanded.jpg
Booker CC Clover Progress.jpg

Overall, I designed approximately 70 screens for the new POS, accommodating the entire functionality of the previous version as well as some new features that had been in development.

Booker POS Contact Sheet.jpg

Results

Users can now perform transactions directly from their primary calendar view — no more switching between browser tabs. Booker was able to quickly transition the majority of its users to the new UI, and have received positive feedback about the faster and smoother workflow.

The side panel in context with the Calendar UI

The side panel in context with the Calendar UI