Starbucks Android



Designing a visual system for Starbucks Android based on Google’s 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 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.

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.

Typography


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


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.

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.