Dutch Bros Coffee

2022
product design, brand design
Design Systems Management, UI Support, Graphic Design
Figma, Sketch, Photoshop, Illustrator

Moving the Dutch Bros loyalty app's design system from Sketch to Figma, and laying it out so anyone could find their way around.

fig. 01 — Dutch Bros Coffee

Dutch Bros is a coffee chain in the western US. It came to Hathway to improve its loyalty program. I moved the project from Sketch to Figma: every symbol rebuilt as a component with proper architecture, and new global type and color styles. Then I gave the system a clearer layout and kept managing it from there.

Foundations

Type and color come first. It’s Futura PT from the small button text up to the points counter, and every style is global, so one change reaches every screen.

Dutch Bros UI toolkit typography: the Futura PT scale, from headings to points and money values Dutch Bros UI toolkit color palette: brand colors and additional colors

Atoms, molecules, organisms

The layout builds up from small to large. Atoms are buttons and form fields. Molecules are navigation, tabs and payment. Organisms are the points dials and the reward cards.

Atoms: buttons in every size and state, and input fields Molecules: navigation and tabs, tags, the bottom nav and payment Organisms: points dials, message and reward cards
The whole Dutch Bros system laid out at an angle

Graphics

On the side: a Your Way series about customizing drinks, and a promo for Neeko’s Twitch stream.

Your Way, Your Fave Drinks Hot Raspberry Mocha with an extra Dub shot and Soft Top
Caramelizer Freeze with Soft Top Iced Blue Raspberry Watermelon Rebel Catch Neeko's stream, sponsored by Dutch Bros

One of eight clients from my time at Hathway.