The Clover mobile app allows users to earn rewards at their favorite local businesses. I designed the app’s order ahead feature to be fast, friendly, and easy to use, allowing customers to skip the line to pick up their purchase.
ROLE
As a Senior Product Designer, I helped launch a new mobile ordering feature in the customer app.
RESPONSIBILITIES
UX, interaction, UI, prototyping, testing
RESULTS
Increased payments made through the app
Created a competitive advantage that increased app downloads and usage of Clover
HOW IT STARTED
Clover hackathon winner
In March 2018, Clover held an internal two-day hackathon challenging employees to bring innovative ideas for solving problems faced by merchants, customers, internal teams, or third-party developers.
My team, hackers4life, presented our project called ‘Auto Order’ and won. We were awarded a fancy lunch in Soho and the opportunity to extend our quick pitch into a product feature epic on the company’s roadmap. Six months later, mobile ordering capabilities were live in the Clover app.
Auto Order hackathon pitch + demo:
PILOT LAUNCH
Adding mobile ordering to the Clover app
To launch this new feature quickly, we simplified the process and minimized barriers. To meet our team's tight deadline for the pilot, I relied heavily on existing UI patterns and functionality with the goal of adding more refinements in future releases.
The merchant view gets a new tab
The Clover app's merchant view displays all the perks offered at a business location and the user's progress towards earning those rewards. While displaying an entire menu was out of scope for the pilot launch, steps were taken towards this goal by including a user's past orders that have been validated through the app. To accommodate a potentially long list of menu items, the space under the business information is divided into two tabs. The default tab displays the merchant's "Perks", and the second tab contains the user's past purchases.
For the pilot launch, "Re-order" is used instead of "Order ahead" to prevent confusion, as users can only order items they've previously bought in person. A message explaining this feature is shown for first-time users, and menu items are displayed using the existing card UI pattern and functionality.
Ordering and payment
Relying on existing functionality from autopay, I designed an order drawer at the bottom of the screen that updates when "Order it again" on the menu item cards is tapped.
Order preview:
Up arrow indicator (to show users they can tap or slide it up)
Number of items
Total amount
Text for tax inclusion
Text for tip inclusion (autotip: recurring tip added automatically)
Place order button (skips the order expanded view for quick ordering)
Expanded view:
Merchant name and pickup location
Item details, including modifiers that the customer previously requested
Item quantity (editable)
Subtotal, taxes, tip, and payment method (editable)
Adding in redeemable perks
In addition to the existing redeemable card state in the “Perks” tab, earned rewards are highlighted in the order preview and displayed in the expanded order view.
Order success
The order ahead success state is a confirmation receipt that displays directions on what the user should do next, points earned from purchase and the payment total. An order pickup notification is also displayed on the main screen, of the app.
