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