Redesign the home screen membership logic.
Starbucks is a worldwide coffee company committing to build a popular and trendy coffee culture.
I participated the capstone project and collaborated with Starbucks China as a UX/UI designer from October to November in 2020. In this project, I focused on the information rearrangement for the membership especially on the home screen and membership screen in their mobile APP.
Membership has always been an essential part of Starbucks’ business strategy. However, according to the data, the APP customers in China showed less enthusiasm toward joining as a member. As a designer, I wanted to know why the membership design failed to attract customers to join.
Through collaboration with Starbucks China, we hoped to understand what the incentive was and iterate the design effectively so that more customers would want to join and stay.
(10/2020 - 11/2020)
• Consistent design styles between the home screen and the membership screen.
• Different visualization among different classes.
• A better way to visualize the decimal point of the number of stars.
• Optimization of the membership display mechanism.
• Attract more users to join and become a loyalty member.
• Promote class upgrading for Silver and Jade classes.
• Encourage purchase through rewards and benefits for Gold class.
Based on the user research, we discovered for users who knew the membership mechanism well, they did not care much about the information they saw. They could already be senior Starbucks members. However, for entry level users who were not familiar with Starbucks’ mechanism, they relied more on the information that the design provided. It was more important to new customers than senior customers.
Obviously, these two groups of customers had different needs which would lead to different solution. After discussing with the product manager, we decided to design for new and entry level customers who were not familiar with the membership mechanism.
We summarized users’ pain points and from the analysis, we found a few (details in the picture below) that was the key to roughly understand the progress and rewards.
Furthermore, we also decided to consider from the user scenarios. Again, we summarized two use scenarios:
• Order alone at store/from home: in this scenario, the users would not need too much information on the home screen because they usually just browsed the progress quickly and went straight to order.
• Order together with colleagues: in this scenario, the users involved more than one person. More information would be needed because people might want to pay together and share the bill.
Keeping that in mind, we set the design goals and metrics as shown below.
From user insights, I realized that less information was actually more desirable than detailed information on the home screen, because in either user scenarios that I developed above, customers spent relatively shorter time on viewing membership status than ordering and other services.
On the contrary, on the membership screen, it appeared to be favored when it was as detailed and precise as possbile. But as I focused on the home screen in this story, I would not talk a lot about membership screen.
Back to the home screen, users needed a clear member status overview with emphasises, so finding what attracted users was the most important research I did before diving into design. Right side is the graph that showed what most users are interested in.
Using icons only can make the design looks more concise and visually appealing. However, icons-only can also cause recognition problems, especially when they do not fall into standards or conventions. For example, people are able to recognize “like” quickly when they see the heart icon. But nearly 1/3 of the users that I asked, they were not sure what it meant when seeing a cup icon. “Does it mean I’ll get a free cup of coffee or is it simply a gift?” The recognition problem came up because using icons only failed to clearly convey what reward would they have. Users might interpret them alternatively than they actually meant. Then what about a much more clear way such as using text?
With that in mind, I tried to use text only. There were several benefits associated with this choice: (1). no recognition problems; (2). can be more specific. However, the biggest problem I met with using only text was almost all users said they would not read “that much”. It lost the meaning when users did not look at it.
Finally, I went with combining icons and simple text to avoid problems above.
After knowing what information that users cared, I started thinking how should I arrange it for better readability. It turned out it was impacted by several factors. Because the area was limited, considering spacing and grouping principles, I needed to try smaller font sizes for text to reach a balance so that it was still accessible to users.
The complexity of icons was another factor. Because the background was styled sophisticatedly, the icons should have matched the overall style. However, in a relatively small area, too complex icons were meaningless. I needed to create icons that were consistent with the overall design style and easily recognizable to the users.
Beside clarity, another major concern for current membership design on the home screen was that it needed users to feel they were participating. It also needed their loyalty. At the beginning, it should be attractive. Thus, the design needed to provide a more enjoyable experience.
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, thus become Starbucks’ members. That was because gamification system acted like a bridge between sessions. Users needed to return to claim a goal after one.
According to the Zeigarnik Effect, people tended to remember the tasks that they did not complete rather than something they achieved. Thus showing a progress bar with unfinished goals could maintian the users’ loyalty to some extent. Below steps showed how I designed the gamification for membership on the home screen.
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 desgined? 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”.
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 anwser 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.
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. Insead 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.
Last but not least, motivation was also an important part of a gamification design. While as the designer I could not do a lot about intrinsic motivation, the exicitment of winning something already acted as a great incentive. This was also the reason that I chose gamification design here.
As for extrinisic motivation, I made the difference between current # of stars and the goal number of stars plainly visible. When users saw the difference reducing, they felt more likely to make another purchase. This was also the information that rated as “highly-wanted” during the user research.
During iterations, I tried to use a card to display the membership status and gamification on the home screen. It was an intuitive design thought because according to material design’s guideline, if I wanted the information level of the membership to be as the same as other cards, it was better for me to use the same format.
However, the problem was that “啡快”(online order) and “专星送”(Starbucks’ delivery) were the 2 most profitable services for Starbucks and it wanted to promote these services. Thus, emphasizing them was included as a must-do. Inevitably, membership, although still important, needed to be less “popping”. To curate the users’ focus, I abandoned card and went with the second version.
I tested with 5 users and asked them where they saw at the first glance of the home screen. All of them said they noticed the membership card in the first version, while in the second version, 3/5 users noticed the “Your drink is on its way” message first and the rest immediately saw the “啡快” (online order), which was a desirable outcome.
This was an very exciting project for me. The final delivery to our client received great feedback on the progress and degree of completion. Moreover, I learned a lot about how to collaborate with a company like Starbucks related to product and business as a designer.
Accommodate 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.
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.
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.