Starbucks Android Material Design

by Chase Bratton, Product Designer @ Starbucks

The evolution of Starbucks digital products for Google’s new design framework.

I’m happy to announce that Starbucks has released an updated version of our Android app aligning to Material Design. It’s the first step in our interpretation of Google’s Material Design framework and the ongoing refinement of Starbucks’ digital brand.

An Exercise in Restraint

Since Google I/O 2014, the Starbucks product design team has been thinking through how to implement the new framework. Our goal was to ensure that the app avoided looking too “templated” when updating to Material Design. We wanted even the simplest of screens to reflect subtle hints of the Starbucks brand. We strived to provide concise logic for the adoption of certain aspects of Material Design and considered what these changes meant for our customers and what made sense to implement.

Typography

Our team aligns the Starbucks digital brand across all touch points in order maintain a consistent visual look and feel for our customers across platforms. A primary way we achieve continuity is with typography. We adapted the standard Material Design typography scale, weights, and tracking to a set that feels suitable for our content and easy for our customers to use.

Elevation

Elevation is a core principle used throughout the app to emphasize priority and hierarchy on screens. The use of shadows creates a sense of “depth of field”, enabling certain elements to appears closer to the glass. Persistent actions are elevated in order to create sense of priority on each activity.

Iconography

Aligning all icons to Google’s grid allows us to maintain consistency with Android system icons while incorporating styling from Starbucks brand icons.

Color & Imagery

We are taking advantage of Google’s guideline suggestion to prioritize color and imagery. Warm blacks & grays from the Starbucks digital brand color palette are used to add vibrancy. We use the color palette class to accent app bars on product detail screens.

The Grid

Utilizing an 8dp baseline grid system, along with 16dp margins and a 72dp keyline, establishes a visual consistency to the design across on screens.

Challenges

With Android’s diverse segmentation of screen sizes and devices, we knew there might be unexpected challenges along the way to optimize for all customers. This meant we didn’t try to obey every rule of the guidelines. We are looking at the adoption of Material Design as an ongoing process, and we’re optimizing our design to benefit our customers first. We’re listening to (and learning from) our customers every day — if you have any notes for us, feel free to get in touch.”

If you like this article, please hit the ♥ and share it with your friends.

Starbucks Product Design Team

Caroline Maxwell (Product Designer), Chase Bratton (Product Designer), Jason Stoff (Sr. Product Designer), Trevor Denton (Sr. Product Designer), Jeff Peters (Product Designer Manager), Jeremy Beasley (Product Design Manager), Ben Ford (Product Designer)