Toast -
Consumer Brand Style Guide
& Takeout App (Design System)
A seamless consumer experience that reflects the warmth and authenticity of their local restaurant community, enhancing and enabling future interactions with their favorite dining establishments to inspire loyalty and help Toast customers thrive.
2024
Product Design
AT A GLANCE
As a restaurant operating system powering end-to-end dining experiences, Toast is uniquely positioned
to build a differentiated product for consumers, delivering a new level of value and convenience.
While we developed our digital ordering product (Takeout App) primarily as tool to help
restaurants serve their guests, we’ve identified an opportunity to go beyond this!
Building off the strong B2B foundation, this product can create magical, consumer-first interactions
that connect them more authentically to their local restaurants, fostering a massive network of
devoted fans who actively seek out Toast establishments.
ROLE
& CONTRIBUTION
& CONTRIBUTION
Lead Product Design
- Define the Toast consumer brand positioning and codify all brand elements, including the unique
visual system that makes the expression ownable, consistent, and memorable.
- Create a scalable system for efficiency and velocity.
- Create robust tactical guidelines to empower self-service and enable strategic design and execution
decisions.
- Ensure cohesive and consistent interaction across all surfaces for an experience that reflects the
seamless capabilities.
- Establish clear parameters for use.
- Takeout App redesign (WIP).
IMPACT
People have begun to embrace the brand and are mastering interaction with its consistent visual language.
The team of engineers experienced a noticeable decrease in workload, attributed to their ability to reuse existing UI components. This efficiency was further facilitated by the designers' provision of more consistent mockups adhering to a set of predefined patterns.
Business Metrics - Adoption Rate
Internal Metrics - Design to Development Handoff
In less than half a year, the component library experienced substantial growth, with coverage expanding from 9% to an impressive 89%.
Maximizing the reuse of components is the primary objective in advancing the design system. Currently, default component usage stands at 36.4%, while adjusted component usage has increased to 45.5%. However, there remains a portion of 18.2% of component usage categorized as detachments, indicating areas for improvement.
Quantitative Metrics - Components Coverage
Quantitative Metrics - Components Usage
Default Components Used
Adjusted Components Used
Secondary Components Coverage
Main Components Coverage
Component Detachments (Figma)
Consumer Brand Style Guide
Takeout App Design System
& Component Build Process
STEP 1: Design Audit
Where the components show up across products,
decide how many of those versions are actually
needed.
STEP 2: Prioritize
Which ones are most core? Let’s design those first.
STEP 3: Prototype & Pressure Test
Apply the component across applicable surfaces to pressure test the result. Refine.
STEP 4: Test
Accessibility and usability.
STEP 5: Document & Communicate
While this should happen ahead of time with teams, share final result in #design-guest-native (something public)
Design System - Foundations
Utility Iconography
Design System - Components
Takeout App Redesign
Takeout App Redesign - Prototyping
Thanks for scrolling