top of page
.png)
Starbucks premium membership experience
Starbucks
Membership
Redesign
.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
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.
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:
1. Low usage
2. Low stickiness
3. Users are confused
Research
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.
-
Membership levels and benefits are complicated and Information overload to users.
-
The visual style of the current version is inconsistent.
Homepage
Detail Page
.png)
What do users think about the current version?
Found 5 current Starbucks membership users: Observation-based tasks and deep-dive interviews.
Research insights
User core pain-points:
-
Don’t know the membership rewards.
-
Hard to read and understand.
-
Don’t know current rewards and how to get more rewards.
Goal
Goals
Design goals:
-
Consolidate the page
-
Simplify the structure of GROUPS
-
Provide clues for the RELATIONSHIPS between rewards and Stars
Enhance page UNDERSTANDABILITY
Built visual CONSISTENCY
Business goals:
Encourage PURCHASE and membership STICKINESS.
Challenge & solutions
During the whole design process, I've conquered several design challenges, I'd like to share how I made decisions.
Challenge&solutions
CHALLENGE #1
Reorganize structure
The problem of current information structure
-
Unclear structure
-
Missing information
The core information groups based on user needs:
The groups helped consolidate the information. To better present the groups, I tried 2 layout options.
Option 2: Tab bar layout
.png)
More consolidated interface.
Break down information into parts, better organized.
Longer interaction flow.
Option 1: Plain layout
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.
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.
.png)
-
Express the level-up process.
-
Less strong coupon expression.
-
More condense information
-
Less clear accumulated process.
-
Less consistent with other rewards.
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.
Option 1: List
-
Clear layout
-
Easy to compare
-
Clear layout
-
Easy to compare
Option 2: Card
-
A more clear focus on sections.
Less easy to interact with.
Option 3: Grid
-
Less scalability.
-
Less easy to scan and not visually appealing.
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.
Usability testing
.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
Final Design
Final design
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
-
Keep user-centered design goals and business goals in mind at the same time. They are related to a certain extent.
-
Conduct quick usability testing to support design decisions.
Also, I asked myself: “If I had more resources, what would I improve/change my design?”
-
Talk to Starbucks’s market team to get more information about its strategic priority.
-
Keep consistency in all the visual elements with the Starbucks design system and illustration.
bottom of page