Patchwork
Developers opened Patchwork’s dashboard only when they had to. Over ten weeks I redesigned it around the keyboard and a command palette, then built it with the company’s two engineers.
Client
Patchwork, Berlin
Year
2024
Type
Developer tool
Role
Design and build
Team
Me and Patchwork’s two front-end engineers
Live
Dashboard behind a login
Ten weeks
Four of design, then six of build, with a build to try every Friday.
Weeks 1–2Watching 12 developers use the old dashboard, and timing sign-up to a first flag
Weeks 3–4The dashboard, command palette and CLI output, tried with eight customer teams
Weeks 5–8A React dashboard with a virtualised table, and shortcuts on every screen
Weeks 9–10Dark and light themes, a test with 20,000 flags, then release to all customers
Patchwork sells feature flags to small engineering teams. Its dashboard did the job, but it slowed down on large accounts, needed the mouse for everything and buried the one action people came for.
New customers took 11 minutes to get from sign-up to a first flag in production. Some gave up and used a config file instead. Patchwork wanted a tool that developers would open on purpose.
Design
I sat with 12 developers while they used the old dashboard and timed what they did. Nearly all reached for the keyboard first, so the command palette became the front door: open it, type a flag name, press Return.
The dashboard is dark by default and dense, because developers scan tables for a living. I designed the CLI output in the same pass, so the terminal and the dashboard use the same words.
Dashboard and CLI output, designed together
A command palette for every action
Tables that stay readable at 20,000 flags
A docs layout that uses the dashboard’s words
Build
I built the dashboard in React, pairing with Patchwork’s two engineers on the table and the palette. The table is virtualised, so it stays smooth with 20,000 flags. Every action has a keyboard shortcut, and the dark and light themes share one set of tokens.
Front-end
React and TypeScript
Table
Virtualised, smooth with 20,000 flags
Keyboard
A shortcut for every action, plus the palette
Themes
Dark by default, light on request, one set of tokens
The result
11 min → 3 min
From sign-up to the first flag in production
60 ms
To filter a list of 20,000 flags, down from two seconds
6 in 10
Actions started from the command palette, a month after release
“Customers used to apologise for our dashboard. Now they tell us which shortcut they use most.”
Lukas Brandt, co-founder and CTO, Patchwork
Next project ·
05
Brisa
Have a product that needs designing and building?