The Redesign Concept of Starbucks China App

This project is to design an online order function for Starbucks China app. We designed two paths for two target customer segments. The golden path is for office workers. In this path, saving time is our priority. The seconds path is for young students who enjoy the environment of retail stores and want to discover more coffee knowledge. We combined the space of retail stores and the AR technology to provide a more personalized experience for them.

My Role

· Led the concept generation, the layout and spatial design.
· Co-conducted the user research and co-designed the user interface.

The Team

Mengnan Jin - Led the competitive analysis. Co-conducted the user research and co-designed the user interface.

Adobe Illustrator | Adobe Photoshop | Sketch | Sketchup
Time Period
4 weeks

The Opportunity

Starbucks China has been growing rapidly for many years and gradually becoming the most important market of the Starbucks brand. The amount of retail stores in China grew from 220 in 2010 to 3300 in mid-2018 in over 140 cities (data sources). Starbucks Reserve Shanghai Roastery opened in 2017 and quickly became the most profitable Starbucks store in the world (data sources).

The Challenge

However, Starbuck China is facing an unprecedented challenge recently because of the springing up of Asian coffee brands. The key competitor -Luckin coffee is carving up the market of Starbucks through its "new retail business model": It provide online order service, tap ever more customers through its mobile app. Also, it expand its store network, opened its branches in office buildings to make coffee consumption more convenient for office workers (data sources).

Luckin coffee app won the most popular dining app of Apple store in March 2018. On the contrary, the development of Starbucks China app is quite slow. Most loyal customers indicate that they rarely use the Starbucks app except for the reward collection.

The Goal

Holding the belief that Starbucks China app could be a more powerful and competitive product, I and my partner, Mengnan, proposed a redesign concept to leverage the advantage of Starbucks China to increase the competitiveness.

Design Process

I designed a process diagram as a guidance and subdivided them into details. Among them, the field trip, interview and questionnaire are two-way processes, in which we can polish the question and frame the problem.

Desk Research

Target customers

According to the report of CICC 2018, the primary customers are 29 to 38-year-olds. In terms of occupations, the office workers have higher quantity as well as higher value, followed by the students.

                 (Loyal customers age distribution)                                                                                                       (User value axis)                           

App store comments

We reviewed the comments and suggestions from three different app stores (App Store of Apple, Google Play and Huawei Developer), then used affinity diagram to cluster and bundle them into the following three main needs of app users:

The business strategy

Starbucks use "digital flywheel" strategy to guide its design of digital relationships with customers.

User research

Field Study and the Interview: find design opportunities

                                                  (I drew the plan and user behaviors in one of retail stores I visited)                                                                              (Pictures of two retail stores I visited)

Field study and interview with ten in-store customers were done synchronously. Here is the pain points and design opportunities we found:

1. Customers wait too long during rush hours. Stores were a little crowded at rush hours. The average waiting time from order to pick up is 10 minutes.

2. Online order is the most urgent need to be met. 70% of  interviewees wished to order beverages online in app. 90% of interviewees thought the current app have a great space to be optimized.

3. The information of beverages that customers can get from the barista while ordering are limited. Baristas were busy serving, making beverages, supplementing stuff and cleaning up the trash. The average serving time for each customer is one minute. Some customers were attracted by new products. However, they seemed feeling embarrassed of "occupying other customers' time" when they want to ask more details in front of the queue. Sometimes they ended up with a cup of Americano. We asked our interviewees why they gave up trying the new drink. 50% of them indicated that asking “stupid questions" in front of a bunch of people is embarrassed. 30% of them said they don't want to take up too much time of baristas because they seem very busy. 20% of them haven't encountered this problem.

4. Beverage information and coffee knowledge are what customers want to know.
To figure out what information is missed while ordering, we ask further questions. 30% of interviewees are eager to learn coffee knowledge and 20% of them have taken the coffee class that Starbucks held every Friday. Detailed information of each beverage helped 50% of our interviewees because they either want to drink healthily or learn how to make a cup of coffee by themselves.

5. The retail store environment is a significant element for customers. Half of our interviewees visited Starbucks retail stores for its environment.

Questionnaire: narrow down the design scope

Based on the insights, we designed a questionnaire and conducted quantitive analysis to figure out the most urgent demand. The questionnaire consisted of two parts: the feedback of app contents and consumption habits in retail stores.

                                                    (User segmentation)                                                    (Multiple-choice questions about useful contents currently and attractive contents in the future app)

1. We got 58 valid samples after screening. Coffee consumption frequency (purchase at least one cup of coffee per week) is our screening condition. We got 58 valid samples our of 78. The results presented below are all based on valid samples.

2. Office workers (primary) and students (secondary) are our target customer segments.
In terms of their occupation, 58.6% of them are office workers, 34.4% are students. Besides, 75.8% of participates are female. Participates in the age of 29-39 accounting 55.2% and in the age of 18-28 accounting 39.6%.

3. Order on the app is the most popular function customers want to have in the future app. Which followed by the beverages information and visualized the coffee-making process.

             (Single-choice questions about consumption habits)                                                                                                  (Cross analysis of the data)                                                                   

We also got the following results from the cross analysis of consumption habits:

1. Familiarity is an important reason that customers choose a beverage. New drinks ranked the second. How to design a convenient access to customers' familiar beverages and to recommend new beverages would be two of our design opportunities.

Buy coffee and meet friends are top two purpose that participates visit coffee shops. Environment and location (close to office or home) are top two reasons that people choose Starbucks. We cross analyzed this two results and figured out the relationship between those two features.

1. Participates who like to buy coffee in coffee shops tend to choose Starbucks for its location(close to office or home). A further cross analysis shows that most of those participates are office workers.

2. Participates who like to meet friends in coffee shops are tend to choose Starbucks because of its environment and coffee culture.


Based on the result, our top priority is to design the online order function. However, we still need to figure out the most important feature to present in the order function and to address different needs for two target customers segments.


I created two personas to portray our two target customer segments and highlight the design opportunity.


We design two paths. The golden path (default) is for office workers. In this path, saving time is our priority. Path 2 is for students. We provides them a more personalized experience.

Keywords: online order, save time, location, familiarity, environment, coffee culture, meet friends, beverage information, coffee-making process

The Golden Path-for Phoebe

Path 2-for Joey

User Journey - "before and after"

We drawn the "before and after" user journey to visual the design opportunities and our proposal (please click the next arrow to see the "after" user journey).


Follow-up interviews

We discussed our concepts with three of our previous interviewees and received valuable feedbacks:
1. Many customers still like to stay in retail stores. Can we provide space for in-store customers to communicate with each other?
2. Visual guidance would be helpful and attractive for customers in learn coffee culture.
3. The golden path is not very interesting. Customers would be board and impatient while waiting.

Revision based on the feedback

1. In-store platform to show customized beverage-making process.
We take the advice of our interviewees and provide a platform for in-store customers to share their customized beverages to the screen of the retail store. They can talk to each other about their unique story behind each beverage and make friends with people who love coffee like them.

2. Combining the space of retail stores and the AR technology, visulized the coffee-making process for the path 2.

First in-store AR interactive device was used at Starbucks Reserve Roastery Shanghai in 2017. Customers can have a immersive experience of how a row coffee bean can finally become a cup of coffee. This technology help the Shanghai Starbucks Reserve Roastery store become the most popular Starbucks retail store in China. In order to strengthen this advantage and benefit more users, we decided to invite AR technology into our app, provide all app users the coffee-making process.

3. Visualize the remain waiting time for the golden path.
Inspired by how Starbucks Reserve Roastery Shanghai use AR technology to visualize the process, we visualized the remain waiting time to relieve customers' impatience while waiting and to make this process more interesting.

                      (Starbucks’ first in-store augmented reality experience in Shanghai, 2017)                                                                                         (The concept diagram)              

The scenario

The interface


Due to the time constraint, we focused more on the research part and the design proposal. If we have more time, we would focus on the implementation of each proposal and conduct test for further development, specifically:
1. How baristas organized the online order and the in store order? How to reduce the workload for baristas?
2. How will AR technologies present the coffee making process?
3. Will the visualization of remain waiting time relief the impatience of customers or has the opposite effect?
4. Create different fidelity prototypes and test them respectively.

A Side Story

Making coffee is very relaxing. I have been a coffee lover and I decided to go further after we finished this project. I learnt how to make drip coffee and enjoyed my last summer break as a barista in a beautiful hotel with a group of wonderful friends and a lovely cat. I did have a lot of joy to share my coffee with other coffee lovers.
Hope you all have a great time with our project and a cup of coffee!