Product design

Clover Tips App

Android, web

Services

Product design lead

Company

Clover is a point-of-sale company, providing apps for each business type owner to customize their own experience. As their first designer, I contributed on 9 Clover products. Product scope: Android and web apps, packaging, print, hardware, and internationalization.

Context

One of Clover’s 30+ core apps, Tips allows employees and managers to enter tips from paper receipts. This merchant-facing app gave users a way to look up specific transactions by searching or scanning receipt barcode. The ability to enter tips is integrated amongst other core apps: Setup, Transactions, Orders, Shifts, Closeout, and Payment.

Problem

Clover launched the Clover Station, an upgraded hardware with a larger screen and sleeker materials, giving it a more modern look. With not much time to transition, many apps were still on outdated versions of Android that were sized for a smaller screen. This meant visual and usability inconsistencies.

Original version of Tips app list view on first Clover device

Customer Support tickets related to the Tips app consistently asked how to best enter tips before closing out. With Clover supporting so many business types, we knew we needed to revisit tipping across restaurant and service businesses.

Original version of entering Tips on first Clover device

Original version of entering Tips on new Clover Station

Goal

Apply newest app branding and usability patterns to Tips, optimized for the larger Clover Station screen. In the fast-paced environment, success was measured by the reduction in related Support tickets.

My role and research

As the design lead, I teamed up with the user researcher to go over the gaps in how Tips was being used: How were managers using Tips? How were employees using Tips? How was entering tips different for a restaurant business versus a service business?

Highlighting inconsistencies and problem areas

New insights:

  • Managers commonly used Tips at the end of business day to enter missed tips and/or check all employee entered tips. They needed a way to also edit an already entered tip, if needed. Many were determined to find a point-of-sale system that matched their process, rather than alter their process to fit a point-of-sale.
  • Employees either entered their tips as they received them during their shift or all together at the end of their shift.

Both prioritized transaction number, last four digits of credit card used, transaction subtotal amount for referencing the correct transaction when entering tips.

Simplified flow

In-house testing involved high-fidelity mockups to determine the visual hierarchy of key sections and identify the most effective workflow

Solution

Research insights helped guide what individual transaction information was missing and what needed to be added. After knowing the bare essentials, I applied the new Clover app design guidelines and refined the typography for merchant and employee behaviors.

See more details behind the Clover Brand.

During the tip entry process, for quicker and accurate entries, increasing the number pad touch points was a top priority. Individual transaction information displayed catered to both merchant and employee needs.

Final version covered four tip entry scenarios:

ONE — (Default)
No existing tip,
Entry by tip

TWO
No existing tip,
Entry by total

THREE
Existing tip,
Edit by tip amount

FOUR
Existing tip,
Edit by total amount

Impact

Multiple business owners called in to Support, sharing that all general app updates we were making had helped increase their business efficiency. One quick service restaurant owner estimated his business efficiency had increased by 30% per customer. He was able to process more customers per hour, leading to many more sales by the end of the day.

See how Tips app designs extended to the Clover Core Apps.