The gamification of the reward experience for Starbucks' mobile app.
Client Project | UX/ UI Design | User Research
Starbucks is well-known for its reward program that offers great value and brings customer loyalty. However, Starbucks China’s reward program is a bit complicated which makes the mobile reward experience not that clear and engaging. The inconsistent design pattern very often confuses users.
Under the initiative to re-design the mobile rewards experience, my team designed a new gamified rewards dashboard. The project goal is to increase mobile traffic and customer engagement with the rewards features and benefits content.
User research and concept validation
Defining the end-to-end experience, user journey/flows
Using Figma and Principle to create interactive prototypes for testing and interaction
Jul 2020 - Aug 2020
Figma, Principle, Miro, Paper and Pen
A complicated rewards program.
Not like the rewards program in US, Starbuck China’s reward program has three different levels, Welcome Level, Green Level, and Gold Level and at each level, members will receive member benefits corresponding to the level. In addition, they need to collect a certain amount of stars to move to the next level.
In addition, the amount you paid divided by 50 and rounded to the fourth decimal place is the number of stars you earned. So the number of the start is not always an integer.
From the client: How to make it more engaging and consistent?
Starbucks China came to us with their current design. We were asked to redesign the member info on the home page and reward and benefit detail page that users could access thru the info on the homepage, which the content will change based on the level users are at.
The prompt we got from the client is how to make the current design more engaging and consistent. In order to better understand the problem, we did a heuristic evaluation of the current design and identified key problems within the existing flow.
Inconsistent Progress Indicator
Users navigate from homepage to detail benefits page by tabbing the progress bar and the sentence below.
Every time when users upgrade to the next level, the detail rewards and benefit page will change accordingly.
The desgin on the homepage is inconsistent with the rewards details page in terms of the color, font size is used. Feeling a lack of connection between home these two pages.
The progress indicator on the homepage is a progress bar, but on detail page is a donut progress chart. Moreover, for welcome level and green level is the donut progress chart, but gold level is a star that can be filled. This increases the learning cost for users.
Confused and annoyed 😩
Different number of stars
Unclear Benefits & Progress
Users can view how many starts they have collected both on the homepage and on the detailed rewards and benefits page.
The detailed page will show the benefits according to the level users are at.
The number of stars has a decimal due to the way of calculating. But on the homepage, it only shows the integer part of the total number, but the detail page shows the decimal. This is unfriendly for new users since even they have purchased something, it will only show 0 star on the home page.
The detail page shows the benefits and progress of current level and next level, for example, if users are at green level it shows the benefits and progress indicators of green level and gold level. Too much information can discourage understanding and exploration.
Annoyed and impatient 😩
Confused and disappointed 😡
It is just too much and not fun
For the deatiled page, there are a lot of information for users to process on this single page that users don’t really want to check it out every time like the part about how to earn stars.
From customers: I always forgot that I had a reward and then it expired.
We also did interviews with about 10 customers, who have become members of the rewards program for a long time and also customers who just became members. We found out that these problems:
Just too complex to know the basic things at first glance.
The rewards program is complicated, and the way that the app showing the information now is not easy for users to follow and understand all the rules.
Customers need something to remind them if they have a reward in the account.
The current design doesn’t highlight what reward they can get and what reward they have. So people just always forget they have a reward and it expires before using it.
Based on what we learnt from customers and client, we were able to define the problem statement.
How could we design a mobile reward experience that is engaging and informationally clear to help customers easily understand the reward program and redeem the rewards?
Zooming out - the overall design
After finding out the specific problem, we decided to do an exploration of different styles of design. Based on the research we did of the current market, we came to these four dramatically different versions.