Integrate a new multi-tiered Starbucks Rewards program
✦ Problem ⋯ How to do we integrate a new multi-tier Starbucks Rewards program into the app (iOS & Android) and web experiences?
✦ Role ⋯ UX designer, UX writer
✦ Deliverables ⋯ Design, UX copy, Product voice & tone guide
✦ Tools ⋯ Sketch, Zeplin, Abstract, Jira
Project timeline and my place in it
I was one of 3 designers, 2 researchers and 1 manager who worked on this year-long end-to-end project from initial explorations to launch in 2019.
We worked closely with product management, creative studio and business owners to create a clear and inspiring experience for Starbucks Rewards members for iOS, Android and web experiences. That included a homescreen tracker module, and the details and how it works pages.
In the discovery phase, I worked on the initial user flows, Rewards tracker concepts, the information architecture, and the language of the program. During the build phase, I focused on fit and finish details with iOS, Android engineers.
Tools and skills used
I worked on initial user flows, Rewards tracker explorations and the information architecture and UI of the Rewards Program detail page in Sketch. I used Abstract for design collaboration and Zeplin and Jira for handoffs.
Tracker explorations
The final tracker with tooltip dropdown
Rewards details page with contextual nudges and program info
A bit on how we got there
To get started, I used a list of questions customers we’d expect customers to ask so they can understand the program.
- How do I order and pay?
- Why should I participate?
- What are Stars and rewards?
- How do I earn free items?
- What do I get for different numbers of Stars?
- How many Stars do I need for different products?
- How do I track my progress?
- How’s this different from before? (for existing users)
As a team, we came up with a number of UI solutions with the goal of creating a simple and inspiring guide to the program.
We prepared designs for 4 rounds of usability testing to hone in on the most successful designs.
During our iterative testing approach, we learned and shared with business stakeholders that the program shouldn’t require interpretation or insider knowledge. Usability results pointed us to the fact that people related their Stars (what you collect toward free items) to currency and wanted to quickly see all the ways they could spend them. When customers thought about rewards and Stars, they used the mental model of currency.
This guided us toward a solution of a clean, Star tracker and tooltip, alongside a Star balance in one, easy to digest homescreen expandable card. Customers who tested this design had an accurate understanding of the program and redeemed for an item the fastest.
Stars being presented as a trackable balance helped tie orders to rewards and let customers estimate how many orders it might take to earn their next reward. We tested dashboard-like variants that included more analysis: how many Stars you earned in a given period, averages, tracking an item, and breakdowns of the mix of tiers customers could redeem with their Star balance. These designs produced more errors in understanding and redemption tasks at the register. This approach created a sense of complexity customers didn’t want during what they perceived as the simple task of grabbing coffee.
Takeaways and what I learned
We were able to launch the program with better customer satisfaction and fewer bugs than the previous update. Design directly impacted programmatic KPIs and customer satisfaction by focusing on simplicity and the user goal of a speedy and clear transaction backed by usability research. This was a true team effort within a very admirable organization. I'm very lucky to have had this as an example of how to get a big end-to-end project done in a thoughtful and collaborative way.
