Starbucks For People, Not Machines
Breaking out of our Caramel Frappuccino brainwash
A sigh of frustration as I leaned back in the leather chair was a sure sign that I had been sitting in this coffee shop for much too long. And although Starbucks has normalized the idea of working alone, ordering coffee is still a social experience. Knowing someone’s coffee order these days is akin to knowing the songs on someone’s iPod in the early 2000s. Starbucks started as a simple coffee shop, but its menu has grown to hundreds of drinks, each customized to a specific customer.
The Starbucks app today is useful way for customers to create, favorite, and order drinks quickly. It also suggests new drinks, but these are often met with ridicule or controversy. People want to find new drinks and foods that they will enjoy, but they can’t because:
- They don’t want to spend money on something they won’t like.
- They don’t trust Starbucks to recommend drinks.
Asking About Coffee Shops in a Coffee Shop
I originally thought users avoided creating customized drinks because the options looked confusing. My mind changed after bothering people who were working in some Starbucks stores in suburban Chicago.
User Research
The Regulars. Walking into the store, I recognized that some of the customers were immediately greeted and handed a drink. These customers were in here daily and ordered the same drink. Generally, regular customers were remote or freelance workers that didn’t care about the frills of a Frappuccino . They wanted the same drink each day and enjoyed the small connection they had with the store.
Teenage Caffeine Addicts. High-schoolers that ordered during lunch breaks served another interesting perspective. Of the users I talked to, half spent their class time creating new and unique drinks to try. The other half ordered their personal favorites ahead of time so they could pick drinks up before heading back to school.
I-Don’t-Drink-Coffee Customers. Some customers only visited stores with friends and usually ordered different drinks. These users took recommendations from friends or only went to Starbucks to try the new hype drink.
Market Research
Starbucks is unique in that it doesn’t provide delivery despite many of its competitors focusing on reducing effort for the user as much as possible. However, compared to other apps, Starbucks compares fairly well when it comes to usage.
How I was wrong
The drink ordering process on the Starbucks app was fine. Users knew how to navigate the customization of a drink and how their new drink would taste without a hitch. The real problem was that users didn’t trust themselves enough to make a drink and be confident that they would like it. It was cost-prohibitive to try a new drink or a customized old drink if it led to a user cringing every time they took a sip. So a couple friends and I went out and got some sticky notes.
Making a New Morning Brew
At first, I thought users simply didn’t like trying new things. But in reality, users DID like trying new things, but only when it came from the right place.
Finding Feature Spaces
I recruited a couple friends to help me out. After blowing through about two hundred sticky notes, we identified two main areas of improvement:
- Making Customizations Easier: How might we make it easy for users to share and utilize other user-created custom drinks?
- Making Better Recommendations: How might we help users find drinks that are similar in taste to drinks they already like?
Making Starbucks More Personalized
After filtering a mess of sticky notes by feasibility and impact, I drew some initial flows. Each flow’s goal was to show how a user might access a feature and how they complete ordering a drink.
Barista Profiles. In this feature, a user would access a store and be able to see some recommendations from baristas at a local store. While this would bring users closer to their local store, spending time to read profiles was not reasonable.
Friend Activity. Suggestions based on their friend’s drinks might help users feel more confident about trying new things. The barrier in this solution is informing users about what data is being used from Starbucks Rewards and why it is being used.
Drink Macros. The last flow was to implement health macros with each drink, suggesting healthier alternatives to users for each drink they like. User testing feedback helped me understand that healthy options were useful, but that they didn’t fit with the Starbucks brand.
Picking a Solution
Looking at the pros and cons of each solution, I decided to go with Friend Activity since it seemed the most feasible and had the greatest impact. Going forward, I made sure to design the feature to accomplish the goal but otherwise stay out of the way of the app’s main purpose: ordering drinks.
Ingredients for an Espresso
Using my drawn user flows for reference, I began to map out the information hierarchy. This information hierarchy would show the Friend Activity feature. I wanted to make sure that the feature was well-seen, but also emphasize that it lived separately from the app’s many other functions.
Entry Points
The entry point for Friend Activity would be from the ‘Home’ screen. Although the ‘Home’ tab offered information about rewards and new drinks, users usually immediately tapped the ‘Order’ tab to find a drink on the current app. If friend profiles were on the front page, it might help create some familiarity with the user and increase time spent.
I first toyed with the idea of using a ‘story’ feature that would help user familiarity and increase engagement. However, stories were better used for consumption, not long user flows. Eventually, I went with screen most similar to the third iteration to ideate upon further.
Friend List
In each page, the focus tends to switch off between the user’s friend picture and the drink. For each page, I looked at user research to determine whether I should focus on user profiles or drink details.
Users tapped on friend profiles a lot more than drinks during testing. It became clear that user profiles should be much larger and drink names should be clear.
Painting the Latte Art
To begin drawing a new component onto an existing screen, I had to make sure current designs were consistent. I wrote out some visual problems I found with the app and made a note of them when iterating on a final flow.
Problems with Visual Design
Homepage Sections. The current Starbucks homepage consists of a header, a full-width rewards section, and a feed of cards for activities and new drinks. Users new to the app were confused by the difference in style between the Rewards section and the cards.
Text-Border Weight. Secondary buttons on the Starbucks have a semibold font outlined by a rounded rectangle button. The button’s border is thin compared to the boldness of the font. This throws off the visual consistency and discourages tapping the CTA.
Profile v. Drink. In each page, the focus tends to switch off between the user’s friend picture and the drink. Explicitly defining the focus of each page:
- Homepage – focus on the drinks, but friends should still be noticeable to draw attention and tap
- Friend List – focus on the friends, since tapping on a ‘See all’ would imply the user’s intention to see friends prominently
- Friend Profile – focus on the friend for much more of the screen and display more personalized details about the friend’s drink preferences
- Drink Details – focus on the drink, friends can be viewable but should not take away from the information or details of the drink
Finalized User Flow
Home View. In this view, the main challenge I faced was balancing the focus on user and drink. I associated the user with a drink by putting the drink in a header photo and using a smaller profile picture. Another major difference is getting rid of cards. Most users don’t swipe down on the home feed, so there is visual inconsistency when they only see cards below a full-width ‘Rewards’ section. I made all the sections full-width to emphasize interaction with the most used features.
Friend List. In the Friend List view, I switched out the focus on my medium-fidelity explorations from drinks to the friends. I also made drastic changes to the organization of the page, choosing to better tailor the experience to the user’s tastes for certain types of drinks. I also spent time on figuring out a good way to allow users to add drinks to cart in a single tap without compromising usability the page.
Friend Profile. The biggest change on this view was the incorporation of the ‘+’ overlay on the drink images. In my previous explorations, I placed the ‘Add to cart’ CTA next to the arrow, which was confounding in user testing. The trade-off for putting this CTA on the drink picture is the benefit of having the action explicitly defined and clear to tap.
Drink Details. From critique and user feedback, it seemed that the drink name in the page header sometimes clashed with the image. To solve this issue, I applied the same gradient overlay that I applied on the ‘Home View’ and ‘Friend Profile’ pages on the header picture. This immediately made the text stand out much better. I also combined my explorations on a single-tap modification from a friend’s favorited drink. Adding a modification at the top of the drink page will automatically edit the drink’s details to a friend’s modifications.
One other change worth mentioning is the ‘Profile’ page in the tab bar replacing the ‘Gifts’ page, which was before used to order gift cards. Users can still order gift cards from the menu. A distinct profile page encourages users to save drinks and be more involved with the Starbucks ecosystem.
Putting it all together
I created a prototype to showcase interactions with the flow and how users could realistically use the app.
A Familiar Cup of Coffee
Talking to users, I was pleasantly surprised by how many times I heard, “I don’t have any problems, I love the app.” Starbucks has done a great job of helping users to order their favorite drinks. I hope Friend Activity can further this by helping users find new drinks to love and find new connections with friends.
I hope you enjoyed the read! I’m really excited for what’s next in my life and I’m looking forward to developing my design skills further in the future. If you’re interested in checking out my other work, please visit my portfolio or feel free to reach out! Until next time, thanks for reading!
~ZainKho
