Starbucks premium membership experience
27 (3).png
Group 600.png

Starbucks

Membership

Redesign

Group 601.png

Client:

Starbucks China

Duration:

5 weeks

Responsibilities:

Define the problem and use cases;
Wireframe;
Build prototype for testing;
Iterate interaction;
Craft visual details.
 

Deliverables:

Interactive prototype;
High fidelity mocks;
Design files & doc;
Presentation.

 

BACKGROUND
 

Membership system

Starbucks currently has a relatively complex membership system, with members being upgraded from Welcome Level to Green Level, and finally to Gold Level. The rewards for each level are different.

Group 646.png
168.png

Find the Problem

I started to design and found the problem. In the meeting with the client, I learned the core problems of the current version are:

Frame.png

1. Low usage

Frame-1.png

2. Low stickiness

Frame-2.png

3. Users are confused

 

RESEARCH

Current version

The membership detail page is where the users check their membership level and level rewards, even further purchase. It’s an essential page for Starbucks membership.

Current version problem

  1. Membership levels and benefits are complicated and Information overload to users.

  2. The visual style of the current version is inconsistent.

Homepage

Detail Page

Group 647 (2).png

What do users think about the current version?

Found 5 current Starbucks membership users: Observation-based tasks and deep-dive interviews.

169.png

Research insights

User core pain-points:

  1. Don’t know the membership rewards.

  2. Hard to read and understand.

  3. Don’t know current rewards and how to get more rewards.

 

Goals

Design goals:

Group 578.png

  1. Consolidate the page

  2. Simplify the structure of GROUPS

  3. Provide clues for the RELATIONSHIPS between rewards and Stars

Enhance page UNDERSTANDABILITY

Group 579.png

Built visual CONSISTENCY

Business goals:

Encourage PURCHASE and membership STICKINESS.

baclground.png

Challenge & solutions

During the whole design process, I've conquered several design challenges, I'd like to share how I made decisions. 

 

CHALLENGE #1 

Reorganize structure

The problem of current information structure

  1. Unclear structure

  2. Missing information

Group 655.png
Group 655.png

The core information groups based on user needs:

Group 654.png

The groups helped consolidate the information. To better present the groups, I tried 2 layout options.

Option 2: Tab bar layout

Group 615.png
Frame (1).png
Frame (1).png
Frame.png

More consolidated interface.
Break down information into parts, better organized.
Longer interaction flow.

Option 1: Plain layout

Frame (1).png
Frame (1).png
Frame.png
Group 617.png

Concise, straightforward.
Less effort for user interaction.
Longer page.

After consideration, I went with option 1, the plain layout for more clear interaction. Although the page is a litter longer, users can easily scroll it with one swipe.

CHALLENGE #2

Redesign of accumulated coupons

In previous user tests, it was found that users could not understand the accumulated coupons of the current version. To solve this problem, I explored 3 visual options to help present the accumulated coupons.

Group 656.png
Android - 91.png
Android - 92.png
Android - 90.png

Option 1:
Individual process bar

Option 2:
Whole process bar for upgrade

Option 3:

Circle process bar

  • Clear express of Accumulated Coupons.

  • Set the right expectations of the process for users.

  • Keep consistent with other rewards.

Frame (1).png
Frame (1).png
Frame (1).png

  • Express the level-up process.

  • Less strong coupon expression.

Frame (1).png
Frame.png

  • More condense information

  • Less clear accumulated process.

  • Less consistent with other rewards.

Frame.png
Frame (1).png
Frame.png

After consideration, the option 1 fits the scenario best. 

CHALLENGE #3

How to earn rewards

In previous user tests, it was found that users could not understand the accumulated coupons of the current version. To solve this problem, I explored 3 visual options to help present the accumulated coupons.

Group 657.png
Earn star.png
Android - 88.png
Android - 87.png

Option 1: List

  • Clear layout

  • Easy to compare

  • Clear layout

  • Easy to compare

Frame (1).png
Frame (1).png

Option 2: Card

  • A more clear focus on sections.
    Less easy to interact with.

Frame (1).png
Frame.png

Option 3: Grid

  • Less scalability.

  • Less easy to scan and not visually appealing.

Frame.png
Frame.png

After consideration, the option 1 fits the scenario best. 

VALIDATE DESIGN

Usability Testing

After I get the iteration, started to test based on this version.

8 participants (4 current Starbucks users, 4 new users). Observation-based tasks and deep-dive interviews.

​

Tasks:
Use one of your membership rewards.
Earn Stars in the method you prefer.

 
Group 659 (1).png

Test feedback:

(7/8) 

(8/8) 

(8/8) 

(6/8) 

Clear about my current awards and how to use them.

Clear about how to accumulate drink coupons.

Clear about how to earn Stars and how Stars benefit me.

Like the visual style.

Design iteration

User voice:

“The rewards seem not to be ready to use.”
“Expect more attractive visuals .”

Why not make the coupon more like coupons?
- Use real-life coupons as a metaphor

Group 660.png
168.png

Final Design

Frame 591.png
Group 661.png
ezgif.com-gif-maker (9).gif
Group 602.png
 

Evaluation

I presented to the clients: Starbucks China, shared the final design and how did I make design decisions. During the meeting, we discussed design details and they gave comments:

Client feedback:

“The interface is more concise and convergent.”
“Significantly improved visual consistency, like the coupon design.”
“The users are very clear about their current rewards, and why earn stars matter”

The design was adopted by Starbucks China, and they are planning to deploy the design in 2021 July. Delivered interactive prototype, high fidelity mocks, original files, and design documentation.

Takeaways

  1. Keep user-centered design goals and business goals in mind at the same time. They are related to a certain extent.

  2. Conduct quick usability testing to support design decisions.

Also, I asked myself: “If I had more resources, what would I improve/change my design?”

  1. Talk to Starbucks’s market team to get more information about its strategic priority.

  2. Keep consistency in all the visual elements with the Starbucks design system and illustration.