I lead design for RAC, Rumble’s advertising platform. This is its redesign: from a 2021 Bootstrap 3 admin to Vue 3, PrimeVue and Tailwind — shipped page by page without a big-bang release, on a design system rebuilt from the shipped code.
View Live Project
Internal tool. Every screenshot uses seeded demo data; names and figures are fictional.
This case study shows how I redesigned a live revenue platform without ever freezing it — one route at a time, with a way back to the classic interface.
RAC is a self-serve ad platform and an internal admin in one Laravel codebase. It serves three audiences and the teams behind them:
The app started in 2021 on a Bootstrap 3 admin theme. Every new feature added a page, and every page solved its own layout — the stylesheet chain ended up declaring 582 colours and 38 font sizes, and the navigation grew to 140 entries.
Three problems sat on top of each other: a UI that had drifted page by page, an information architecture that scattered single jobs across a dozen screens, and no safe way to change either on a tool that moves advertiser money.
Flows first, then structure, then pixels. I mapped the highest-traffic and most fragmented flows, rebuilt the information architecture around jobs, and put the visual layer on a design system that mirrors the shipped PrimeVue preset.
It ships one route at a time behind a route flag, with an escape hatch back to the classic interface — so advertisers get improvements months earlier and revenue flows never freeze.
Since May 2023 I’ve owned every design and product decision on RAC — flows, information architecture, the design system, and business calls like how off-platform deliverables are priced. I also ship front-end code: the collapsible sidebar and the wallet addresses UI are mine.
A redesigned app shell and navigation, the core advertiser and admin flows, a creator operations workspace, and a design system that developers can build from without guessing.
The redesign made RAC calmer, faster to learn and cheaper to extend — without a single big-bang release.
Before touching pixels I measured the legacy UI, and mapped who uses RAC, who runs it and who builds it.
I scanned the stylesheet chain and the rendered pages that exist in both versions, at 1440px, on the same local data. Four numbers tell the story — and one honest outlier shows what the design system work still targets.
Legacy stylesheet chain (33 files) vs the RAC token collection.
Union across four pages that exist in both versions.
Declared legacy sizes vs the 12 text styles in the design system.
Routes opted into the new shell, Aug 2024 → Sep 2026.
Shipped pages still render five severities at six heights — closing that gap is exactly what the design system targets.
RAC has two kinds of users who rarely meet: the advertisers, publishers and creators who use it, and the internal teams who run it. The internal teams carry most of the complexity — 11 approval queues, 3 sales queues and a finance queue.
I worked with each group directly: ops and account managers on the creator workspace, finance on IO review and invoicing, sales on pricing, support on where advertisers got stuck, and engineering on what could ship in each release.
The visual drift was a symptom, not the cause. To look after one creator, an admin used a 13-column settings table and an edit popup, a separate scheduler, the campaigns list, a third-party viewership tool and Slack for ownership. Key pain points:
Flows first, then structure, then pixels — and every big call written down with the options I turned down.
I mapped the two flows that mattered most, before and after: the advertiser’s campaign builder, the highest-traffic flow, and the admin’s creator management, the most fragmented one. Three tabs became five named steps; five tools became one workspace.
Counting where each job lived in the navigation showed that creator operations needed a workspace of their own — a triage list plus a nine-tab Creator 360 page — and that the whole app needed a navigation that could hold 140 destinations.
Five calls shaped the redesign. For each one I weighed the realistic options and owned the choice.
A design system that mirrors the code, then the product, screen by screen.
The RAC collection holds 54 colour variables with light and dark modes, so dark mode is a mode switch rather than a second palette. Twelve flat text styles mirror the app’s 14px root. Buttons, badges, tags and tables are components with the variants the code actually uses.
Two rules came out of real mistakes: surface tokens that match in light mode but diverge in dark are named by role, and every regular-weight text is bound to a style — because “looks right” is not the same as “will stay right”.
Each pair shows the same data at the same scroll position. Drag the handle to compare the legacy page with the redesign.
The legacy app hid 140 entries behind five top-level dropdowns. The redesign moves navigation into a sidebar grouped by job, with notification counts and an account switcher for agencies. It collapses from 290px to a 67px icon rail, giving tables and charts 223px back, and remembers the choice. I designed it and built it myself.
Creatives lived in one flat grid and could only be attached from inside a campaign. Now advertisers link creatives to one or many campaigns straight from the library, see at a glance where each one runs, and organise the library into folders. Linking shipped in June 2025.
Finding a campaign, a creative or a user meant knowing which of 140 pages it lived on. One search field in the top nav, opened with ⌘K, now returns results and quick actions based on who is searching — advertisers see their own campaigns and creatives; admins search users, sites and approval queues across the platform.
Four switches make the incremental rollout work: a route attribute that opts a page into the redesign, an escape hatch back to the classic interface, a preview gate for unfinished pages, and a per-user permission for dark mode. I sequenced the work for reach and revenue — advertiser flows first, admin tools after — and routes on the redesign went from 54 to 117 between March and June 2026.
The redesign laid the foundation for everything RAC ships next — measured, not guessed:
From zero in August 2024, without a single big-bang release.
Rendered colours down from 40 to 27 on pages in both versions.
Three overloaded tabs became five guided steps.
Five tools for one creator became one workspace.
Colour tokens and text styles matched to the code.
A paid read can no longer multiply its flat rate.
The collapsible sidebar hands data-heavy pages more width.
Same tokens as light, so every new page gets it for free.
Two tokens were identical in light and opposite in dark. Defining “recedes” and “rises” surfaces first would have saved a sweep of 192 cells.
A dark-mode value changed in the source but was never published. A release step with a changelog closes that loop.
A scrolling tab strip shipped on 13 frames before the rule — the menu, never a tab strip — was written down.
The escape hatch was instrumented from day one, but task time wasn’t captured beforehand. Next time the baseline comes first.
