This project collaborates with a product manager from Starbucks China, and the project aims to demystify the current Rewards Program. We redesigned the homepage and the information architecture behind profiles to improve users’ interaction with the app and reduce their cognitive load while participating the Rewards Program.
The Starbucks China Rewards Program consists of three tiers of membership: Silver, Jade and Gold.
The presentation of the tier system of the App is complicated for members to track their tier level and redeem the rewards they earn.
Here are current problems to be solved from the design team :
1. The homepage and My Rewards Page stylistically do not match
2. The visualizations for each tier are inconsistent
3. The homepage presents star balance in decimal point
4. The content of membership mechanism on Rewards Page needs optimization and improvement
The objective for the research was to gather more qualitative data of users’ experience and identify users’ needs and pain points using Starbucks Rewards.
We built the site map to understand users’ journey navigating the app and their journey obtaining certain Rewards information. The site map contains many levels and it takes time for users to land to the page showing Rewards information. It also takes multiple steps to find out the meaning behind Tier Stars and Reward Stars.
We interviwed 8 active users regarding their past experience and their overall understanding towards Rewards Program. The questions were focused on:
1. Purchasing habits at Starbucks
2. Reasons of downloading the mobile App
3. How do they know about the Rewards Program
4. Awareness of the difference between “Tier Stars” and “Rewards Stars”
5. Spending requirements for earning a “Tier/Reward star”
6. Overall mobile App experience
“The offers are useless to me.”
“There seems a lot of gimmick in the app.”
“Every time I can't figure out what do those coupons mean, I feel spending more money instead, so I don't want to redeem them.”
“I acknowledge the direct offers rather than my Tier level.”
“I have no idea that I have to earn stars to maintain my Tier level.”
“I couldn't figure out what the rules were, so it doesn't bother me at all.”
There were 6 most prominent insights based on the answers we received.
· Tier level: Users are not aware of which tier they are at.
· “Tier Star” and “Gift Star”: The functions of the two stars are different, while the visual presentations are alike. It’s unable for users to distinguish them.
· Hidden entry point: The explanation between the two star is hidden in the membership benefits, and users cannot find the entry point.
· Confusing coupons: Users can see that there are coupons, but they don't know what they are.
· Scattered information: Offers information and level information is scattered on different pages.
· Users need to go to different tabs/pages to view star records and spending history, it is difficult to intuitively see the correspondence between dollar amounts and the stars
· Star records are difficult to find because it hides in rules page
1. Present the most important information available to the user intuitively.
2. Avoid explaining or over-presenting the rules and mechanism of the Rewards Program
We conducted competitor analysis of other rewards program and brainstormed potential solutions. We later put them into a prioritization matric.
Our idea splits into two parts, and sketched our ideas based on the previous interface design.
1. To make the key info (the most relevant and essential rewards to redeem, the coupon information and the tier level) accessible on the homepage;
2. users can also get access to the expense info clearly in their Consumption History page.
In order to evaluate the effectiveness of our design, we conducted usability tests with 17 users. They were asked to do complete the following tasks. We also asked what users feel about the overall experience.
1. Find your current tier status
2. Identify your redeemable coupons
3. Identify how much one has to spend to accumulate a star
16/17 users recognized the design as effective and they liked how they could access information fast, they were able to see all the rewards related information; however, one user pointed out that it is possible to miss the floating button.
Based on feedback from usability test, we iterated on:
1. Corresponding floating button for each tier to re-emphasize the concept of membership levels
2. Display status change and star redeem transactions in history as well
Homepage of Gold Tier Membership
Differentiation of three tiers
Transactions history page
