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 the Calendar UI and taking payments via the POS.  Booker’s POS is specifically designed for service businesses and includes a number of functions beyond those in a typical retail POS: customer identity, tipping, splitting payment methods, and the sale and redemption of customized gift certificates.

  The Calendar view

The Calendar view

  Booker’s legacy POS

Booker’s legacy POS


The Challenge

When Booker partnered with First Data, they needed to build an entirely separate POS to support First Data’s Clover payment terminals.

As a result, the new POS was an entirely separate application that ran in a different browser tab, creating a disorienting context switch 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.

  A Clover payment terminal

A Clover payment terminal

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

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

I observed that the workflow could be greatly improved by putting the POS functionality in context with the calendar. I initiated a feasibility assessment which proved that we could place the POS inside a side panel enclosed in an iFrame. But could we successfully fit all the functionality of the POS into a narrow side panel while preserving usability?


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. Splitting payments was seamlessly baked into the process, rather than requiring a separate path: customers could simply apply partial payments until the balance was met.

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

Overall, approximately 70 screens were designed 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