How to do we integrate a new multi-tier Starbucks Rewards program into the app and web experiences?
The goal of the Starbucks Rewards program redesign was to increase customer participation by making it easier for customers to gauge their status, progress to their next reward, and the perks of being a member. I was a UX designer and writer on this year-long project.
The design solution had to effectively:
- Show how the program has changed
- Create an intuitive mechanism for customers to track earned Stars
- Make it easy to see what a customer can redeem Stars for within multiple tiers
- Encourage customers to participate
- Celebrate member achievements 🎉
The tracker displays the tiers and helps customers track their progress and help users reference what items are eligible at each tier with a quick tap. Seeing all the options helps reinforce the levels against each other when folks order ahead or pay in the store.
The Starbucks Rewards details screen shows how the program works and summarizes a customer’s progress. Friendly nudges help to contextualize progress. This screen also reinforces which products are in which tiers.
How we got here
Our goal was to help our customers understand when they approach us with:
• How do I order and pay?
• Why should I participate?
• What are Stars and rewards? (How much do I need? What do I get for Stars? How do I earn them?)
• How do I track my progress?
• How’s this different from before? (for existing users)
Based on our UX research findings, our task was going to be to encourage our stakeholders to reduce customer-facing complexity
Our labels and copy would have to be descriptive of the types of products or categories and to avoid naming or branding tiers or elements of the program
Based on the team’s UX research, explicit, concrete labels performed better than both abstract names, just Star numbers, and product examples in lieu of labels.
Explicit language that spoke to the types of products in a tier (not just a specific product) alleviated the need for customers to learn and remember. This worked for new and existing customers who may not visit enough to remember what’s in a tier, or people who normally redeem for one tier—or type of item—and need a quick reminder of other options. People’s recall of what is in each tier, and at what Star cost, was very low. People needed a quick reminder in one, easy to digest view.
The benefit of clarity would prove itself out in reducing transaction time and line length. Baristas wouldn't need to train customers as much on the dynamics of the program, especially the tiers. The program should not require interpretation or insider knowledge. I personally championed clear language and a flat IA, that could ensure people formed an accurate understanding of the program.
Use mental models of currency
In three studies we ran, customers understood their Stars as a currency and wanted to easily see all the ways they could spend them. When customers thought about rewards and Stars, they used the concept s of currency to clarify it to themselves how the program works.
Less math is more
Stars being presented as a trackable balance helped connect orders to rewards and let customers estimate how many orders it would take to earn a reward. We tested variants that included more dashboard-like measures like how many Stars you earned in a given period, averages, and additional tracking and breakdowns of the mix of tiers customers could redeem at based on their Star balance.
