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 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?
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.
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.
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.
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.