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