Booker POS

Booker.jpg

Introduction

Booker is a complete business management solution for appointment-based service businesses such as spas and salons. The 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, etc.

  Booker’s legacy POS was a separate screen away from the main Calendar view

Booker’s legacy POS was a separate screen away from the main Calendar view


The Challenge

Booker was originally designed with the Calendar and the POS as separate screens, requiring the user to navigate away from the Calendar for every transaction.

I observed that the workflow could be greatly improved by putting the POS functionality in context with the calendar. But could we successfully fit all the functionality of the POS into a narrow side panel while preserving usability?

  Early concept for fullscreen POS

Early concept for fullscreen POS


The Solution

My approach was to divide the POS functionality into several major components, which could be shown and hidden as needed to keep the user focused on the task at hand.

Unlike a retail POS, the most important aspect of a service business is the customer identity. I placed this at the top of the panel as a permanent header element, so the active customer was always easy to identify, even if the clerk got distracted or stepped away.

  POS side panel structure showing customer identity

POS side panel structure showing customer identity

Next, I approached the shopping cart component.  Customers often added additional products or services in addition to those already booked; I designed a simple interface to quickly navigate lengthy service menus and product lists. Special cases such as memberships were accommodated as needed. The vertical shape of the panel naturally mimicked the appearance of a paper receipt, adding a skeuomorphic element.

  Inline add to order menu

Inline add to order menu

  Add service items to cart

Add service items to cart

  Order complete receipt view

Order complete receipt view

The main function of a POS, of course, is taking payment. Here I designed unique — but similar — interfaces for each payment method. Supported devices were represented visually. Tipping was treated differently depending on payment method.

  Select payment method

Select payment method

  Take payment via device

Take payment via device


Results

The resulting view was a clear summary of the status of the order at any given time, which could be quickly accessed and hidden from the calendar view. Furthermore, the generously spaced, vertical shape of the UI was designed to easily transfer to the mobile version of the product.

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