Introduction
Long drive-thru lines were a severe problem for Starbucks. Unending lines dissuaded new customers. They would see the sweeping line and not bother entering the cue. At the same time, unclear COVID safety precautions kept Starbucks regulars from ordering. They were making coffee at home instead.
How could we attract new customers but also keep the Starbucks regulars happy?
I led a team of 3 to design a solution to relieve frustrated Starbucks customers and employees. Our mobile solution met both the business needs and customer needs.
During the two-week project, my team all wore various hats. Together we conducted research and designed solutions. We tested our design and iterated through many answers to the problem. Below is a summary of our work separated into four sections:
Research
User Interviews
We conducted six user interviews with Starbucks customers. We wanted to know how their behaviors had changed during COVID and what their concerns were.
From affinity mapping insights, we learned:
- Starbucks Regular customers weren't concerned with long wait times
- The lack of clarity around covid safety measures troubled Starbucks regulars
- Lengthy lines discouraged new or infrequent customers from ordering
A snapshot of how we categorized user insights from doing affinity mapping
Primary User Persona
User interview insights helped us create our primary persona, Melody. She was the loyal Starbucks customer who had a favorite and Starbucks location. She would chat with the friendly employees who knew her and what she always ordered.
COVID had changed her weekday Starbucks ritual. She couldn't find information about her local shop's COVID safety measures. She thought it was both safer and easier to make coffee at home. Melody wants to feel reassured that it is safe to order before she returns to buying her daily drink.
Melody, our primary persona, is a long time Starbucks customer who always gets a morning coffee
Secondary Persona
Our secondary persona developed from our user research is Terry. He is the occasional Starbucks customer that orders Starbucks when it is convenient. Terry wants coffee to be ready fast. He is not willing to wait very long. If there is a long line, he will pass up the opportunity for a Starbucks drink that day.
Terry is our secondary persona who is an occasional Starbucks customer that is largely driven by convenience
Task Analysis
The ideal user flow would please both types of customers. Task analysis would help test the weaknesses of the current ordering process.
I performed a task analysis of the curbside pickup method of ordering a drink. That ordering method is a contactless ordering option and thus ideal for COVID. It might also remove customers from the drive-thru line.
We found that the app had:
- limited information on curbside instructions and covid safety measures
- confusing navigation and wording for the curbside process
We kept these insights in mind when we went into the ideation phase.
Task Analysis of ordering a drink from Starbucks using curbside pickup (Dec 2020)
Defining the problem
Our research findings contradicted the initial hypothesis that long lines were the problem. COVID precautions concerned the majority of Starbucks customers more than long wait times. Retaining loyal Starbucks customers is cheaper than acquiring new customers. Thus our solution needed to address our primary persona's concerns about COVID safety.
It was also possible to address the frustrations of new or infrequent customers at the same time. Our solution could also decrease the wait time and make our secondary persona happy—no need to lose potential customers.
Design
Design Studio
We wanted to solved for Melody's pain points, our loyal customer, as well as Terry's, our occasional customer, so that we could retain loyal customers while still addressing the business problem of losing potential customers. We conducted a design studio to try to come up with solutions. Based on the design studio, we decided to incorporate key items into the design:
- Clarifying Starbucks' COVID response
- To slightly modify loyal customer's actions with star rewards as an incentive
- Scheduling drinks for curbside pickup for a specific time in the future
- Redirecting users to other locations with shorter wait times
The first low-fidelity prototype sketches in Miro showing how we critiqued our first design and used it to improve the second round of wireframes
User Flow
From our design studio results, we developed a user flow for Melody where she can quickly find the information about COVID safety on the homepage to feel reassured that she is safe to order. Then she would see an offer on the app home screen that would incentivize her with stars to schedule her daily drink order ahead of time using curbside pickup.
Melody's user flow for ordering curbside pickup starts with finding the COVID safety information and ending with picking up her drink via curbside at a scheduled time in the future.
Low-fi wireframes
After creating the low fidelity wireframes on paper and critiquing them as a group, I drew a second iteration of paper prototypes so that we could use them for a first round of usability tests to get early feedback on the direction of our design. We learned valuable insights that were then incorporated into our high-fidelity prototype including:
- An icon for COVID information was unclear
- Keeping the UI of Starbucks consistent
- Maintaining on-brand UX copy (we imagined as if Tom Hanks were the voice- friendly & reliable)
Image of 3 paper wireframes showing from left to right: the homepage with the covid icon in the upper navigation, image of revised UI for how the pickup option is display that matches Starbucks' current UI, and an image of the final checked-in confirmation page displaying on-brand UX copy
High-fi wireframes
Once we had validated the userflow that we had created for Melody based on the positive results from usability tests from paper prototypes, we started designing our high fidelity wireframes following the UI design system Starbucks uses. For the COVID infographic, I created elements of visual rest by spacing minimal text with simple images to create a mobile-friendly version of Starbucks' COVID information that's currently on their website in a very dense and text-heavy format.
The first iteration of the COVID infographic wireframe showing key information with minimal text and simple images
Iterate
Usability Tests
The home screen of the mobile app showing how user feedback from usability tests has been incorporated into the second iteration of high fidelity wireframes
Once we had our high-fidelity wireframes prototyped, we conducted usability tests to identify if there needed to be any changes that would improve the function of the app and user-satisfaction. We tested to see if users could:
- easily find the COVID safety information
- find and understand the incentive to use the scheduled ahead method of ordering curbside pickup
- complete the curbside pickup ordering process
- find information for contacting the store
Based on our results from the usability tests we:
- reordered the covid infographic so that the most important information was at the top (contactless options)
- moved the call to action button for the incentive above the fold so that users knew where to go
- reordered the final pickup confirmation page to show the contact information in a more prominent location
A/B Testing
From the initial paper prototype usability tests, some users had expressed hesitation over the what to expect after continuing to 'checkout' from the review order screen. To address this, we decided to conduct an A/B test during the usability test and show certain participants version A with the copy 'checkout' and other participants version B with the copy 'Choose Payment'.
All users shown the version B with the more explicit copy 'Choose Payment' knew exactly what to expect with mixed results for version A with the less clear copy. Thus we chose to continue with version B that said 'Choose Payment' so that users were reassured of exactly what they could expect next.
The A/B test was done to understand which copy the user found more clear: 'Choose Payment' or 'Checkout'
Current Prototype
Starbucks app curbside schedule-ahead prototype
As nothing is ever final in design, the current prototype has incorporated the feedback from the usability testing. You can see the current design by clicking on the button below.
Conclusion
Next Steps
The prototype was a result of the two week design sprint, but additional items could still be addressed if more time were available. Those items include:
- Conducting a round of research on the usability of the latest prototype but focusing this time on the navigation and flow of the ordering process
- Additional research and ideation could be done for how to address when users need to make more complicated orders (more than one or two drinks)
- Building out the delivery user flow that was designed for our secondary persona who was driven by convenience
Learnings
On teamwork and collaboration:
- if there's disagreement over design direction, building off of the other team member's seemingly opposite idea helps to build trust through respect and validation and can help steer the design in a mutually compromised direction
- Miro is a fantastic tool to use for virtual group affinity mapping, group project critiques, and creating user flows as a group
- Figma is great for collaborating in real time to build out wireframes and the prototype
- Daily standup in Slack (which you can set up a daily reminder for) is super helpful to make sure every team member is aware of what the others are have done and will be working on that day. Plus checking-in with each other helps find any issues teammates might be facing and can help the group assess how to tackle any road blocks.
On Project Management:
- This is so essential. Without a solid plan for what needs to get done, when, and by whom, things can go majorly awry. Make a plan, use it, and update it on a daily or on an as-needed basis.