Design-System für eine Gesundheitsmarke
Ausbau einer Corporate Identity zur E-Commerce-Plattform – vom restriktiven Brand Design zur conversion-optimierten Oberfläche.
- Kunde: Deutscher Hersteller von Nahrungsergänzungsmitteln & Gesundheitsprodukten
- Projekt-Kontext: Design-System-Restrukturierung, Soft Redesign und E-Commerce-Erweiterung
- Zeitraum: Laufendes Mandat / kontinuierliche Weiterentwicklung
- Meine Rolle: Design Lead (Konzeption des Loyalty-Bereichs, UX-Strategie personalisierter Newsletter, UI/UX-Audit, Systematisierung der Design-Tokens, Conversion-Optimierung)
Angewendete Tools
Die Herausforderung
Das bestehende Corporate Design der Gesundheitsmarke war ursprünglich für großflächige Unternehmenspräsentationen gedacht. Entsprechend dominant waren Schriftgrößen, Weißräume und Layout-Abstände. Mit dem Wandel zu einer interaktiven Web-Plattform stieß dieses Fundament an seine Grenzen: Es kam zu Platzproblemen und funktionalen Konflikten auf mobilen Endgeräten.
Über die Jahre wuchs das Design-System in Figma wie im Code organisch und ohne klare Governance. Das Resultat war eine fragmentierte Komponenten-Bibliothek. Als Design Lead musste ich das System unter Beibehaltung der Marken-DNA bereinigen, ein „Soft Redesign“ zur Optimierung der Informationsdichte durchführen und die Plattform zugleich für einen Online-Shop und komplexe Kundenbereiche vorbereiten.
Prozess & meine Rolle
Als Design Lead habe ich die Transformation der Plattform in vier Bereichen vorangetrieben:
- UX-Konzeption des Loyalty- & Personalisierungs-Bereichs: Ich habe das Konzept für den neuen geschlossenen Kundenbereich („Mein Bereich“) entwickelt. Dazu gehört ein nativer Web-Scan-Flow, über den Kunden Produktverpackungen einlesen, um Treuepunkte gegen Prämien einzutauschen. Zudem habe ich ein datenbasiertes Präferenz-Center konzipiert, mit dem Nutzer ihren Newsletter nach Gesundheitsthemen personalisieren.
- UI/UX-Audit & Soft Redesign: Gegen die akuten Platzprobleme habe ich mithilfe von Claude ein Audit der bestehenden UI-Komponenten durchgeführt. Darauf aufbauend folgte ein Soft Redesign: Schriftgrößen-Hierarchien (Typography Scales) und Layout-Abstände (Spacing Grids) wurden verdichtet und für datenintensive Ansichten optimiert.
- Bereinigung & Neuaufbau des Design-Systems: Ich habe die gewachsene, inkonsistente Figma-Bibliothek aufgeräumt. Die UI-Komponenten wurden als skalierbare Master-Komponenten mit variablen Properties neu aufgebaut. Die Stile wurden in einheitliche Design-Tokens überführt, um eine fehlerfreie Synchronisation zwischen Figma und Entwicklung zu ermöglichen.
- Conversion-Optimierung für den E-Commerce-Rollout: Für die Implementierung des Webshops entwickle ich in Abstimmung mit dem Kunden dedizierte E-Commerce-Komponenten. Der Fokus liegt auf Modulen zur Conversion-Optimierung: Produktdarstellungen, Produktslider und Promotion-Banner für Desktop und Mobile.
Das Ergebnis
Heute steht eine aufgeräumte, konsistente Plattform für eine etablierte Gesundheitsmarke. Das bereinigte System löst die alten Platzprobleme und gibt der Marke eine skalierbare, conversion-optimierte Grundlage für den E-Commerce-Rollout.