Frame 373.png

Starbucks China

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. 

reward program illustration.png

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. 

Original Screen.png
Group 380.png



Visuals Inconsistency 

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.

User Mood

Confused 🤔

User Mood

Confused and annoyed 😩

Group 381.png

Unclear Information


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.

User Mood

User Mood

Annoyed and impatient 😩

Confused and disappointed 😡

Group 382.png

Not Engaging 

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.

User Mood

Overwhelmed 🤯

From customers: I always forgot that I had a reward and then it expired. 

professionals profile.png
student profile.png
staff profile.png

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. 

design exploration.png
Option table.png