ℭ. 𝔅ℜ𝔄𝔗𝔗𝔒𝔑
Product Designer @ Google



Facebook
Real Estate
Collaborative Shopping
Profile Selling
Analytics

Starbucks
Android Mobile Ordering
Android Pay
Android for Material
Starbucks Music | Spotify

Etsy
Design Systems
Brand Product


Chase Bratton —
Bio


A professional software product designer somewhere near Lake Washington, Seattle, Washington, USA. A generalist with a flex towards craft, prototyping, design systems and generative work.

Mark

Starbucks Android for Material Design


Role
Designer on Starbucks Android app redesign for Google Material Design.

︎Launch article on Medium︎︎︎



Collaboration
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.

Goal
Design a visual system for Starbucks Android based on Google’s Material Design framework.

Strategy
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.

Design Approach
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.



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.


Learnings
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.