Building a design system at Grubhub

How a design system changed the business model

Grubhub logo and wordmark

Grubhub enterprise agency’s mission

The model

The transition to Figma

Figma limitation note

Graphical display of file organization
Graphical display of file organization
Example of Figma panel showing components that are local vs components from a library
Left: Wouldn’t work for our purposes, Right: Perfect!

The introduction of a design system

Product buy-in

Table Row/1 ROI

Component breakdown of settings UI
Component breakdown of settings UI
Example of how many table rows were replaced by our reusable component
10 of the table rows that Table Row/1 replaced
IBM’s pattern efficiency equation
IBM’s pattern efficiency equation

Table Row/1 saves an estimated $14,625.00

Strategic rollout of system

Settings and payment preferences with shared components labeled
Reusable component’s value increases rapidly when multiple features use them.

How a design system can change a business direction

Grubhub direct

The impact

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aaron Cecchini-Butler

Senior Systems Designer at Grubhub working on Cookbook (our design system) — as well as contributing to product design work.