03 · Google Cloud · 2015–2021 · a retrospective

Google Codesign

Proves

The pattern predates the hype. I was building the tool a team builds with before there was a model to put in it.

Role

UX Lead and Senior UX Engineer

person UX team, recruited and led: 22
launches the prototyping framework was critical to: 8
users from the first version to Codesign: 11x
projects made in Codesign: 3,752

The problem

On Google Cloud, prototyping a workflow with the product's real components meant writing code. Designers who didn't code drew pictures instead.

A picture of a table isn't a table. It doesn't sort, and it never shows you what happens when the data is ugly.

The move

Two answers

Two answers to the same problem. For people who code, I led UX engineering on a prototyping framework: a facsimile of Google Cloud, used across Cloud to build realistic prototypes.

For people who don't, I conceived of and drove Google Codesign, a design tool that let a designer assemble a working prototype from the existing components without writing any code.

The team

I recruited and led a 22-person UX team to define it, design it, prototype it and research what designers needed from it.

Four steps

Pitch. I built a working prototype in 6 days and demoed it live to all of Cloud UX: import data from a spreadsheet, build the UI in the tool, preview it in the browser. A summer intern turned it into a feature list.
Sprint. I gathered requirements from designers and senior stakeholders, then ran a 3-day design sprint: diverge, define the user, sketch, converge on an MVP.
Build. I recruited engineers, set goals and roles, kept the issue tracker honest and ran bug bashes.
Adopt. All-hands demos, summits, stickers and a commercial, then hand-holding the first teams until they didn't need me.

A meeting room during the design sprint: people around a long table with laptops, a video call on the screens at the end. — Fig. 1

A whiteboard headed "PM: a design tool for non designers", listing what users said they need, with notes on what is in and out of the MVP. — Fig. 1

The thing itself

Animated capture of the design tool. A grid of saved pages opens into an editor with a component tree on the left. A floating action button is picked from a searchable palette and added to a form, with an undo. The page is then previewed as a working form inside the Google Cloud console. — Fig. 2Pick a real component, drop it in the page, preview it in the console. No code written.

Animated capture of the first prototype: a Google Cloud console page of VM instances being built and previewed in the browser. — Fig. 3The first prototype, built in 6 days and demoed live.

Animated capture of CloudKit, the first version: a dashboard of page templates, then a page being edited with a component tree and a property panel, and previewed. — Fig. 4CloudKit, the first version. Start from a template, drag in components, edit their properties, preview.

Coded componentsReal, from the product

Field

Table

Button

No-code canvasA designer composes them

Live previewIt runs, and it is shared

Shared by link

The same parts in all three. The prototype is made of what ships.

Fig. 5Existing components in, a working prototype out.

[CloudKit] provided 1,000s% more flexibility and collaboration during the design and research process, since everyone can contribute to the prototype.

UX designer

The tool was written up on the Angular blog: Moving design beyond pictures (opens in a new tab).

What it took

What it does

The capture shows most of it: saved pages, a component tree, a searchable palette of real components, undo, and a preview that behaves like the console because it is built from the same parts.

Our users were designers: a demanding audience for a design tool.

Research

Watching designers use the first version showed moving between pages mattered more than any component. The journey map made commenting essential, and a company building a similar tool turned out to share our architecture but not our users.

A journey map: lanes of coloured cells tracing the handoffs between designers, engineers and tools. — Fig. 6

A usability study grid: tasks down the side, participants across the top, each cell coloured from easy to impossible. — Fig. 6

Scope creep

Success brought it. Designers wanted stability, product wanted engineering collaboration, the patterns team wanted patterns. I took each group through the roadmap in private, before the meeting, and we agreed an order.

Codesign

The honest part

This is a retrospective. The numbers show designers chose it: 2,691 users and 3,752 projects in Codesign, up from 237 accounts and 399 pages in CloudKit. They don't show which shipped products it changed. I have no way to count that.

The 8 launches belong to the prototyping framework, the coded one. None of them belong to the no-code tool.

It also assumed a person would place every component by hand. That is the assumption that didn't survive.

The outcome

The prototyping framework was critical to 8 launches in GKE, Anthos and Cloud Search. Across my time on Cloud, my work was critical to 7 features, 5 components and 3 patterns in 7 Cloud products.

Codesign reached 659 monthly active users, 11x the users of the version before it. The researcher who wanted to manage became a manager.

Same move as the harness, before there was a model to hand it to.

Google Codesign

The problem