Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

©

by

in 2024

Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

Hi 👋 I’m Jingxuan Yu, a passionate product designer based in New York. I’m dedicated to achieving a harmonious blend of experience and aesthetics. I endeavor to make intelligence more tangible through designs that resonate with users on a deeper level.

15:45

Mar 28, 2024

Membership Redesign

Background

Starbucks China aims to enhance its mobile app’s experience to encourage more users to join, make purchase, and remain active.

  • Redesign for member & rewards display

  • Focused on home information display

As a UI/UX contractor, I collaborated with the Starbucks China app team to redesign the information architecture for their membership display, with a focus on the app's home screen and dedicated membership screen. Our objective was to develop an improved solution that would incentivize more users to join the membership program and foster long-term engagement.

Background

Starbucks China aims to enhance its mobile app’s experience to encourage more users to join, make purchase, and remain active.

  • Redesign for member & rewards display

  • Focused on home information display

As a UI/UX contractor, I collaborated with the Starbucks China app team to redesign the information architecture for their membership display, with a focus on the app's home screen and dedicated membership screen. Our objective was to develop an improved solution that would incentivize more users to join the membership program and foster long-term engagement.

Background

Starbucks China aims to enhance its mobile app’s experience to encourage more users to join, make purchase, and remain active.

  • Redesign for member & rewards display

  • Focused on home information display

As a UI/UX contractor, I collaborated with the Starbucks China app team to redesign the information architecture for their membership display, with a focus on the app's home screen and dedicated membership screen. Our objective was to develop an improved solution that would incentivize more users to join the membership program and foster long-term engagement.

Background

Starbucks China aims to enhance its mobile app’s experience to encourage more users to join, make purchase, and remain active.

  • Redesign for member & rewards display

  • Focused on home information display

As a UI/UX contractor, I collaborated with the Starbucks China app team to redesign the information architecture for their membership display, with a focus on the app's home screen and dedicated membership screen. Our objective was to develop an improved solution that would incentivize more users to join the membership program and foster long-term engagement.

Background

Starbucks China aims to enhance its mobile app’s experience to encourage more users to join, make purchase, and remain active.

  • Redesign for member & rewards display

  • Focused on home information display

As a UI/UX contractor, I collaborated with the Starbucks China app team to redesign the information architecture for their membership display, with a focus on the app's home screen and dedicated membership screen. Our objective was to develop an improved solution that would incentivize more users to join the membership program and foster long-term engagement.

The Team

Qu Rou

Crystal Lin

Junru Xu

Abby Chen

Iris Cheong

The Team

Qu Rou

Crystal Lin

Junru Xu

Abby Chen

Iris Cheong

The Team

Qu Rou

Crystal Lin

Junru Xu

Abby Chen

Iris Cheong

The Team

Qu Rou

Crystal Lin

Junru Xu

Abby Chen

Iris Cheong

The Team

Qu Rou

Crystal Lin

Junru Xu

Abby Chen

Iris Cheong

My Role

UX/UI Designer

My Role

UX/UI Designer

My Role

UX/UI Designer

My Role

UX/UI Designer

My Role

UX/UI Designer

My Work

User Research

Design Audit

Task Prioritization

High-Fidelity Screen Design

Test & Iteration

My Work

User Research

Design Audit

Task Prioritization

High-Fidelity Screen Design

Test & Iteration

My Work

User Research

Design Audit

Task Prioritization

High-Fidelity Screen Design

Test & Iteration

My Work

User Research

Design Audit

Task Prioritization

High-Fidelity Screen Design

Test & Iteration

My Work

User Research

Design Audit

Task Prioritization

High-Fidelity Screen Design

Test & Iteration

Partners

Client: Starbucks

Partners

Client: Starbucks

Partners

Client: Starbucks

Partners

Client: Starbucks

Partners

Client: Starbucks

Duration

1 month

Duration

1 month

Duration

1 month

Duration

1 month

Duration

1 month

Problem

Data showed customer enrollment and activity scores were not performing well. How can design help?

  • Low enthusiasm in redeeming rewards

  • Low engagement in relevant activities

Membership has been a crucial part of Starbucks' business strategy. However, according to mobile app data, Chinese customers exhibited lower enthusiasm for joining as members. We aimed to delve deeper into understanding this issue, particularly exploring how the membership product design could be improved to enhance user engagement.

Problem

Data showed customer enrollment and activity scores were not performing well. How can design help?

  • Low enthusiasm in redeeming rewards

  • Low engagement in relevant activities

Membership has been a crucial part of Starbucks' business strategy. However, according to mobile app data, Chinese customers exhibited lower enthusiasm for joining as members. We aimed to delve deeper into understanding this issue, particularly exploring how the membership product design could be improved to enhance user engagement.

Problem

Data showed customer enrollment and activity scores were not performing well. How can design help?

  • Low enthusiasm in redeeming rewards

  • Low engagement in relevant activities

Membership has been a crucial part of Starbucks' business strategy. However, according to mobile app data, Chinese customers exhibited lower enthusiasm for joining as members. We aimed to delve deeper into understanding this issue, particularly exploring how the membership product design could be improved to enhance user engagement.

Problem

Data showed customer enrollment and activity scores were not performing well. How can design help?

  • Low enthusiasm in redeeming rewards

  • Low engagement in relevant activities

Membership has been a crucial part of Starbucks' business strategy. However, according to mobile app data, Chinese customers exhibited lower enthusiasm for joining as members. We aimed to delve deeper into understanding this issue, particularly exploring how the membership product design could be improved to enhance user engagement.

Problem

Data showed customer enrollment and activity scores were not performing well. How can design help?

  • Low enthusiasm in redeeming rewards

  • Low engagement in relevant activities

Membership has been a crucial part of Starbucks' business strategy. However, according to mobile app data, Chinese customers exhibited lower enthusiasm for joining as members. We aimed to delve deeper into understanding this issue, particularly exploring how the membership product design could be improved to enhance user engagement.

User Research

Product requests ≠ User needs. By interviewing 5 customers and having them perform tasks such as redeeming rewards, I could validate the actual needs.

  • Opaque member benefit

  • Unclear reward visualization

  • Failed to explain rules well

The business objectives requested to attract more loyalty members, promote class upgrades for Silver and Jade tiers, and incentivize purchases through rewards and benefits for Gold tier. The requirements were broad and ambiguous in terms of how to proceed with design. Thus, I collaborated with another designer to interview 5 candidates, trying to validate things that could really help users.

User Research

Product requests ≠ User needs. By interviewing 5 customers and having them perform tasks such as redeeming rewards, I could validate the actual needs.

  • Opaque member benefit

  • Unclear reward visualization

  • Failed to explain rules well

The business objectives requested to attract more loyalty members, promote class upgrades for Silver and Jade tiers, and incentivize purchases through rewards and benefits for Gold tier. The requirements were broad and ambiguous in terms of how to proceed with design. Thus, I collaborated with another designer to interview 5 candidates, trying to validate things that could really help users.

User Research

Product requests ≠ User needs. By interviewing 5 customers and having them perform tasks such as redeeming rewards, I could validate the actual needs.

  • Opaque member benefit

  • Unclear reward visualization

  • Failed to explain rules well

The business objectives requested to attract more loyalty members, promote class upgrades for Silver and Jade tiers, and incentivize purchases through rewards and benefits for Gold tier. The requirements were broad and ambiguous in terms of how to proceed with design. Thus, I collaborated with another designer to interview 5 candidates, trying to validate things that could really help users.

User Research

Product requests ≠ User needs. By interviewing 5 customers and having them perform tasks such as redeeming rewards, I could validate the actual needs.

  • Opaque member benefit

  • Unclear reward visualization

  • Failed to explain rules well

The business objectives requested to attract more loyalty members, promote class upgrades for Silver and Jade tiers, and incentivize purchases through rewards and benefits for Gold tier. The requirements were broad and ambiguous in terms of how to proceed with design. Thus, I collaborated with another designer to interview 5 candidates, trying to validate things that could really help users.

User Research

Product requests ≠ User needs. By interviewing 5 customers and having them perform tasks such as redeeming rewards, I could validate the actual needs.

  • Opaque member benefit

  • Unclear reward visualization

  • Failed to explain rules well

The business objectives requested to attract more loyalty members, promote class upgrades for Silver and Jade tiers, and incentivize purchases through rewards and benefits for Gold tier. The requirements were broad and ambiguous in terms of how to proceed with design. Thus, I collaborated with another designer to interview 5 candidates, trying to validate things that could really help users.

Existing Design Audit

I then mapped user pain points into the existing design to further prioritize the components/flows for this sprint.

  • Make progress bar more concrete

  • Refine UX writing to be more descriptive

  • Identify and align all inconsistencies

Design audit not only helped us understand what's working and not working, it also clarified a lot of problems, for example, why the existing information architecture placed progress there, why they decided not to have more description. I wanted to respect the reasons behind before stepping on it.

Existing Design Audit

I then mapped user pain points into the existing design to further prioritize the components/flows for this sprint.

  • Make progress bar more concrete

  • Refine UX writing to be more descriptive

  • Identify and align all inconsistencies

Design audit not only helped us understand what's working and not working, it also clarified a lot of problems, for example, why the existing information architecture placed progress there, why they decided not to have more description. I wanted to respect the reasons behind before stepping on it.

Existing Design Audit

I then mapped user pain points into the existing design to further prioritize the components/flows for this sprint.

  • Make progress bar more concrete

  • Refine UX writing to be more descriptive

  • Identify and align all inconsistencies

Design audit not only helped us understand what's working and not working, it also clarified a lot of problems, for example, why the existing information architecture placed progress there, why they decided not to have more description. I wanted to respect the reasons behind before stepping on it.

Existing Design Audit

I then mapped user pain points into the existing design to further prioritize the components/flows for this sprint.

  • Make progress bar more concrete

  • Refine UX writing to be more descriptive

  • Identify and align all inconsistencies

Design audit not only helped us understand what's working and not working, it also clarified a lot of problems, for example, why the existing information architecture placed progress there, why they decided not to have more description. I wanted to respect the reasons behind before stepping on it.

Existing Design Audit

I then mapped user pain points into the existing design to further prioritize the components/flows for this sprint.

  • Make progress bar more concrete

  • Refine UX writing to be more descriptive

  • Identify and align all inconsistencies

Design audit not only helped us understand what's working and not working, it also clarified a lot of problems, for example, why the existing information architecture placed progress there, why they decided not to have more description. I wanted to respect the reasons behind before stepping on it.

Market Research

I also researched membership display designed by other products, drawing inspiration from various approaches to enhance user comprehension.

  • Clear info hierarchy

  • Explicit points to dollars

  • Leverage tier categorization

I found that many competitors don't hesitate to use more text, as textual expression is indeed clearer. However, they place different emphasis on separating importance via visuals, so these texts do not feel overwhelming. This approach was not unique to just one, but many. Moreover, clarification was also what the current membership display lacked, which led me to attempt optimizing in this direction.

Market Research

I also researched membership display designed by other products, drawing inspiration from various approaches to enhance user comprehension.

  • Clear info hierarchy

  • Explicit points to dollars

  • Leverage tier categorization

I found that many competitors don't hesitate to use more text, as textual expression is indeed clearer. However, they place different emphasis on separating importance via visuals, so these texts do not feel overwhelming. This approach was not unique to just one, but many. Moreover, clarification was also what the current membership display lacked, which led me to attempt optimizing in this direction.

Market Research

I also researched membership display designed by other products, drawing inspiration from various approaches to enhance user comprehension.

  • Clear info hierarchy

  • Explicit points to dollars

  • Leverage tier categorization

I found that many competitors don't hesitate to use more text, as textual expression is indeed clearer. However, they place different emphasis on separating importance via visuals, so these texts do not feel overwhelming. This approach was not unique to just one, but many. Moreover, clarification was also what the current membership display lacked, which led me to attempt optimizing in this direction.

Market Research

I also researched membership display designed by other products, drawing inspiration from various approaches to enhance user comprehension.

  • Clear info hierarchy

  • Explicit points to dollars

  • Leverage tier categorization

I found that many competitors don't hesitate to use more text, as textual expression is indeed clearer. However, they place different emphasis on separating importance via visuals, so these texts do not feel overwhelming. This approach was not unique to just one, but many. Moreover, clarification was also what the current membership display lacked, which led me to attempt optimizing in this direction.

Market Research

I also researched membership display designed by other products, drawing inspiration from various approaches to enhance user comprehension.

  • Clear info hierarchy

  • Explicit points to dollars

  • Leverage tier categorization

I found that many competitors don't hesitate to use more text, as textual expression is indeed clearer. However, they place different emphasis on separating importance via visuals, so these texts do not feel overwhelming. This approach was not unique to just one, but many. Moreover, clarification was also what the current membership display lacked, which led me to attempt optimizing in this direction.

Key Metrics

Prior to dive in, I facilitated the team in defining design metrics that could be used to evaluate the effectiveness of our redesign by key user scenarios.

Key Metrics

Prior to dive in, I facilitated the team in defining design metrics that could be used to evaluate the effectiveness of our redesign by key user scenarios.

Key Metrics

Prior to dive in, I facilitated the team in defining design metrics that could be used to evaluate the effectiveness of our redesign by key user scenarios.

Key Metrics

Prior to dive in, I facilitated the team in defining design metrics that could be used to evaluate the effectiveness of our redesign by key user scenarios.

Key Metrics

Prior to dive in, I facilitated the team in defining design metrics that could be used to evaluate the effectiveness of our redesign by key user scenarios.

Information Handling

What information did users care about?

  • Less detailed on home screen

  • More specific on rewards screen

  • More specific on rules screen

This was because, in the user scenarios I had developed, customers spent relatively less time viewing their membership status compared to ordering and accessing other services. On the contratry, on the dedicated membership screen, users favored highly detailed and precise information. However, since this design story focused on the home screen, I will not delve into the membership screen.

Information Handling

What information did users care about?

  • Less detailed on home screen

  • More specific on rewards screen

  • More specific on rules screen

This was because, in the user scenarios I had developed, customers spent relatively less time viewing their membership status compared to ordering and accessing other services. On the contratry, on the dedicated membership screen, users favored highly detailed and precise information. However, since this design story focused on the home screen, I will not delve into the membership screen.

Information Handling

What information did users care about?

  • Less detailed on home screen

  • More specific on rewards screen

  • More specific on rules screen

This was because, in the user scenarios I had developed, customers spent relatively less time viewing their membership status compared to ordering and accessing other services. On the contratry, on the dedicated membership screen, users favored highly detailed and precise information. However, since this design story focused on the home screen, I will not delve into the membership screen.

Information Handling

What information did users care about?

  • Less detailed on home screen

  • More specific on rewards screen

  • More specific on rules screen

This was because, in the user scenarios I had developed, customers spent relatively less time viewing their membership status compared to ordering and accessing other services. On the contratry, on the dedicated membership screen, users favored highly detailed and precise information. However, since this design story focused on the home screen, I will not delve into the membership screen.

Information Handling

What information did users care about?

  • Less detailed on home screen

  • More specific on rewards screen

  • More specific on rules screen

This was because, in the user scenarios I had developed, customers spent relatively less time viewing their membership status compared to ordering and accessing other services. On the contratry, on the dedicated membership screen, users favored highly detailed and precise information. However, since this design story focused on the home screen, I will not delve into the membership screen.

Design Solution

I focused on incorporating gamifications, enhancing the readability, and curating user focus to improve the membership experience.

Design Solution

I focused on incorporating gamifications, enhancing the readability, and curating user focus to improve the membership experience.

First, incorporating gamification elements was a strategic decision aimed at fostering user participation, loyalty, and sustained engagement. Second, improving readability was a foundational focus. By optimizing the arrangement and presentation of information, users could effortlessly comprehend and engage with the membership features. Finally, curating user focus was essential to ensure a streamlined and enjoyable experience. By carefully prioritizing and highlighting the most valued information and features, users could focus on the aspects that mattered most to them, without unnecessary distractions or cognitive overload.

We decided to go with gamification because it not only could attract users when they first tried it, but also could keep users to return. However, we ran into

THE BIGGEST CHALLENGE

How to incorporate a complete, fun, and lightweight gamification to every stage of a membership experience?

01 The membership goal must be set clear and intriguing for each tier.

Goals were a must-have here because it set a purpose for users to get involved. In Silver and Jade classes, the periodical goals were upgrade. In Gold class, the goal was changed to keep gaining rewards (can be free coupons, gifts, specific free drinks & food). Then for Silver and Jade classes, how should the goals be designed? I tried only the number of stars, icons plus text, and combination of all three. Finally, I went with the 3rd version because it showed both when the users can achieve it and what was the trophy awaiting so that users had a whole picture of their “future”.

02 The rules must be as less overwhelming as possible so users can figure it out by a few tries.

How to get rewards? -- By getting stars. Then how to get stars became the core of the rules. However, was laying out rules the favored way that users needed? The answer was no. It might be intuitive to follow that direction, but I had limitations: (1). avoid overwhelming information crowd; (2). space limitations. Thus, instead of laying out the rules, I created an entrance as the picture shows. The benefit was that , on clicking the entrance button, there were direct purchasing channels provided with rules on how many stars the users would get.

ANOTHER ISSUE ARISED

The journey between start and end was the most essential of all. How to design a smooth and attractive journey for all membership classes?

03 Feedback needed more love. It must be more attractive by visually shortening the milestones to make it look "more" achievable.

I used a progress bar for the Silver and Jade classes customers to see how they were doing along the way. Beside this kind of feedback, I also created a feedback card that would pop out whenever the user exchanged coffee using a coupon or gained a new coupon/free drink. The reason behind this was that progress bars, comparing to pie charts or other forms, shared a better feasibility to display a continuous progress with 2 or more periodical goals in the middle.

Gold class was a bit different than Silver and Jade class. Instead of a progress bar, the feedback was more like a metaphor of the user’s emotions along the journey. I made this change because (1). the business goal for gold class was different: instead of upgrade, it wanted customers to work on getting a free gift through purchasing periodically; (2). users wanted to feel more special emotionally, which was one of the critical factors for maintaining loyalty.

04 Enhancing Readability

I closely worked with our visual designers to ensure our choices of colors, fonts, grids, etc reach a good balance between legibility and brand-specific aesthetics. I also helped our visual designers to iterate these choices by testing them on several complex screens, showing them exact places the styles needed to shift.

We established a simple design system with our engineers. In this simple one, we only built components. While we built multiple style libraries outside of the design system, which supported us to switch component styles for different brands. If you are interested in more details on building a unified design system that scales across brands, feel free to reach out or I may include the details in another case study.

CURATING USER FOCUS

Promoting the most profitable section instead of the redesign visuals stepping over the business objectives.

Final Design

Original Design vs. Final Redesign

Final Design

Original Design vs. Final Redesign

I included the home screen, membership screen, and rules screen for each class (Silver, Jade, and Gold), but the story of the last two screens were not elaborated here.

I included the home screen, membership screen, and rules screen for each class (Silver, Jade, and Gold), but the story of the last two screens were not elaborated here.

Result & Impact

95% more users could easily understand what their current class was and what did it take to get them there. 87% Gold member showed interested in continue purchasing.

Result & Impact

95% more users could easily understand what their current class was and what did it take to get them there. 87% Gold member showed interested in continue purchasing.

The overall impact was great, showing an improvement in both user comprehension (from short surveys) and usability of app (A/B testing) had raised a lot comparing to the last version. The redesigned solutions has increased the customer activity scores by at least 60% (data calculated until Jan. 2021). During the post update survey, 88% users showed "satisfied" and "very satisfied" toward the updated membership experience.

Conclusion

Takeaways

Conclusion

Takeaways

01 Be used to design under technical limitations.

I had to work under strict technical limitations. For example, we thought about designing a set of feedback system to increase the feeling of achievement for Starbucks members, but it was abandoned because prompt notifications were still a big concern across many different types of third-party platforms.

02 Achieve a balance between UX and business.

Since the app’s most profitable feature was online order and delivery, I had to keep it in mind that the design for membership should not be emphasized more than the above services. During iterations, I constantly tested what the users would first see on the home screen. I made sure that in the final design, the original promotions were still visually most attracting.

03 Test, test, test.

Test was essential for each round of iteration. I practiced many types of testing for this project. There were interview, short usability test, designer critique, and so on. They all provided very useful insights for polishing my work.

Other Projects

CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·
CHAT · LEARN · CREATE · BUILD · HELP ·

©

by

in 2024

©

by

in 2024

©

by

in 2024

©

by

in 2024