Merchants using Clover POS devices needed a seamless way to track and bill for time-based rentals, especially in the sports simulator market - without disrupting checkout workflows.
Clover point-of-sale devices have a very established and recognizable UI, and this project required building a series of buttons, drop-downs and overlays for a specific screen within the Clover merchant software - the order screen. This is the most utilized screen by any brick-and-mortar business and it's the core function of Clover devices. Blending in and not disrupting the existing workflows, all while adding much needed functionality presented a unique challenge.
Blending In:
Standing out:
The traditional manual entry method led to habitual rounding down by time-constrained staff members at checkout. Take this common example where a customer used, and should be charged, for 53 minutes of rental time at a local golf simulator. In a busy, fast paced environment, it's easier for them to round down to 45 minutes (0.75 hours) instead of calculating the correct fractional time quantity (0.883 hours). The business just lost 15.06% of earned revenue as a direct result of the inefficient system the native POS software provided for billing fractional time quantities.
From 2021 to the end of 2024 I served as the Director of Business Operations for The Perfect Round (a golf simulator and craft cocktail bar with 3 locations in Houston). In this role, I focused heavily on using my tech knowledge to identify weaknesses and optimize efficiency through well designed systems.
I've always loved data, and I routinely told the general managers of the three locations that I could see more about what was going on in their stores by looking at spreadsheets than they could by watching the security cameras. It was while combing through sales data that I had aggregated from all locations into a single database (Supabase) that I noticed the inconsistent entering of bay rentals and identified this costly revenue leak issue.
The users were bartenders who worked across all three locations. I asked all bartenders to show me in real-time on our point of sale system how they entered bay time for customers in a specific scenario:
"a customer reserved a golf simulator for 30 minutes, but ended up staying for 53 minutes - show me how you would enter the bay rental charge in the POS."
These details are important because in this scenario, we can't charge the customer more than they used, but we have to charge them for more than they reserved. This was a common scenario. The results I got after having all 18 bartenders perform this still astound me to this day. There were three different methods used to enter the bay rental time between all 18 bartenders.
Entry Method #1: 66% would round down to the nearest quarter hour - despite being trained to utilize the calculators we kept around the POS.
Entry Method #2: 22% used the provided calculator next to the cash register to get the correct quantity. I doubt this was used in actual operations, but good on them for remembering the training.
Entry Method #3: 12% thought that entering "0.53" as the fractional quantity for 53 minutes was correct. Read that again. Here in Texas we have a phrase for this - "bless your heart."
The main complaint from my staff was that it took too long. So I began to compare the checkout workflow of orders that did not have golf bay rental items (bar guests who did not golf) to the checkout workflow of orders that did contain bay rental items.
As opposed to fixed price items, bay rentals are fractional per-unit quantity based items, and entering them forced the user to a secondary screen where manual calculations were needed to complete the task. Add on the two people snapping at you for another espresso martini and the old man asking you why he doesn't hit his driver 300 yards on the simulator... I'd probably just round down as well.
I had searched the Clover App Market more times than I care to admit using every search query I could think of, hoping I would find an existing solution. There were a few, but upon testing they all had the same problem we already faced - it disrupted the checkout workflow and caused costly delays.
I had one non-negotiable, whatever solution I designed must not disrupt the employees checkout workflow. Everything had to be quick, accessible from the main order screen, and intuitive to users. I began by studying the standard Clover layout used on the order detail screens, looking for ways I could implement my system in to their design without hindering existing functionalities.
Enter the FAB. What if I could implement a sleek, non-intrusive and fully functional floating action button that was context-aware to handle all rental tracking and fractional quantity calculations? Am I even allowed to do that?
Typically you would run into "SYSTEM_ALERT_WINDOW" issues that required user granted permissions starting with Android API 23. However, buried in the thousands of pages of Clover-SDK docs was a sentence that stated "despite our devices operating on Android API level 25 and above, we are still able to utilize the grant-at-install permission system used pre Android API 23, as clover systems have a specialized closed version of the Android OS."
Just please don't tell the dozens of people posting "How to add button to order screen?? my window overlay permission causes errors!" in the Clover developer community forums.
At this point, I've got a few buttons and I know where I'm going to put them on the order detail screens. Now it's time for critical thought and system design. What happens when the user clicks the "START TIMER" button? How does it know which items are for rentals and which ones aren't?I decided to design and develop a simple and quick one time on-boarding process that lets the user configure timer-eligible items without disrupting their existing inventory workflows.
A simple form allows them to name the item, select minute/hour unit type, and set a rate.
When users create an item in the TimeCharge full app UI - a developer identification tag is attached to the inventory item in the background. This allows conditional display of timer eligible items from the order screen FABs.
At the same time, the 'hide from inventory' function from the Clover-Android-SDK is set to 'true' - this ensures that timer eligible items can only be added to orders from the "START TIMER" FAB. They will not display alongside other listed inventory items in the native Clover order screen UI.
My one non-negotiable was that every function of the timers had to be accessible from the order screen. By utilizing context-aware design, state management, and series of XML overlay layouts to contain the interactive components, I was able to satisfy that requirement. The functionality provided by the TimeCharge application not only eliminated the revenue leakage, it decreased checkout time by optimizing an inefficient workflow, and increased employee morale.
.png)
The gif below shows a user completing what used to take 60 seconds or more in less than 7 seconds. In addition, I streamlined the workflow by allowing them to complete all required inputs from a single screen without additional navigation. Most importantly, I removed human error from the equation which led to an immediate increase in bottom line profits for the business.
Situations always arise that are outside the scope of an applications main function. As designers , we must make a strong effort to account for these. Sometimes employees will forget to start a timer, maybe they spilled a little vodka and olive juice on their fingers when they served you that extra dirty martini which caused them to misclick and delete an item that had a timer attached to it. The most efficient way to account for these and similar situations was to introduce the 'Enter Time Manually' functionality, see below.
No two merchant order screens are alike. The Clover POS, like most POS systems has many customization options available to merchant's and there's no way of telling how a merchant's order screen is customized. I addressed this issue by allowing the FAB to be re-positioned after a 500 ms long press by the user.
Easily Accessible and clearly indicated by a drawer slide on the left, allowing quick access to FAQ or support options
UI/UX & Product Design:
"Good design is obvious, great design is invisible." This was definitely a recurring theme as I designed and developed, then re-designed and re-developed (so many times) this application because it was so critical to blend in to the existing infrastructure while still being able to add a large number of additional functionalities. The context-aware aspect of the FAB widget is pivotal, and I won't lie, I have never yelled at a computer screen as loud or as many times as when I was trying to figure that out. A lot off debugging, coffee, and swear words are to thank.
Engineering & Technical:
State management was critical – ensuring timers kept running and maintained their state in the background was a challenge, but essential for usability and a core part of the overall functionality.Integrating with an existing POS system required creative workarounds – hiding timer items from the inventory screen but making them available in the “Start Timer” drop-down took deep integration with the Clover-Android-SDK.
