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 from first concept to 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
The company decided to rebuild on engineering’s advice: the old codebase couldn’t take the features the workflow needed. It took about 16 months, and meanwhile other teams kept the Editor and Generator updated and bug-free until Ad Studio replaced them. Some features had to reach parity with the old apps. The rest was room for things only a canvas made possible, like picking sizes by layout and editing just those.
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. 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 what’s on the canvas
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 designers can skip learning the tool and get straight to the work.
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:
- Layers and timeline, one click away. They open from the persistent tool rail, never buried behind a mode, so the structure of your work is always a click from view.
- Canvas as centre stage. Selection and direct state live on the canvas itself.
- 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.
- Asset library from any state. Open it from anywhere without leaving the canvas.
⤢ Click to zoomA 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 →
⤢ Click to zoomFrom “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 zoomDecisions and what they cost
The rebuild itself was a company call. These are the calls I made inside it. Each one gave something up.
Square first
The early flow let you start from any master: square, vertical or horizontal. Each master carried two resize buttons toward the other layouts, and with 10 to 15 sizes in a set, nobody could explain which way the work was meant to flow. In beta interviews and a Slack channel with selected clients, I asked how people really scaled their creatives. Almost all of them started from the square. So I cut the flow to one path: square first, out to the other masters, then down each column. Most of the design team pushed back, and it shipped anyway. Across thousands of feedback items from our channels, only five to seven users asked for a non-square start.
A designer’s tool, with a ramp for everyone else
At the time the business was targeting professional designers. So I built on the model they already knew from Sketch, Figma and Photoshop: layers, direct operations on the canvas, familiar property types and standard shortcuts like Cmd+D, plus workflow shortcuts for power users. Many customers moving over from the old apps weren’t designers. They got onboarding, video tutorials and a help section organised by stage of the work.
Bulk by default, Focus mode for the exceptions
Editing up to 50 sizes at once had been the platform’s edge over competitors for years, so bulk stayed the default. What changed was the way into a single size. The old apps showed sizes in an ungrouped grid that only scrolled vertically, and single-size editing sat behind a small edit button that appeared on hover. In Ad Studio it became Focus mode. You enter it by clicking a size’s name or by double-clicking, and each double-click goes one level deeper: into that size with the element selected, where its properties can split off from the set (a smaller font, a shorter headline), then into inline text editing. Each press of Esc steps back up a level, all the way out to every size at once.
Every property upfront
The old editor showed properties in a floating bubble on the stage, which only had room for a few. I moved them into a fixed properties bar on the right that shows everything a selected element can change.
What it added up to
Method Timed task study: 10 users built a 10-size campaign in the legacy Editor and Generator, then in the Ad Studio beta. Median time fell 40%.
- Shipped the new flagship workspace, beta then 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.
In the wild From The Brief’s published customer stories. These are platform results, not mine alone.
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.
Reflection
If I did it again, I’d trust my own judgement sooner when the evidence supports it. I nearly backed down on square first after many syncs of arguing, and it held up. Now, when research and the room disagree, I lead with the research and let it make the case.