rhenag: Individuelles Design-System

Das mandantenfähige rhenag Design-System

Wie wir für einen regionalen Energieversorger ein skalierbares Design-System entwickelten, das Markenkonsistenz über alle Mandanten gewährleistet und dabei maximale Flexibilität für Kooperationen, Abteilungen und Dienstleister ermöglicht.

UX/UI-Design

Web/App Development

Systemarchitektur

Administration/DevOps

API/Schnittstellen

CMS

Jahr
2022 - heute

Kunde
rhenag

Sektor
Energieversorger

Herausforderung
Balance zwischen Einheitlichkeit, Flexibilität und Kompatibilität mit verschiedenen Frameworks, Geräten und Browsern

Technologien
Figma

Unsere Rolle
Ideenfindung, Konzeption und Umsetzung

Die ursprüngliche Anforderung?

Services und Kommunikation in der digitalen Welt ausbauen, mit einem Partner, der ganzheitlich betreut.

Was daraus wurde?

Ein mandantenfähiges Design-System, das zeigt: Skalierbarkeit und Markenkonsistenz sind kein Widerspruch, wenn die Architektur stimmt.

"Skalierbare Design-Systeme sind keine Frage von Tools, sondern von Architektur. rhenag brauchte kein Corporate-Design-Manual, sie brauchten ein lebendiges, kollaboratives Ökosystem."

Herausforderungen

Markenkonsistenz über diverse Mandanten

Die Situation:

rhenag hat diverse Kooperationen und Partnerlieferanten. Jeder braucht eine eigene digitale Präsenz, aber alle müssen erkennbar zur rhenag-Familie gehören. Gleichzeitig muss jeder Mandant seine eigene Identität bewahren können: Eigene Farben für Co-Branding, eigene Bildsprachen für spezifische Zielgruppen, eigene Schwerpunkte in der Kommunikation.

Die Herausforderung:

Wie schafft man ein System, das beides ermöglicht? Konsistenz UND Flexibilität? Wiedererkennung UND Differenzierung? Ein zu starres System erstickt Individualität. Ein zu flexibles System verliert die Markenkohärenz.

Standard-Corporate-Design-Manuals sagen: "So muss es aussehen." Aber sie sagen nicht: "So kannst du es flexibel anpassen, ohne die Marke zu verwässern." Das Resultat: Entweder halten sich alle sklavisch an starre Vorgaben (und wirken austauschbar), oder jeder macht sein eigenes Ding (und die Markenfamilie zerfällt).

Die Folge:

Ohne intelligentes System: Jede neue Kooperation bedeutet eine komplett neue Website. Inkonsistente Markendarstellung schwächt die Gesamtmarke. Wartungsaufwand wird unbezahlbar.

Zusammenarbeit mit mehreren Dienstleistern

Die Situation:

rhenag arbeitet mit verschiedenen Agenturen und Dienstleistern. Jede Agentur hat ihre eigenen Prozesse, ihre eigenen Tools, ihre eigene Interpretation der Marke. Wenn jede Agentur von Null anfängt, entstehen Parallelentwicklungen: Agentur A entwickelt eine Header-Komponente, Agentur B entwickelt eine andere Header-Komponente, für die gleiche Marke.

Die Herausforderung:

Wie schafft man eine gemeinsame Arbeitsgrundlage für alle Dienstleister? Wie stellt man sicher, dass alle mit den gleichen Design-Elementen arbeiten? Wie vermeidet man, dass jede Agentur das Rad neu erfindet? Wie ermöglicht man gleichzeitig, dass gute Ideen von allen übernommen werden können?

Das klassische Corporate-Design-Manual ist ein PDF. Statisch. Nicht erweiterbar. Nicht kollaborativ. Wenn eine Agentur ein neues Element entwickelt, bleibt es in ihrem Projekt, andere profitieren nicht davon.

Die Folge:

Ohne gemeinsames System: Parallelentwicklungen verursachen doppelte Kosten. Inkonsistente Implementierungen schwächen die Marke. Wissen bleibt in Silos stecken.

Schnelle Marktreaktionsfähigkeit

Die Situation:

Energiemärkte ändern sich schnell. Neue Tarife müssen beworben werden. Kampagnen müssen kurzfristig aufgesetzt werden. Partnerprojekte brauchen schnell digitale Präsenz. Die bisherige Realität: Jede neue Website oder Landingpage ist ein Projekt von mehreren Wochen. Briefing, Konzeption, Design, Freigabe, Entwicklung, Testing, Go-Live. Zu langsam für dynamische Märkte.

Die Herausforderung:

Wie reduziert man Time-to-Market drastisch? Wie ermöglicht man, dass rhenag selbstständig Landingpages erstellen kann, ohne auf externe Dienstleister warten zu müssen? Wie schafft man gleichzeitig Qualitätssicherung, damit nicht jede Abteilung ihr eigenes Design-Chaos produziert?

Die Balance zwischen Geschwindigkeit und Qualität ist schwierig. Zu viel Kontrolle bremst. Zu wenig Kontrolle führt zu Wildwuchs.

Die Folge:

Ohne schnelles System: Marktchancen werden verpasst. Kampagnen starten zu spät. Wettbewerber sind schneller. Kosten für externe Dienstleister explodieren.

Eigenständigkeit vs. Zugehörigkeit

Die Situation:

Die Kundenmarke rhenag-energie sollte sich visuell von der rhenag-Unternehmensmarke abheben, ohne die Markenfamilie zu spalten. Die Herausforderung: Eigenständigkeit schaffen und dennoch die Zugehörigkeit zur Unternehmensidentität bewahren. Zu ähnlich? Die Marken verschwimmen. Zu unterschiedlich? Die Familienzugehörigkeit geht verloren.

Die Herausforderung:

Wie schafft man ein Design-System, das diese Balance ermöglicht? Das System muss Spielräume definieren: Welche Elemente sind fix (Logo, Grundtypografie)? Welche Elemente sind flexibel (Farbwelt, Bildsprache)? Welche Elemente sind mandantenspezifisch (Spezial-Icons, Kampagnen-Elemente)?

Diese Balance ist nicht nur visuell, sondern auch technisch: Das CMS muss verstehen, was fix und was flexibel ist. Designer müssen diese Regeln verstehen und anwenden können. Entwickler müssen sie technisch umsetzen können.

Die Folge:

Ohne klare Systematik: Marken wirken entweder austauschbar (zu wenig Eigenständigkeit) oder zusammenhangslos (zu viel Eigenständigkeit).

Die Dimension des Design-Systems

Wenn Konsistenz auf Skalierbarkeit trifft, messbare Effizienz statt theoretischer Konzepte

Mandantenfähiges System

Ein System, viele Identitäten

Das Design-System ermöglicht es rhenag, eigenständig und schnell Websites und Landingpages zu erstellen. Für verschiedene Mandanten: Kooperationen, Partnerlieferanten, Abteilungen, Beteiligungen. Jeder Mandant kann Corporate-Design-Elemente wie Farben, Bildsprachen oder Schriften anpassen, innerhalb definierter Spielräume.

Technische Implikation:

Das Headless CMS NEOS trennt Design, Inhalt und Mandanten. Diese Trennung ist nicht nur konzeptionell, sondern technisch implementiert: Mandanten haben eigene Konfigurationsdateien, in denen Farben, Schriften und Bildsprachen definiert werden. Das System wendet diese Konfigurationen automatisch auf alle Templates an.

Der Vorteil für rhenag:

Neue Mandanten können in Tagen statt Monaten aufgesetzt werden. Keine komplett neuen Websites, sondern Instanzen des gleichen Systems mit individuellen Design-Parametern. Markenkonsistenz ist technisch garantiert, innerhalb der definierten Spielräume.

Template-Pool-Architektur

Kollaboratives Wissens-Ökosystem

Alle Design-Elemente und Templates werden zentral im Pool verwaltet. Jede Agentur, jede Abteilung, jede Beteiligung kann darauf zugreifen und für ihre Zwecke nutzen. Entwickelt eine Agentur ein neues Element, das auch für andere interessant sein könnte, wird es in den Pool aufgenommen, und steht sofort allen, oder auf Wunsch auch nur einigen, zur Verfügung.

Technische Implikation:

Der Template-Pool ist nicht nur eine Design-Bibliothek, sondern technisch integriert im CMS: Templates sind als wiederverwendbare Module implementiert. Jedes Modul hat definierte Parameter (Farben, Texte, Bilder). Neue Module werden in den Pool eingepflegt. Alle bestehenden Projekte können auf neue Versionen upgraden.

Der Vorteil für Effizienz:

Designer müssen nicht bei Null anfangen. Entwickler müssen nicht jedes Element neu bauen. Jeder profitiert von den Entwicklungen aller. Das System wächst organisch mit jedem Projekt. Wartung erfolgt zentral, Updates propagieren zu allen Instanzen.

Corporate Design Refresh

Eigenständig im Auftritt, stark in der Familie

Ein neues Corporate Design, das emotional anspricht und klar differenziert: Moderne, charakterstarke Typografie. Erweiterte Farbwelt mit hohem Wiedererkennungswert. Von Hand illustrierte Iconsprache, die rhenag im Wettbewerbsumfeld einzigartig macht. Der Markenkern "Regional. Nah. Digital." wird visuell unterstützt.

Design-Implikation:

Die Typografie ist charakterstark, aber lesbar. Die Farbwelt ist erweitert, aber nicht beliebig, jede Farbe hat eine Bedeutung im System. Die hand-illustrierten Icons sind nicht nur dekorativ, sie transportieren die Markenwerte: Regional (erkennbare Motive), Nah (menschlich gezeichnet), Digital (moderne Umsetzung).

Der Vorteil für Differenzierung:

rhenag sieht nicht aus wie jeder andere Energieversorger. Die Bildsprache ist unverwechselbar. Gleichzeitig ist die Gestaltung skalierbar: Neue Icons können im gleichen Stil erstellt werden. Die Farbwelt erlaubt Variationen für verschiedene Mandanten.

"Design-Systeme sind dann erfolgreich, wenn sie nicht als Einschränkung empfunden werden, sondern als Beschleuniger.

Das rhenag-System schafft genau das."

Unsere Lösung

Ein kollaboratives Design-Ökosystem

rhenag benötigte kein weiteres PDF-Manual. Sie brauchten ein intelligentes System, das:

Markenkonsistenz über alle Mandanten gewährleistet
Flexibilität für individuelle Anpassungen ermöglicht
Kollaboration zwischen verschiedenen Dienstleistern fördert
Schnelle Time-to-Market für neue Projekte garantiert

rhenag Designsystem im Einsatz auf Website auf orange und dunkellila Hintergrund

Säule 1

Technologie trifft
Corporate Identity

Vom statischen Corporate-Design-Manual zum lebendigen System

Was wir gebaut haben

Ein mandantenfähiges CMS auf Basis von NEOS, das die Trennung von Design, Inhalt und Mandanten nicht nur konzeptionell, sondern technisch umsetzt. Jeder Mandant hat eine individuelle Konfiguration, aber basiert auf dem gleichen Template-Pool.

Die Architektur im Detail:

Mandanten-Konfiguration: Jeder Mandant hat eine Konfigurationsdatei, die Design-Parameter definiert:

Primärfarbe, Sekundärfarben, Akzentfarben
Schriftarten (innerhalb der definierten Typo-Familie)
Bildsprachen-Präferenzen
Spezifische Icon-Sets

Diese Konfiguration wird beim Rendering angewendet, automatisch, ohne manuelle Eingriffe.

Template-Pool-Integration: Alle Templates greifen auf zentrale Module zu. Ein Header-Modul hat definierte Parameter (Logo-Position, Navigation-Style, Hintergrundfarbe). Die Mandanten-Konfiguration füllt diese Parameter. Das Ergebnis: Konsistente Struktur, individuelle Erscheinung.

Vorteile der Architektur:

Für rhenag: Neue Mandanten in Tagen statt Monaten aufsetzen. Zentrale Wartung reduziert Aufwand. Updates propagieren zu allen Mandanten.

Für Mandanten: Individuelle Identität innerhalb der Markenfamilie. Keine technische Komplexität, nur Konfiguration.

Für Dienstleister: Klare technische Basis. Keine Parallelentwicklungen. Fokus auf Mehrwert statt Grundlagen-Arbeit.

Säule 2

Kollaboratives
Design-System in Figma

Living Document statt statisches PDF

Was wir entwickelt haben:

Ein ständig wachsendes Design-System, das alle nutzen und erweitern können. Keine Silos, sondern ein gemeinsames Wissens-Ökosystem.

Die System-Struktur:

Design-Elemente dokumentiert:

Alle auf einer Website verwendbaren Elemente sind einzeln aufgelistet:

Typografie (Überschriften, Fließtext, Auszeichnungen)
Farben (Primär, Sekundär, Funktional, Mandantenspezifisch)
Buttons (Varianten, Zustände, Größen)
Formulare (Inputs, Dropdowns, Checkboxen, Validierung)
Cards (Produkt-Cards, Content-Cards, Service-Cards)
Navigation (Desktop, Mobile, Mega-Menu)
Icons (Hand-illustriert im rhenag-Stil)

Jedes Element ist seinen Eigenschaften zugeordnet: Abmessungen, Abstände, Farben, Schriften, Schatten.

Elementzustände definiert:

Das System beschreibt nicht nur, wie Elemente aussehen, sondern auch, wie sie sich verhalten:

Default-State (Grundzustand)
Hover-State (Maus darüber)
Active-State (während Klick)
Focus-State (Tastatur-Navigation)
Disabled-State (nicht interagierbar)
Error-State (bei Formularen)

Diese Zustände sind visuell dokumentiert: Designer sehen sofort, wie ein Button auf Hover reagiert. Entwickler haben klare Vorgaben für Implementierung.

Micro-Animations dokumentiert:

Zu modernen Websites gehören Micro-Animations. Diese sind in einem separaten Dokument beschrieben und dargestellt: Übergangsanimationen, Scroll-Effekte, Lade-Animationen, Feedback-Animationen. Das Designsystem verweist auf dieses Dokument.

Der kollaborative Workflow:

Agentur A entwickelt neues Element: Beispiel: Interaktives Tarifvergleichs-Modul für eine Kampagne
Element wird in Figma dokumentiert: Mit allen Zuständen, Animationen, Parametern
rhenag prüft Eignung für Template-Pool: Ist das Element generisch nutzbar für andere Projekte?
Element wird in Pool aufgenommen: Entwickler implementieren als CMS-Template
Alle profitieren: Andere Agenturen und Abteilungen können das Modul nutzen

Vorteile des Systems:

Für Designer: Nicht bei Null anfangen. Bestehende Komponenten nutzen. Fokus auf projektspezifische Anforderungen.

Für Entwickler: Klare Spezifikationen. Export direkt aus Figma. Konsistente Implementierung über Projekte hinweg.

Für rhenag: Wissen bleibt im Unternehmen. Investitionen in Design-Elemente zahlen sich mehrfach aus. Qualität steigt kontinuierlich.

Säule 3

Corporate Design Refresh

Eigenständigkeit mit Familienzugehörigkeit

Was wir gestaltet haben:

Ein visuelles Refresh, das die Marke rhenag differenziert, ohne sie von der Unternehmensmarke zu entfremden. Die Balance zwischen Eigenständigkeit und Zugehörigkeit ist visuell gelöst.

Die Design-Elemente:

Typografie:

Charakterstarke, moderne Schrift als Markenschrift. Lesbar, aber mit Persönlichkeit. Verschiedene Schriftschnitte für Hierarchie. Web-optimiert für Performance. Fallback-Fonts definiert für Systemkompatibilität.

Die Typografie transportiert "Digital" (modern) und "Nah" (lesbar, zugänglich).

Farbwelt:

Erweiterte Farbpalette mit hohem Wiedererkennungswert. Primärfarben für Markenidentität. Sekundärfarben für funktionale Zwecke (Erfolg, Warnung, Fehler). Mandantenspezifische Akzentfarben für Individualität. Alle Farben WCAG-konform für Barrierefreiheit.

Die Farbwelt ist flexibel genug für verschiedene Mandanten, aber konsistent genug für Markenerkennung.

Hand-illustrierte Iconsprache:

Unverwechselbar, menschlich, unverwechselbar. Icons sind von Hand illustriert, nicht aus Icon-Bibliotheken. Der Stil transportiert "Regional" (individuelle Handschrift) und "Nah" (menschlich statt technisch kalt).

Icons sind skalierbar: Neue Motive können im gleichen Stil ergänzt werden. Ein Illustrator-Leitfaden definiert Linienführung, Abstraktionsgrad, typische Motive.

Bildsprache:

Authentische, regionale Motive. Menschen im Fokus, nahbar, nicht gestellt. Farben und Lichtstimmung konsistent zum Design-System. Bildbearbeitung folgt definierten Parametern (Kontrast, Sättigung, Filter).

Micro-Animations:

Subtile Bewegungen machen die Website lebendig: Buttons animieren auf Hover, Cards heben sich beim Scrollen hervor, Übergänge sind smooth. Animationen folgen definierten Timing-Funktionen (Easing). Performance-optimiert: Nur animieren, was sichtbar ist.

Das Markenversprechen visuell:

"Regional": Lokale Motive in Bildsprache, hand-illustrierte Icons mit regionaler Handschrift, Authentizität statt Stockfotos.

"Nah": Menschliche Tonalität in Texten, nahbare Bildsprache, zugängliche Typografie, persönliche Ansprechpartner prominent.

"Digital": Moderne UI-Patterns, schnelle Ladezeiten, Progressive Web App Technologie, zeitgemäße Animationen.

Vorteile des Refresh:

Für Marke: Differenzierung im Wettbewerb. Unverwechselbare Bildsprache. Emotionale Ansprache statt Austauschbarkeit.

Für Nutzer: Vertrauen durch Authentizität. Wiedererkennung über Touchpoints hinweg. Positive User Experience durch durchdachtes Design.

Eigenständigkeit bei Zugehörigkeit

Jeder Mandant hat seine eigene Identität, aber alle sind erkennbar Teil der rhenag-Familie. Das visuelle Refresh schafft Eigenständigkeit. Das System garantiert Zugehörigkeit.

Ergebnis

Time-to-Market

reduziert

Ohne proportionale Kosten

CHECK

Kollaboration statt Silos

Check

Alle Dienstleister arbeiten auf gemeinsamer Basis

Markenkonsistenz

Garantiert

Technisch abgesichert, nicht nur dokumentiert

Unsere Tools

Beratung

Adobe XD

Cai

Confluence

Google Analytics

Google Tag Manager

RapidUsertests

XOVI

Konzeption

Adobe Illustrator

Adobe XD

Adobe InDesign

Atlassian

Confluence

Google Analytics

Miro

Design

Adobe Illustrator

Adobe After Effects

Adobe Photoshop

Figma

Adobe XD

Adobe Aero

Adobe Animate

Adobe Audition

Adobe InDesign

Adobe Lightroom

Adobe Premiere Pro

Adobe Substance

Apple Logic Pro

Blender

Flux

Midjourney

Pika

Procreate

Runway

Sora

Stable Diffusion

Steinberg Cubase

Suno

Veo

Weavy

Entwicklung

Angular

Angular Material

Azure

Bitbucket

Bootstrap

CI/CD-Pipelines

Composer

Contao

CookieHub

Cursor

D3.js

Deployer

Docker

Doctrine

Flow

Fusion

Google Analytics

GSAP

Gulp

Handlebars

Helm

JavaScript

jQuery

JWT

krpano

Kubernetes

Llama

Mercure

Moment.js

MySQL

n8n

Neos

npm

Pattern Lab

PHP

PHP Unit

Podman

Protractor

React

Redshift

Sass

Selenium

Shopware

Sulu

Symfony

Three.js

Twig

TypeScript

TYPO3

Usercentrics

Webpack

WordPress

Projektmanagement

Cai

Jira

Atlassian

Bitbucket

Scrum

Match?

Starte jetzt
dein Projekt

Von der Idee zur Realität: Als Boutique-Agentur analysieren wir, denken mit und entwickeln passgenaue Konzepte.
Unsere Digitale Originale^® sind kreativ, relevant und technisch perfekt umgesetzt.

Willst du mehr über skalierbare Design-Systeme erfahren?

Dieter hilft dir gerne.