Ich leite das Design von RAC, der Werbeplattform von Rumble. Das ist ihr Redesign: von einem Bootstrap-3-Admin aus dem Jahr 2021 zu Vue 3, PrimeVue und Tailwind — Seite für Seite ausgeliefert, ohne Big-Bang-Release, auf einem Design System, das aus dem ausgelieferten Code neu aufgebaut wurde.
Live-Projekt ansehen
Internes Tool. Alle Screenshots zeigen Demodaten; Namen und Zahlen sind fiktiv.
Diese Case Study zeigt, wie ich eine umsatzkritische Live-Plattform neu gestaltet habe, ohne sie je einzufrieren — Route für Route, mit einem Weg zurück zur klassischen Oberfläche.
RAC ist eine Self-Service-Werbeplattform und ein internes Admin-Tool in einer Laravel-Codebasis. Sie bedient drei Zielgruppen und die Teams dahinter:
Die App startete 2021 auf einem Bootstrap-3-Admin-Theme. Jedes neue Feature brachte eine Seite mit, und jede Seite löste ihr Layout auf eigene Faust — am Ende deklarierte die Stylesheet-Kette 582 Farben und 38 Schriftgrößen, und die Navigation wuchs auf 140 Einträge.
Drei Probleme lagen übereinander: eine UI, die Seite für Seite auseinandergedriftet war, eine Informationsarchitektur, die einzelne Aufgaben über ein Dutzend Screens verstreute, und kein sicherer Weg, beides an einem Tool zu ändern, über das Werbebudgets laufen.
Erst Flows, dann Struktur, dann Pixel. Ich habe die meistgenutzten und am stärksten fragmentierten Flows kartiert, die Informationsarchitektur um Aufgaben herum neu aufgebaut und die visuelle Ebene auf ein Design System gestellt, das das ausgelieferte PrimeVue-Preset abbildet.
Ausgeliefert wird Route für Route hinter einem Route-Flag, mit einem Notausgang zurück zur klassischen Oberfläche — so bekommen Werbetreibende Verbesserungen Monate früher, und umsatzrelevante Flows frieren nie ein.
Seit Mai 2023 verantworte ich jede Design- und Produktentscheidung bei RAC — Flows, Informationsarchitektur, das Design System und Business-Entscheidungen wie die Bepreisung von Off-Platform-Deliverables. Ich liefere auch Frontend-Code: die einklappbare Sidebar und die Adressverwaltung im Wallet stammen von mir.
Eine neue App-Shell und Navigation, die zentralen Flows für Werbetreibende und Admins, ein Workspace für Creator-Operations und ein Design System, mit dem Entwickler ohne Rätselraten bauen können.
Das Redesign hat RAC ruhiger, schneller erlernbar und günstiger erweiterbar gemacht — ohne einen einzigen Big-Bang-Release.
Bevor ich einen Pixel angefasst habe, habe ich die Legacy-UI vermessen und kartiert, wer RAC nutzt, wer es betreibt und wer es baut.
Ich habe die Stylesheet-Kette und die gerenderten Seiten, die es in beiden Versionen gibt, bei 1440px mit denselben lokalen Daten gescannt. Vier Zahlen erzählen die Geschichte — und ein ehrlicher Ausreißer zeigt, woran die Design-System-Arbeit noch arbeitet.
Legacy-Stylesheet-Kette (33 Dateien) vs. die RAC-Token-Sammlung.
Vereinigung über vier Seiten, die es in beiden Versionen gibt.
Deklarierte Legacy-Größen vs. die 12 Textstile im Design System.
Routen, die in die neue Shell gewechselt sind, Aug. 2024 → Sept. 2026.
Ausgelieferte Seiten rendern noch fünf Varianten in sechs Höhen — genau diese Lücke soll das Design System schließen.
RAC hat zwei Arten von Nutzern, die sich selten begegnen: die Werbetreibenden, Publisher und Creator, die es nutzen, und die internen Teams, die es betreiben. Die internen Teams tragen den Großteil der Komplexität — 11 Freigabe-Queues, 3 Vertriebs-Queues und eine Finanz-Queue.
Ich habe mit jeder Gruppe direkt gearbeitet: mit Ops und Account Managern am Creator-Workspace, mit Finanzen an IO-Prüfung und Rechnungsstellung, mit dem Vertrieb an der Preisgestaltung, mit dem Support daran, wo Werbetreibende hängen blieben, und mit dem Engineering daran, was in jedem Release live gehen konnte.
Der visuelle Wildwuchs war ein Symptom, nicht die Ursache. Um einen einzigen Creator zu betreuen, nutzte ein Admin eine Einstellungstabelle mit 13 Spalten und ein Bearbeitungs-Popup, einen separaten Scheduler, die Kampagnenliste, ein externes Viewership-Tool und Slack für Zuständigkeiten. Die wichtigsten Schmerzpunkte:
Erst Flows, dann Struktur, dann Pixel — und jede große Entscheidung schriftlich festgehalten, samt der Optionen, die ich verworfen habe.
Ich habe die zwei wichtigsten Flows vorher und nachher kartiert: den Kampagnen-Builder der Werbetreibenden, den meistgenutzten Flow, und das Creator Management der Admins, den am stärksten fragmentierten. Aus drei Tabs wurden fünf benannte Schritte, aus fünf Tools ein Workspace.
Die Zählung, wo jede Aufgabe in der Navigation lag, zeigte: Creator-Operations brauchten einen eigenen Workspace — eine Triage-Liste plus eine Creator-360-Seite mit neun Tabs — und die ganze App brauchte eine Navigation, die 140 Ziele tragen kann.
Fünf Entscheidungen haben das Redesign geprägt. Bei jeder habe ich die realistischen Optionen abgewogen und die Wahl verantwortet.
Ein Design System, das den Code abbildet — dann das Produkt, Screen für Screen.
Die RAC-Sammlung enthält 54 Farbvariablen mit hellem und dunklem Modus, sodass der Dark Mode ein Moduswechsel statt einer zweiten Palette ist. Zwölf flache Textstile bilden die 14px-Basis der App ab. Buttons, Badges, Tags und Tabellen sind Komponenten mit genau den Varianten, die der Code nutzt.
Zwei Regeln entstanden aus echten Fehlern: Surface-Tokens, die im hellen Modus gleich sind, im dunklen aber abweichen, werden nach ihrer Rolle benannt, und jeder Text in Regular-Schnitt ist an einen Stil gebunden — denn „sieht richtig aus“ ist nicht dasselbe wie „bleibt richtig“.
Jedes Paar zeigt dieselben Daten an derselben Scrollposition. Ziehen Sie den Regler, um die Legacy-Seite mit dem Redesign zu vergleichen.
Die Legacy-App versteckte 140 Einträge hinter fünf Dropdowns auf oberster Ebene. Das Redesign verlegt die Navigation in eine nach Aufgaben gruppierte Sidebar, mit Benachrichtigungszählern und einem Konto-Wechsler für Agenturen. Sie klappt von 290px auf eine 67px schmale Icon-Leiste ein, gibt Tabellen und Diagrammen 223px zurück und merkt sich die Wahl. Ich habe sie gestaltet und selbst gebaut.
Creatives lagen in einem flachen Raster und ließen sich nur aus einer Kampagne heraus zuordnen. Jetzt verknüpfen Werbetreibende Creatives direkt aus der Bibliothek mit einer oder mehreren Kampagnen, sehen auf einen Blick, wo jedes läuft, und ordnen die Bibliothek in Ordnern. Die Verknüpfung ging im Juni 2025 live.
Eine Kampagne, ein Creative oder einen Nutzer zu finden hieß, zu wissen, auf welcher von 140 Seiten er lag. Ein Suchfeld in der Top-Navigation, geöffnet mit ⌘K, liefert jetzt Ergebnisse und Schnellaktionen je nachdem, wer sucht — Werbetreibende sehen ihre eigenen Kampagnen und Creatives, Admins durchsuchen Nutzer, Websites und Freigabe-Queues der ganzen Plattform.
Vier Schalter machen den schrittweisen Rollout möglich: ein Route-Attribut, das eine Seite ins Redesign schaltet, ein Notausgang zurück zur klassischen Oberfläche, ein Preview-Gate für unfertige Seiten und eine Berechtigung pro Nutzer für den Dark Mode. Ich habe die Arbeit nach Reichweite und Umsatz priorisiert — erst die Flows für Werbetreibende, danach die Admin-Tools — und die Routen im Redesign stiegen zwischen März und Juni 2026 von 54 auf 117.
Das Redesign hat das Fundament für alles gelegt, was RAC als Nächstes ausliefert — gemessen, nicht geraten:
Von null im August 2024, ohne einen einzigen Big-Bang-Release.
Gerenderte Farben von 40 auf 27 gesenkt, auf Seiten in beiden Versionen.
Aus drei überladenen Tabs wurden fünf geführte Schritte.
Aus fünf Tools für einen Creator wurde ein Workspace.
Farb-Tokens und Textstile, abgestimmt auf den Code.
Ein bezahlter Read kann seine Pauschale nicht mehr vervielfachen.
Die einklappbare Sidebar gibt datenlastigen Seiten mehr Breite.
Dieselben Tokens wie im hellen Modus, jede neue Seite bekommt ihn also gratis.
Zwei Tokens waren im hellen Modus identisch und im dunklen gegensätzlich. Hätte ich zuerst „zurücktretende“ und „hervortretende“ Surfaces definiert, wäre eine Korrektur von 192 Zellen entfallen.
Ein Dark-Mode-Wert wurde in der Quelle geändert, aber nie veröffentlicht. Ein Release-Schritt mit Changelog schließt diese Lücke.
Eine scrollende Tab-Leiste landete auf 13 Frames, bevor die Regel — das Menü, nie eine Tab-Leiste — festgehalten war.
Der Notausgang war vom ersten Tag an instrumentiert, aber die Aufgabendauer wurde vorher nicht erfasst. Nächstes Mal kommt die Baseline zuerst.
