Starbucks APP Mobile Order Redesign

Challenge

Our challenge was to use behavioral heuristics to redesign a mobile app and eliminate pain points. Our team was tasked with reimagining the ordering process with the Starbucks mobile app.

Client

Starbucks

Tools

Adobe XD, Adobe Illustrator

Role

UX Design Lead

Timeline

4 weeks

Journey

In our interviews, we found that one user avoids the menu screen of over 220 items and continually orders their previously ordered items. On average, our users took ~7 minutes from beginning to end to complete their order. To order a Venti sized drink with 2 additional espresso shots, on user took 54 actions – 12 of which were repeat because their order didn’t save or they had to adjust the drink so the price was below the amount on his Starbucks app.

In the analysis of our heuristics patterns, we noticed a few generalized trends and human errors – we categorized them into “poor ergonomics”, “hot” zones (high traffic/tap through rate), and “cold” zones (missed actions or ignored actions). When making customizations, no price was given per change nor was that cost reflected until the user added it to their cart. On the “ADD-INS” page, most users looking for sweetners went back to the drink home page multiple times until realizing the “ADD-INS” page scrolled. The “Home” button is lackluster and very few users actively sought its use. Much of this app required both of the user’s hands, and the main pain-point in usability was the reach between customizations and exiting from the menu item. The “Save” button on the “ESPRESSO & SHOT” options page was missed by a few users and required them to re-enter their customizations.

Solution

With all of these observations, our team decided to reflect them in the following mock-up. We simplified the dock of the app, removing the “Home” tab, removed extraneous tabs from the “Order” menu, and created full image-to-name recognition with an intuitive carousel.

We created drop down menus, that reflect changes on the same page. By understanding the information hierarchy that users have, we were able to create the highest priority customizations that users expressed to us: “size,” “espresso shots,” “sweeteners,” and “flavors.”

The final change our team made, which the original app was lacking, was an explanation of cost per customization that adjusts real-time, allowing users to understand how much their drink is going to cost them.

With this interactive mock-up, our team saw results that this update eliminates the “hot” zones and ensures that no “cold” zone opportunities were missed.