Role: Lead product designer
Additional Lead Desginers: Caroline Maxwell, Jeff Peters
Lead Enigneer: Mike McMorris
Designing a visual system for Starbucks Android based on Google’s new design framework.
The release was Starbucks' first step in an ongoing interpretation of Google’s Material Design framework and the refinement of Starbucks’ digital brand. Heavily influenced by the asthetice of the flagship Starbucks Roastery in Seattle, Washington.
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.
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.
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.
Iconography
Aligning all icons to Google’s grid allows us to maintain consistency with Android system icons while incorporating styling from Starbucks brand icons.
Persistent Messaging
A core feature of the the Starbucks app is paying for orders and earning rewards with a My Starbucks Rewards account. One pain point in past versions of the app was that customers were frequently forgetting to use their rewards before they expired. Rather than requesting a more intrusive signal through OS notifications, we opted to surface rewards status inline on a few key screens before a customer attempts to pay for their order.
