1200px-Starbucks_Coffee 3.png

"Do not Let me Think"

Starbucks membership product redesign

Mockups.png
Group 2584.png
​Skills - user testing, user interviews, research, prototyping, and UI/Visual design. 
Gradient

This membership system is too complicated for me to understand. There are so many tricks and regulations here but I just want to drink coffee. Do not let me think!

------------  Jennie, Starbucks membership in China

1200px-Starbucks_Coffee 3.png

Starbucks membership app in China is confusing for customers

Through 5-star user interviews and research on design rules, we have learned the following existing problems:

Existing Levels

Homepage

Group 2589.png
Negative squared cross mark.png

The different level uses different data visualization to display the progress of membership which makes users confused.

Negative squared cross mark.png

Member rights are not transparent

Negative squared cross mark.png

Member rights are not transparent

Existing Gold level homepage

Group 2589.png
Negative squared cross mark.png

The style of the member homepage and details page is not matched

Existing Gold level Detail page

Group 2589.png
Negative squared cross mark.png

The display of the membership mechanism is chaotic and complicated.

Negative squared cross mark.png

Data visualization is confusing. Users do not know the meaning of the symbol of “star”.

1200px-Starbucks_Coffee 3.png

What Customers Say:

We interview 8 Starbucks membership members and understand their concerns and requirements.

4.png

I do not understand Starbucks rewards and I do not want to understand, now it is too complicated to understand

6.png

I do not know which level I am.

5.png

I do not know how to upgrade and how to keep my rewards and level.

3.png

What is the difference between “rewards star” and “level star”? How can I get stars?

aergarg.png

At the gold level, I do not understand the meaning of “star”. What happened when this “ star” is filled?

Avatar.png

I feel frustrated when I try to understand regulation policy of Starbucks membership because I never understand

1200px-Starbucks_Coffee 3.png

Set the KPI based on customers needs and feedback

Gradient

1. Improve the recognition of customers about the membership rewards

Users understand their current level and stars, accumulate progress, what goals and rewards can be obtained, users understand the meaning of decimals

2. Help customers understand the regulation of membership correctly.

Users understand different levels of membership rules (how to upgrade to get gifts) Users understand different levels of membership rights

Gradient

3. Motivate users to upgrade and redeem gifts to promote the consumption

Users know their accumulation progress at any time, are motivated to consume continuously, upgrade to get good gift

1200px-Starbucks_Coffee 3.png

Brainstorm ideas to find different solutions

Design Solutions for KPI 1

Improve the recognition of customers about the membership rewards Homepage

On the Mobile home page, to reach the KPI, we come up with different ideas of data visualization to explain the rewards, membership level, and level process.

Progress bar to explain the progress

Group 2591.png

Donut chart to display the progress of the membership

Group 2591.png

User “Star” symbol with the number to explain how many star points the customer already got.

“Cup” symbol with the number to explain how many stars points the customer already got.

On the membership detail page, we use the different strategies to reach the approach

Help customers understand the regulation of membership correctly in membership detail page

Design Solutions for KPI 2

Group 2592.png

Display all detailed rewards and regulation of membership system

Group 2592.png

Comparison chart of different levels of membership rewards and rules

Group 2592.png

Explain separately about the meaning of “level star” and meaning of “gift star”

Design Solutions for KPI 3

Motivate users to upgrade and redeem gifts to promote the consumption

To achieve the goal, we try to display more information about rewards and add new features.

Group 2593.png

New feature: Order Now
to motivate customers to order a drink immediately

Group 2593.png

Remind users of the coming expired star points

Group 2593.png

Display the rewards of the next level of membership if users consume more to upgrade.

Validating interaction methods by user testing

For more than 10 users testing, we use 5 seconds testing method to let the user choose their preferred interface design

Validating interaction methods by user testing

For more than 10 users testing, we use 5 seconds testing method to let the user choose their preferred interface design

Homepage redesign solutions

Group 2594.png
Group 2594.png

Most of users choose Design 1 & 5 as their expectation

1. Show the most useful information on the homepage.
2. The most important information for users: existing membership levels, differences between
existing stars and target stars, what kind of rewards are obtained.
3. Users don’t care about the source of the decimal point, but more concerned about the
difference between the existing star points and the target star points.

Membership detail page redesign solutions

Group 2595.png
Group 2595.png

Most of users choose Design 1 & 2 as their expectation

1. The membership details page displays comprehensive information to encourage users to consume,
quick upgrades and get redeem gifts
2. Users care about real-time rewards, fast level upgrades and get gifts
3. “Comparison chart of different levels of membership rewards” are praised, but users think it can
be placed on other pages because they are second-level information.

Group 2596.png
Group 2596.png
Group 2596.png

A Different Data Visualization Design in Gold Level solutions

Most of the users choose Design 1 & 4 as their expectation

1. In Green level and Silver level, users think the homepage is clearer and easier to understand with the progress bar
2. In Gold level, users hope star points need to reflect the relationship between "star points that can
be redeemed for good gifts" and "the progress of the next good gift".
3. In Gold level, about data visualization, users like the symbol of “stars” than the symbol of “cup”

1200px-Starbucks_Coffee 3.png

Final Design Solution

Based on the user testing result we combine the design approach which most achieves users’ expectations and decides our final design solution for the Starbucks membership rewards system

Mockups.png
Mockups.png
Mockups.png

KPI 1: Improve the recognition of customers about the membership rewards Homepage

1200px-Starbucks_Coffee 3.png

Important design pattern iterations

Group 2604.png
Negative squared cross mark.png

Users cannot understand what level they are, do not understand the data visualization of Gifts Star points, and do not know how far they are from the next gift

Group 2604.png
White heavy check mark.png

The New design reflects the relationship between "stars that can be redeemed for gifts" and "the progress of the next gift", differentiates expressions, and improves awareness of membership rules and rights

KPI 2: Help customers understand the regulation of membership correctly on the membership detail page

Group 2600.png
Negative squared cross mark.png

Users cannot understand the data visualization of Good Gifts Star, do not understand the gap from the target, and do not understand the benefits of Venus

Group 2600.png
White heavy check mark.png

Clearly express comprehensive information based on the homepage
Remind users that gifts and stars that are about to expire can help users better understand their rights and promote consumption

KPI 3: Motivate users to upgrade and redeem gifts to promote consumption

Group 2606.png
Negative squared cross mark.png

Use the progress bar to clearly express that users understand their current level and stars, accumulate progress, what goals and rewards can be obtained, and improve the awareness of membership rules and rights

White heavy check mark.png

The user cannot understand what level he is in and does not understand the meaning of 2/4

1200px-Starbucks_Coffee 3.png

Outcome and Effects

Group 2602.png

I like the new symbol of "Smiling Star"

Its funny and cute expressions

Customers like the new design

Pink Gradient
Avatar09.png

“I like the new design, the catalog is clear at a glance, I can quickly understand the gift certificate information obtained by my stars, my level information and benefits”

Avatar16.png

“New design presents more information. I don’t need to click on other pages to get all the information I want to know.”

Gradient
Avatar20.png

“I really like the white design. It is intuitive, comfortable, and not boring. The interface page looks good. The black page is boring. I have no desire to read”