Ads Design System

In 2018 Google set a company-wide goal: every product migrated to Google Material by the end of the year. Material had no desktop web version for enterprise products, ads had never had a design system to migrate to, and the deadline was not achievable. I argued for a slower plan, got it approved, and then had six months taken out of it anyway.

The team was me and one design contractor, for the whole ads ecosystem. At that ratio any amount of drawing components is a rounding error, so the first work was an audit rather than a library.

Fifteen separate specifications were in use, each one a product's own definition of its data tables, its buttons, its tooltips. Eighty-seven components across them, forty-four defined in at least two specs and some in as many as ten.

Twelve data tables is not twelve design decisions. It is twelve places a fix has to land and twelve answers to any question a product team asks. And because the specs were thin, not one of the twelve said what the table did while it was loading, when it was empty, or when someone reached it with a screen reader. The duplication was the visible problem. The gaps underneath it were the expensive one.

I went to the VP of Ads and his leadership team and argued against the date.

If we chased it, teams would restyle their CSS, call it a launch, and nothing underneath would change. We would still have twelve data tables, now painted the right color. The goal would be met and the problem would be untouched.

So the proposal was to build the missing thing first. Not fifteen specs tidied up. One spec: a single source of truth carrying the usage guidelines, the accessibility guidelines, the specifications, the design assets and the front-end implementations. One definition of a data table, built once in each of the two front-end frameworks ads ran on, ACX and Angular, so those are two implementations of one definition rather than two more versions of the thing.

They approved it. If someone asks me what design leadership looks like, I point at that rather than at the components.

Before we drew anything we defined how other people could contribute: a proposal template, a working group anyone could form, and a review with the design system and engineering that could send a proposal back rather than only approve it.

Forty-four designers volunteered into that model and produced eighteen guidelines and specifications. That is resourcing invented out of nothing, and it is the reason the library existed at all.

A change in priorities on several major ads products pulled the roadmap in by two quarters.

The old workflow finished a component before engineering saw it. That is correct, and it is also why the new date was unreachable, because engineering could not start until we were done. So I re-cut the work by who was blocked.

Nothing was removed. The only change is what has to be finished before somebody else can begin. That re-cut is what recovered the six months, and it worked only because the audit, the contribution model and the priority list were already in place when the news arrived.

The system was recognized with the 2020 Ads Luminary Award.

The deadline was never the constraint. What was being delivered was. The honest response to an impossible date was not to work faster but to change the unit of delivery: ship engineering what unblocks engineering and finish the rest behind it.

The second thing I would take anywhere is that the argument which won was a count. Twelve data tables, eleven buttons, ten tooltips. Nobody needed convincing after that, and I have never since tried to sell a design system on consistency as a virtue.

This is the short version. The full case study carries the audit in detail, the governance model, the priority method, the progress tracking and the internal screenshots, and it is password protected.