Starbucks Mobile App Redesign

Berkeley Chandler, JRMC 7010 Final Project

Berkeley Chandler
4 min readJun 6, 2022

Background Info

The Starbucks app has one of the best UI frameworks I’ve ever interacted with, with a highly functional UX to match. From a design standpoint, it is fantastic.

However, I discovered one major flaw in the app's customer experience: the daunting size of the menu. Despite being well organized and intuitive to navigate, the fact still remains that there are over 200 items to choose from; and that’s before getting into the customizations you can make to those items. In fact, according to Starbucks’ very own blog, there are “more than 170,000 ways to customize beverages.”

To someone who may not already know what they want to order or who doesn’t know much about coffee in general, it can be overwhelming to choose from the seemingly endless list of options available.

Redesign Goal

My goal is to make that expansive menu feel smaller and more personalized. In order to do this, I will be adding a new feature to the app: the option to filter the menu by inputting personal preferences. With a few key considerations taken into account, the entire menu can be cut down to just a fraction of what it originally was, making the menu much less daunting not just to unfamiliar users, but to anyone.

Customer Journey Map

My customer journey map is based on the mobile ordering process that Starbucks has in place. The customer journey starts off the same way we are familiar with, until the customer makes it to that daunting menu page. This is where the journey begins to deviate.

There are three pain points that came up while observing the customer journey. The first is the basis of this project: the expansiveness of the menu.

However, by adding a new step (the filter feature) to address that pain point, a second pain point is brought up: the customer may not be aware this feature exists. This is addressed by adding in the step where the customer is prompted to the filter feature with a pop-up prompt on the menu page.

Finally, the third pain point is that the customer may discover a drink that they love, but worry that they will not be able to find it again in the future. This is addressed by adding in one last step at the end of the customer journey: a follow-up notification from the app asking if they’d like to save their drink for next time.

The four steps with a green heading are the new steps not found in the original customer journey. This includes seeing the prompt on the menu page, filling out the filter questions, going back to the updated menu page, and receiving a follow-up notification.

Customer Journey Map

Prototype

My prototype includes screenshots from the app as-is, screenshots with new elements overlaid onto them, and a few entirely new pages I built to match the UI of the app. Major changes that should be highlighted include the filter button added to the menu page, the pop-up prompt on the initial menu page, and of course the entirety of the filter feature.

My focus when building the filter feature was simplicity. With my design, I want the customer to be able to click on the filter button and have the options pop up in a way where they all fit on one screen. The filters themselves are also very straightforward, making the process easy and efficient.

Stylistically, I took inspiration from the store location filter feature the app currently has in place (see at bottom of post). The items within the filter feature, as well as the pop-up prompt on the previous page, were made with the same lighter shade of green found in the buttons throughout the app, as this color is an indicator of action.

The tone of the prompt and the message within the notification match the tone found throughout Starbucks’ branding: functional and expressive. Starbucks also does not shy away from incorporating emojis into their app’s messaging and push notifications, so I made sure to include one in the follow-up notification.

Go to the live demo of my prototype here.

High Fidelity Prototype in Adobe Xd

Conclusion

Starbucks is a brand recognizable to all and adored by many. They are known for their exceptional customer experience; but by creating such a vast menu for their wide range of customers, Starbucks may be losing some unfamiliar customers as they struggle to navigate through everything to find their perfect drink. By adding this filter feature to the app, anyone will be able to find their perfect match, and even come back again for more.

Watch my video presentation for this project here.

See my presentation slides here.

Reference Image

Store Location Filter Feature in App

--

--