Creating DoorDash’s visual language

Put yourself in this situation...

A hyper-growth startup hires you as the first designer 🙌

Oh, but keep in mind that ~8 engineers have already spent ~2 years building out the product.

So you're inheriting a lot of surface area and a pretttttty limited set of design assets 😬

It's up to you to raise the quality bar 💪

But how do you match the pace of the company while simultaneously refining the underlying visual language?

That question is why I wanted to interview the first designer at DoorDash ☞ Kathryn Gonzalez​

Creating a visual language

Kathryn joined DoorDash in 2015 where she went on to lead design systems and eventually became the Head of Design Infrastructure.

But she didn't officially create a "design system" until 2017

That's because it's important to take small steps vs. pitching a larger infrastructure project right out of the gate 👇

You have to scale back infrastructure change into something that a founder can't easily point at and say "no that's not worth it"
​— Kathryn

It's why I went so far as to say that I would never use the phrase "design system" because it's a loaded term that feels scary to leaders and engineers.

There is a skill and art to reframing design system work
— Kathryn

Start by nailing the core building blocks

Every company has a set of obvious tokens and components that make a lot of sense to establish as early as possible.

Focus on the design elements that you'll use on almost every page—things like buttons, colors, and typography.

I think it's 100% worth investing in 1:1 parity between design and code for your core building blocks.

You can wire these up in code in less than a day and reap the efficiency rewards for a long time.

Also don't feel like you have to "figure out" the design language first...

Because investing in a small set of tokens/components means you're eliminating copying and pasting in code.

And by doing that you're minimizing the amount of knobs you have to turn to make future changes.

That's why nailing the core building blocks enables future iteration 💡

Keep the system as small as possible

Outside of these core building blocks, you shouldn't be too concerned with design debt (especially in the early stages of a company).

Similar to how Adrien from Linear talked about designing on top of product screenshots, Kathryn says to:

Embrace the chaos... it's a losing battle to try to make sure every piece lives inside of the design system. That's just not realistic.
— Kathryn

You might be surprised by how long you can ignore everything outside of the core building blocks too!

In my Deep Dive with Lauren LoPrete from Cash App, she talked about how they started with the obvious things like tokens, buttons, inputs, etc. and didn't include much beyond that.

She's optimistic that Cash App will start to add larger "patterns" to the design system but it's not a given...

Kathryn didn't get buy in to build the "official" design system until DoorDash decided to implement a full rebrand in 2017.

But that didn't stop her from investing in the visual language as early as possible 👀

She gives a behind-the-scenes of what it's like as the first designer at a high growth startup and shares how she built the design systems team from scratch in this week's episode 👇

Listen on YouTube, Spotify, iTunes, or wherever you get your podcasts 👇