Ad Studio
From two fragmented apps to one ad-production platform. I led the design end to end, from first concept to v1, and built the system underneath it.
⤢ Click to zoomWhat I did, in one paragraph
Ad Studio is a banner editor used by marketing teams, agencies and in-house brand teams to design ads end to end. I led its design to beta and v1 as the single responsible designer on a 10-person team. Before this work, the same job lived across two separate apps. The Editor handled one ad at a time, the Generator did the bulk work with older patterns, and a one-way wizard stitched the two together. To ship a single campaign, users had to learn two design languages. I owned the UX architecture, built the design system on MUI, completely overhauled and customised to our needs, and designed the multi-format variant workflow so one master design covers every ad size, without leaving the canvas.
From two products to one platform
Before Ad Studio, the same job lived in two products. The Editor handled one ad at a time. The Generator did the bulk work with its own way of doing things, and a wizard moved you from one to the other in a single direction only. To ship one campaign, you had to work in two different design languages.
Bringing both halves onto one platform sounds simple. The hard part was everything underneath, and it broke down into three problems.
Two products, two mental models
The Editor and Generator worked in different ways, joined only by a one-way wizard. Shipping one campaign meant moving through both, with no real handoff in between.
A dated UI on a dying codebase
The old stack had reached end of life and the UI had fallen years behind tools like Figma and Sketch. Patching wasn’t an option. It had to be rebuilt from the ground up, with none of the old interface carried over.
One system, 13+ layer types, 50+ sizes
With everything on one surface, every pattern had to scale. The inspector had to handle 13+ layer types, the work had to track 50+ ad sizes, and the component library had to hold together as more features landed on it.
Four principles I set before designing a single screen
Before any screen, I set the rules the whole workspace would follow. These are the why behind every decision that came after.
One inspector, one pattern
Every layer type uses the same panel layout. Learn the inspector once and you know it for all of them.
Trust the canvas, not the panel
The inspector describes what you selected. The canvas shows the real state: what’s selected, what’s pinned, what your next edit will overwrite.
Defaults first, power when you ask for it
Good defaults cover the common case. The advanced controls stay out of the way until you reach for them.
Borrow what designers already know
Three-pane layout, infinite canvas, layers panel, keyboard shortcuts. Ad Studio uses the same spatial model as Figma and Sketch, so the learning goes into the work, not the tool.
Unifying two apps into one persistent surface
The architecture was the first thing to solve. Two apps joined by a one-way wizard became one canvas, where single-ad design and multi-format bulk work live in the same place, on a modern stack, using patterns designers already know.
On that surface, a handful of structural choices did the heavy lifting:
- Persistent layers panel and timeline. Never hidden behind a mode. The structure of your work is always in view.
- Canvas as centre stage. Selection and direct state live on the canvas itself, not buried in a panel.
- Layer-type-aware inspector. One panel, same pattern, adapting its controls to whatever is selected.
- Multi-artboard ribbon. Every ad size in the campaign lives on one canvas, not in a separate app.
- Asset library from any state. Reachable everywhere, never a separate workspace you have to leave the canvas for.
A system built bottom-up so v1 wouldn’t outgrow it
A surface this broad only holds together if the system underneath is built for it. So I built from the bottom up: tokens at the base, primitives assembled from them, then compound patterns for the real UI. Components reference the layer above, never raw values, so one change at the foundation flows through everything.
I built it on a tailored Material UI base, with the component library implemented in Storybook alongside engineering under strict design-to-code parity. That’s what let the inspector cover 13+ layer types and the work span 50+ sizes without fragmenting, and it kept front-end handoff fast and unambiguous. Read the design system case study →
From “duplicate every format manually” to “one design, many ads”
The payoff of the whole system is the production workflow. None of the old tools did this well. Instead of rebuilding every size by hand, you design one master and the rest follow, with control where it matters.
Define master
Design the primary creative once, the source of truth for the set.
Configure overrides
Set what can shift per size: image, position, what’s pinned and what flows.
Bulk-generate
Produce every format across all 50+ ad sizes from that one master.
Review and polish
Refine individual variants where they need a human eye, without breaking the set.
⤢ Click to zoomWhat it added up to
- Shipped the new flagship workspace from beta to v1, putting single-ad design and multi-format production on one canvas.
- Replaced two disconnected apps and a one-way wizard with a single surface, on a modern stack, built from patterns designers already knew.
- Established the bottom-up design system, the inspector and the variant workflow that the platform’s later work was built on.
The platform’s generative AI tools for text and image were added later, in early 2024, by another team, reusing this foundation. Building the workspace and its system first is what let that layer arrive quickly and stay consistent. A few outcome metrics from this period are still being confirmed.
Reflection
If I did it again, I’d commit to the canvas sooner. Early on I let it share the story with modes and panels. The moment I trusted it as the single source of truth, what’s selected, what’s pinned, what’s ground, the rest of the patterns fell into place.