Starbucks Redesign

A redesign of the Starbucks app to improve the IA and update the visuals.

Hero Image of Starbucks

Overview

Context

Being the coffee addict I am, I used to go to Starbucks and order three ventis as my fuel for the day. Using it as much as I did, I realized there were certain aspects of the experience that could be improved. So as an exercise, I took it on as my first redesign project.

Outcome

There's no outcome for this project as this has become out of date. However, the reason why I kept it up is because several of the suggested changes I proposed did eventually get implemented into the app today.

Problems

These were the problems I narrowed down regarding the usability of the app:

  1. Navigation area is crammed at the top and not within comfortable reach.
  2. No visual notifications for new messages or offers.
  3. Icons are not consistent and are unclear of their actions.

Assumptions and Constraints

Assumptions

  1. The app is mostly used by members who are on the go.
  2. Dedicated members care about their rewards and new offers.
  3. Members order online as much as in person.

Constraints

  1. Avoided redesigning the feed to focus more on action based components instead of discovery.
  2. New components are consistent with the Starbucks visual system, limiting stark visual changes.

Solutions

My solutions included a redesign of the main navigation as well as changing the action items to be more explicit and consistent.

Familiar Navigation

The current navigation has eight actions all located at the top, making it both crammed and hard to reach. There is a main CTA at the bottom right, but found it redundant to have those same options within the top navigation as well. I redesigned the navigation so that it would be both easier to use and focused on the primary functions.

Image of Starbucks redesign comparison

Current home screen (left) and redesign (right).

I also made notifcations more visible so that people won’t miss out on unread messages or new deals.

Prototype of the home screen and notification.

Consistent Actions

Some of the buttons used on different screens were visually the same but served different functions, which can be confusing. It also wasn't clear what some of the icons did to begin with.

I redesigned the action items to be clearer and less redundant.

Image of Starbucks redesign comparison

Current buttons (left) and redesign (right).

Image of Starbucks redesign comparison

Current buttons (left) and redesign (right).

Prototype of the ordering process.

Takeaways

The Whole Picture

Working on a hypothetical redesign, many assumptions had to be made. This is why these type of projects should always be taken with a grain of salt.

However, the valuable lesson I took away from this project was putting myself into other designers' shoes and trying to make sense of their context while challenging my assumptions. What technical constraints were they facing? What business strategies were involved that were influenced by stakeholders? How much time did the team have on the project? This helped me to not only be intentional about my designs, but to also see intentionality in others.

Instead of saying why a design isn't adequate, always ask yourself first what constraints that team must have been facing that lead to the solution.