Membership Redesign
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.
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.
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.
