Starbucks Android for Material Design
Designer on Starbucks Android app redesign for Google Material Design.
︎Launch article on Medium︎︎︎
I worked closely with cross functional partners on this work: Product Design team, Engineering team, Engineering Manager, Product Manager, Technical Product Manager, User Research, Content Manager, Brand Design Team, VP of Product.
Design a visual system for Starbucks Android based on Google’s Material Design framework.
The release was Starbucks' interpretation of Google’s Material Design framework and a refinement of Starbucks’ digital brand. Influenced by the asthetice of the flagship Starbucks Roastery in Seattle, Washington.
An Exercise in Constraint
Since Google I/O 2014, the Starbucks product design team has been thinking through how to implement the new framework.
Our aim 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.
Color & Imagery
We leveraged 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.
One project goal was to align the Starbucks digital brand across all platforms in order maintain a consistent visual look and feel for our customers across platforms. A primary way we achieved continuity was 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 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.
Aligning all icons to Google’s grid allows us to maintain consistency with Android system icons while incorporating styling from Starbucks brand icons.
Utilizing an 8dp baseline grid system, along with 16dp margins and a 72dp keyline, establishes a visual consistency to the design across on screens.
With Android’s 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.