Fivestars
Fivestars Pay
Redefining rewards in an identity driven payment terminal.
The Fivestars in-store experience started as a stand alone loyalty tablet where consumers could signup, earn points, and redeem rewards. In 2018 we launched a new loyalty integrated payment terminal that 4x consumer signups. During the product alpha stage we gathered key findings on how to elevate the user experience in order to create a one-of-a-kind reward redemption experience.
The objective of this project was to take those findings and iterate to take the MVP product to GA.
ROLE
Product Designer
WHEN
2019
Platform
Web App
The problem
Despite significant increases to consumer signups, merchants preferred the legacy product because of impacts on line speed and reward visibility.
– Merchant, Comfort Zone Cafe
“I miss the old Fivestars loyalty experience. Where it is easier for my customers to see rewards.”
– Merchant, AK Subs
“I want to check to see if I have any rewards before checking out.”
– Consumer
Existing alpha flow
The goal
How might we make the rewards experience faster and easier?
More specifically
- Increase transaction speed
- Increase consumer satisfaction
- Reduce merchant churn/rollbacks
Proposed solution
Make the loyalty checkin and order creation simultaneous
By front loading the checkin and reward selection, we stacked consumer and merchant tasks making the overall flow faster. Removing the back and forth on the POS also eliminated a major pain point and reduced friction for the merchant.
New flow
Design explorations
Early check-in UI
Finding the balance of friction
The first UI design challenge I tackled was figuring out how to communicate the consumer’s progress to the merchant. Should we alert the merchant to every consumer interaction or only when a reward is redeemed? Should alerts be small and ignorable or big and blocking?
<span data-metadata=""><span data-buffer="">Feedback from
developers and users
After gathering feedback from the engineers on my scrum team and interviewing several Fivestars merchants, I decided to proceed with the overlay modal solution.
Use existing integration
real estate
To optimize the dev effort in the first iteration we agreed that the we would limit the UI to the real estate that was already integrated onto the POS: app icon, initiate payment button, and payment screen modal.
Be loud, but only
when necessary
For the merchant to acknowledge the alert 100% of the time, we need to be loud and blocking. But this level of awareness is only needed when they have to take action.
Merchants want
to see rewards
To provide merchants with visibility and control over the reward redemption process, we need to mirror the consumer experience (points, available rewards and selected rewards) on the POS.
UX Research
Overall, moving rewards was a huge success but some UI updates were needed to make the experience seamless.
After further refinement of the modal designs I conducted another round of research. This round consisted of 6 moderated concept tests and interviews with Fivestars merchants, as well as 8 unmoderated usability tests on Usertesting.com.
Final Solution
The impact
Consumer experience score
Goal: 90%
2020 net promoter score
Up from 16 in 2019 (prior to Early Check-in launch)
Consumer experience score
Up from 4.71
Merchant Perceived speed
Up from 3.66
