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.
" I like how option 1 has this pulling interaction which really helps me build the connection between the home page and detailed page. "
"Naturally, I feel the detailed page is something for me to know more about the information presented on the homepage. I like the gamification idea, it makes the collecting process fun and makes me want to always check it, and encourage me to earn more stars. "
Based on the testing we did with customers, we chose to combine option 1 and 2. And we decided to use a tab design to separate the content that used to be on a single detailed page. This pattern is used by Starbucks in many other pages of the app.
Zooming in - the details of information on homepage
In order to understand what users really looking like and don’t like the progress indicator on the home page, we listed a few options of progress indicator for testing.
Because of space limitations, all of the options we listed were bars. Most users prefer the progress car with all levels, since it gave them a sense of where they are in the entire process of collecting star. Combining with the idea of the roadmap, it is good for users to have a general sense and then if they want to know more detail, the roadmap can show a more detailed process.
In order to solve the problem of different numbers shown on the homepage and the detailed page. We here list a few options to show the number, which includes a number with decimal or without, and also want to test if the users want to highlight the integer.
As a result, users are not annoyed by having the decimal, as long as on the homepage and detailed page showing the same number. So most users prefer the option C.
Here is our design of the reward program information on the homepage. Also, in order to highlight the consistency and continuity between the homepage and the detailed page. We used pull-down interaction here. So the top part of the detailed page is the same as the information on the homepage.
Gamifying the process of earning stars
As we decided that we wanted to take a disruptive way of redesigning the reward progress through gamification, we think about the process of earning stars as a journey that has a final destination of going to the next level and rewards if you have earned enough stars. So we decided to use a roadmap to show the process. We did some explorations:
After testing, we actually chose none of the options listed above. We came up with a new version, and this is the most organized and most sense of journey for users. Here is the roadmap for welcome and green level
However, our client raised a very important question about the roadmap for the green level.
I think the map is excellent on encourage people to earn more stars. But when there are too many steps, like for here you need 16 stars to move to the next level, it actually will discourage people from moving forward.
It is a really good aspect of gamification that we should take into consideration. So we did testings with following options that make the green level have a balance between engaging and consistency.
After testing we chose option 2, which makes people focus on the current status at the same time have the details of how many stars they have collected as a accompany of the overall status of the progress on the top of the page.
Balance consistency and clarity
The Gold level doesn’t have a next level to upgrade, so the rules are a little bit different. Initially we focus too much on purchasing consistency but ignoring the importance of conveying information clearly.
Previous we had the design of the progress indicator the same as the welcome and green level. However, we actually found out that actually confused users about the rules. So we changed that to focus on conveying the idea of reward star. Also as our client mention, from business aspects, they didn’t want to highlight the information if the customers have kept the gold status.
For the map, since we focus on the rewards. We also adopted a different design, inspired by one of our early ideas.
Since our client is Starbucks China, we also designed in Chinese.
Starbucks does have a style guide We followed the guide in terms of color, font. We created our own components and icons with the consideration of scalability.