Dec 14, 2023

Creating DoorDashโ€™s visual language

Creator of Dive

First Designer at DoorDash

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 (coming back online soon ๐Ÿ˜…), 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 ๐Ÿ‘‡

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 (coming back online soon ๐Ÿ˜…), 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 ๐Ÿ‘‡

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 (coming back online soon ๐Ÿ˜…), 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 ๐Ÿ‘‡

Join 10,000+ designers

Get our weekly breakdowns

"There's no doubt that Dive has made me a better designer"

@ned_ray

Join 10,000+ designers

Get our weekly breakdowns

"There's no doubt that Dive has made me a better designer"

@ned_ray

Join 10,000+ designers

Get our weekly breakdowns

"There's no doubt that Dive has made me a better designer"

@ned_ray

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watchโ€

Eugene Fedorenko

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watchโ€

Eugene Fedorenko

hello@dive.club

โ’ธ Dive 2024