Cases — UX/UI Design & Art Direction

Ein Konfigurator für
Elli Charging
Konfigurator
für
Elli CharGing

Ein B2B-Konfigurator für Autohäuser: Wallbox-Modell, Marke, Leistung und Kabellänge in wenigen Schritten zusammenstellen und fehlerfrei bestellen.

Jahr: 2022 - 2023

RolLe: UX & UI Design

Agentur: Elbkapitaene GmbH

Kunde:

elli.eco

Ziel

Elli ist die Energie- und Ladelösung der Volkswagen Group und treibt die Elektromobilität mit einer eigenen Marke und einer konzernweiten Plattform voran. Für den B2B-Rollout der Ladeinfrastruktur entstand die Idee eines smarten B2B-Konfigurators. Vertriebsteams im Autohaus sollten damit komplexe Wallbox-Setups fehlerfrei zusammenstellen können, ohne Technik-Expertise und unter echtem Zeitdruck im Verkaufsalltag.

Als Senior UX/UI Designerin habe ich dieses digitale Produkt strategisch und visuell verantwortet, von der Nutzerrecherche bis zum finalen Interface-Design.

Vorgehen

Am Anfang stand ein Perspektivwechsel. Warum eine statische Produktseite, wenn Autohäuser sich genau die Wallbox zusammenstellen können, die sie brauchen? Diese Frage wurde zum Fundament für alles Weitere.Schwierig war die Komplexität darunter: Markenkompatibilität, Kabellängen, Leistungsstufen. All das musste in eine Informationsarchitektur übersetzt werden, die niemanden überfordert. Mein Leitprinzip war radikale Einfachheit. Auf dem Screen steht nur, was zur Aufgabe gehört.Gebaut habe ich das als modulares UI-Design und als interaktiven High-Fidelity-Clickdummy. Validiert wurde früh, mit einem User Testing des Prototyps mit ausgewählten Verkäufer:innen in echten Autohäusern.

Ergebnis

Die Tests lieferten mir echte Daten. Ich sah genau, wo Nutzer:innen ins Stocken gerieten, und überarbeitete UX und UI an diesen Stellen. Usability-Barrieren fielen weg, bevor eine einzige Zeile Code geschrieben war.

Das ersparte später teure Nacharbeit.Das Design ging an das Entwicklungsteam und wurde exakt wie gestaltet umgesetzt. Heute läuft es live als B2B-Bestellportal, das die Autohäuser im Verkaufsalltag nutzen.

Den Handover habe ich durchgängig begleitet und die Entwickler:innen durch die Details geführt, damit zwischen Design und Code nichts verloren geht.

Zukunft der Ernährung,
digital gedacht
Zukunft der
Ernährung,
Digital gedacht

Wenn alle am Tisch sitzen, gibt es kein Entweder-oder. Das ist die Idee hinter der neuen Website.

Jahr: 2023 - 2024

RoLle: UX & UI Design

Agentur: Elbkapitaene GmbH

Kunde:

Rügenwalder Mühle

Ziel

Rügenwalder Mühle gehört zu den Vorreitern der Branche bei pflanzenbasierter Ernährung und will Menschen am Esstisch zusammenbringen, statt sie in Lager zu teilen. Gemeinschaft steht über der Debatte.

Genau das sollte die neue Website tragen: eine Plattform, die sich für alle gleichermaßen einladend anfühlt, ob du Fleisch, vegetarisch oder vegan isst. Dazu kam ein zweiter Anspruch.
Neben der Zugänglichkeit für jedes Publikum sollte das Entdecken der Produktwelt Spaß machen und als inspirierendes Food-Erlebnis funktionieren, mit Raum für Rezepte und Orientierung.

Vorgehen

Vom Kunden kam ein Marken-Styleguide, allerdings ein rudimentärer mit einer Handvoll Basiselementen. Meine Hauptaufgabe war, ihn ins Digitale zu übersetzen und zu einem vollständigen UI auszubauen: Komponenten, States, Interaction Patterns und responsives Verhalten. All das deckte der Guide nicht ab. Aus einem statischen Set an Marken-Basics wurde so eine funktionierende Designsprache, auf der die ganze Website aufbauen konnte.

Mein Fokus lag durchgehend darauf, wie es sich anfühlt, durch die Seite zu gehen. Die Navigation durch die Produktwelt sollte Neugier und Entdeckerlust wecken und mehr sein als eine Auflistung von Produkten.Das Projekt brauchte außerdem Geduld. Viele Stakeholder waren beteiligt, dazu weitere Agenturen für Social, Brand und mehr. Das Design System über all diese Hände hinweg kohärent zu halten, war ebenso viel Koordination wie Handwerk, und die Zusammenarbeit hat getragen.

Ergebnis

Damit das Design für alle greifbar wurde, die es freigeben mussten, entwickelte ich ein Animationskonzept und baute es als interaktiven Prototyp in Protopie. So sahen die Entscheidenden meine Vision in Bewegung, mit allen Übergängen, Hover-States und Filterbewegungen. Bei so vielen Stakeholdern und Agenturen am Tisch war das der entscheidende Schritt: Statt über flache Mockups zu diskutieren, konnten alle erleben, wie sich die Interaktionen anfühlen sollten, und der verspielte Charakter blieb durch jede Feedbackrunde erhalten.

Die Website ging exakt wie gestaltet live und läuft bis heute. Das ausgebaute Design trug die Persönlichkeit der Marke auf die Seite, mit einer Balance aus Spaß, Inspiration und klarer Produktinformation.

Alpina:"Feine Farben"
Kampagnenwebsite
Alpina:
"Feine Farben"
Kampagnen-
Website

Eine Premium-Wandfarben-Kollektion, groß in Szene gesetzt, mit Produkt-Deep-Dives und Farbinspiration.

jahr: 2019

RolLe: UX & UI Design

Agentur: Davies Meyer GmbH

Kunde:

Alpina Feine Farben

Ziel

Alpinas „Feine Farben" ist eine Premium-Kollektion feiner, matter Wandfarben mit echtem Charakter und außergewöhnlicher Qualität. Die Landing Page sollte diese Kollektion im Detail erkundbar machen: jede Farbe kennenlernen, die besondere Qualität verstehen und über einen prominent inszenierten Imagefilm einen emotionalen Zugang finden.

Dazu kam Raum für Inspiration. Das Niveau musste dem Produkt gerecht werden, mit ruhiger Bildsprache, klarer Struktur und den Farben immer im Mittelpunkt.

Vorgehen

Es gab keinen Styleguide als Ausgangspunkt. Alles, was ich hatte, waren die Farben, das Video und die Fotografie. Daraus habe ich das komplette UX und UI entwickelt: eine Single-Page als Scrollytelling, das durch die Farbwelt führt.

Für den Look habe ich die dezenten Farben selbst aufgegriffen und mit viel Whitespace gearbeitet. Das gibt dem Ganzen einen hochwertigen Auftritt. Jeder Farbe habe ich über großzügige Flächen Raum gegeben, sodass nichts überladen wirkt. Gezielt gesetzte Animationen geben den Inhalten zusätzlich Ausdruck.

Ergebnis

Entstanden ist ein eleganter Onepager, der die Kollektion konsequent in Szene setzt. Die dezente Palette und viel Raum geben von Anfang an einen ruhigen, hochwertigen Ton vor.

Eine integrierte Social-Wall liefert Inspiration, der Imagefilm trägt die emotionale Seite, und die besondere Farbqualität wird aus der Nähe erlebbar. Aus Interesse wird dann ein nächster Schritt: Wer will, bestellt direkt den Farbkatalog oder findet über die Händlersuche einen Händler in der Nähe. Das Design ging exakt wie gestaltet live und ist bis heute online.

Alpina:"Holzschutz"
Produktfinder
Alpina:
"Holzschutz"
Produktfinder

Komplexe Holzschutz-Produkte, einfach gemacht durch einen geführten Schritt-für-Schritt-Ablauf. Ob du Profi bist oder zum ersten Mal zum Pinsel greifst: Das richtige Produkt ist nur ein paar Fragen entfernt.

Jahr: 2019 - 2020

Rolle: UX & UI Design

Agentur: Davies Meyer GmbH

Kunde:

Alpina Holzschutz

Ziel

Alpinas „Holzschutz"-Sortiment ist breit und technisch komplex. Das richtige Produkt hängt vom Holz ab, von seinem Zustand und vom jeweiligen Projekt. Das Ziel war, diese Komplexität zugänglich zu machen und Menschen genau zum passenden Produkt für ihre Situation zu führen. Das gilt für erfahrene Profis ohne Erklärungsbedarf ebenso wie für alle, die zum ersten Mal streichen und echte Orientierung wollen. Nutzende sollten sich beraten fühlen und Schritt für Schritt zu einer sicheren Entscheidung kommen, so wie es eine kundige Beratung im Fachhandel tun würde.

Vorgehen

Am Anfang ging es um die Frage, wie sich die unterschiedlichen Personas führen lassen. Für jede habe ich eigene User Flows erarbeitet, denn die Zielgruppe teilt sich in drei: Profis, etwas Geübte und komplette Einsteigende. Die Kernidee war, die Produktauswahl in einen geführten Klickpfad zu verwandeln. Man sagt, woran man arbeitet, also welches Holzprojekt und in welchem Zustand das Holz ist, und wird Schritt für Schritt zum passenden Produkt geführt. Ich habe das komplette UX und UI erstellt und als interaktiven Clickdummy gebaut, sodass sich die gesamte Entscheidungslogik schon vor der Entwicklung testen ließ.

Ergebnis

Das Ergebnis war ein geführter Produktfinder, der ein komplexes, technisches Sortiment auf ein paar klare Fragen herunterbricht. Beantwortet per Klick, und man landet sicher beim richtigen Produkt.

Der Fokus lag dabei ganz auf der Klickstrecke. Jede Frage ist mit passenden Bildern hinterlegt, und wer mag, kann sich zu jedem Schritt optionale Tipps einblenden. Das Interface bleibt ruhig und überlässt dem Holz und den Produkten das visuelle Gewicht.

Die eigentliche UX-Arbeit steckt in der Entscheidungslogik: Profis, Geübte und Einsteigende laufen durch denselben Flow und kommen in wenigen Schritten ans Ziel.

HSV Pitch —
NÄHER AN DEN FANS
HSV —
NÄHER AN
AN DEN FANS

Das Konzept, das den Pitch gewann: ein digitaler Relaunch, der Fans dem Verein näherbringt als je zuvor.

Jahr: 2023

RolLe: UX & UI Design

Agentur: Elbkapitaene GmbH

Kunde:

HSV

Ziel

Der HSV wollte einen kompletten Website-Relaunch: mehr Interaktivität, eine bessere User Experience und ein digitales Zuhause, das der Größe des Vereins gerecht wird. Der größere Anspruch dahinter war Nähe, also den Verein näher an seine Fans zu bringen. Neben Spielständen und News brauchte die Seite mehr Interviews, mehr Podcasts, mehr Raum für die Spieler als Menschen und mehr Platz für Fans, um sich untereinander auszutauschen. Der Auftrag war klar: aus einer Standard-Vereinswebsite eine lebendige Fan-Plattform machen.

Vorgehen

Wir haben bei den Menschen angefangen. Gemeinsam mit einer zweiten Person im UX habe ich drei zentrale Personas definiert: Fans, die täglich vorbeischauen, Gelegenheitsfans und Leute, die einfach nur ein Ticket kaufen wollen. Für jede Persona entstand ein eigener User Flow, damit jeder Fan-Typ schnell seinen Weg findet. Der bestehende Styleguide des Vereins war stark und gründlich, allerdings für Print gemacht.

Mein Part war das UI: Ich habe diese Print-first-Identität in ein vollständiges digitales Design System übersetzt, von Grund auf neu konzipiert für Screen, Interaktion und Skalierung, mit Komponenten, Zuständen und Rastern für jedes Endgerät. Durchgehend war unser Leitgedanke Nähe: den Spielern eine Bühne geben, den Fans eine Stimme und dem Verein neue Wege, im Fan-Alltag präsent zu sein.

Ergebnis

Das Konzept ging über einen Relaunch hinaus. Wir schlugen Live-Übertragungen am Spieltag direkt auf der Seite vor, mit Echtzeit-Chat, Reaktionen und Statistiken, wie Fans es aus Live-Social-Streams kennen. Spielabende werden so zu einem gemeinsamen digitalen Erlebnis statt zu einem Nebenher. Die Vision für HSV.de war ein Ort, an dem Fans dem Verein und einander nah sind, näher und interaktiver als zuvor.

Hapag-Lloyd Cruises
— Premium, digital
Hapag lloyd
cruises —
Website-
Relaunch

Eine Fünf-Sterne-Kreuzfahrtmarke ins Digitale übersetzt: inspirierend, zugänglich und mit einer Buchungsstrecke, die wirklich fließt.

Jahr: 2023 - 2026

RolLe: UX & UI Design

Agentur: Elbkapitaene GmbH

Kunde:

Hapag Lloyd Cruises

Ziel

Hapag-Lloyd Cruises hatte einen Brand-Relaunch hinter sich, und die Website musste nachziehen: das neue Look & Feel ins Web übersetzt und ein stark print-lastiger Styleguide in ein lebendiges digitales System überführt.

Dabei blieb es nicht bei der Optik. Mehrere zentrale Module mussten neu gedacht werden, von der Buchungsstrecke bis zu den Kreuzfahrt-Detailseiten. Der Anspruch: das Premium-Versprechen der Marke auf jeden Screen zu tragen, inspirierend und emotional, dabei klar strukturiert. Der Weg vom ersten Interesse bis zur Buchung sollte mühelos sein.

Vorgehen

Ich habe zuerst nach außen geschaut: Benchmarks im Premium-Reisesegment recherchiert und untersucht, wie andere High-End-Marken Inspiration, Navigation und Buchung lösen. Danach habe ich bewertet, was davon wirklich zu Hapag-Lloyd Cruises passt und was nur ein Trend ist. Von dort habe ich den Print-first-Styleguide in ein stimmiges digitales UI übersetzt und Konzepte für die Module entwickelt, die wir am stärksten hinterfragt haben: die Buchungsstrecke und die Kreuzfahrt-Detailseiten, also die zentralen Stellen der Customer Journey. Gemeinsam mit dem Kunden haben wir die Tracking-Daten der Seite ausgewertet und für jedes Ticket Akzeptanzkriterien geschrieben. Das UI habe ich Runde für Runde daran optimiert. Diese Arbeitsweise ist mir wichtig: Designentscheidungen beruhen auf echtem Nutzerverhalten und auf gemeinsamen, messbaren Zielen.

Ergebnis

Der Brand-Relaunch ist live. Die Premium-Welt von Hapag-Lloyd Cruises trägt jetzt konsistent über die ganze Seite, ihre Print-first-Identität übersetzt in ein digitales Erlebnis, das der Marke dahinter gerecht wird. Die überarbeitete Buchungsstrecke und die Konzepte für die Kreuzfahrt-Detailseiten haben dichte Reiseinformationen in einen klareren, geführten Weg verwandelt. Er spiegelt die Emotion der Reise ebenso wie das Bedürfnis, sicher zu entscheiden. Jede Änderung wurde an echten Tracking-Daten und vereinbarten Akzeptanzkriterien gemessen. So ließ sich nach jeder Runde prüfen, ob eine Verbesserung die Kennzahlen bewegt, auf die es ankommt, statt nur im Design gut auszusehen. Genau an dieser Stelle greifen Art Direction und UX ineinander.

TÜV Nord
– Design System
TÜV Nord —
design System

Ein print-basierter Styleguide, überführt in ein lebendiges digitales Design System, dokumentiert, damit die ganze Redaktion damit bauen kann.

Jahr: 2024

RolLe: UX & UI Design

Agentur: Elbkapitaene GmbH

Kunde:

TÜV Nord

Ziel

TÜV Nord hatte einen Styleguide von einer Brand-Agentur, stark und gründlich, allerdings für Print gedacht. Meine Aufgabe war, ihn in ein funktionierendes digitales Design System zu übersetzen: einen globalen Styleguide mit jedem definierten Element, gestützt auf eine klare, praktische Dokumentation, durch die das ganze Team navigieren kann. Gefragt war kein einmaliges Website-Projekt, sondern ein Fundament. Die Inhalte von TÜV Nord pflegt die Redaktion, also musste das System Menschen ohne Design-Hintergrund befähigen, selbst konsistente, markengerechte Seiten zu bauen, lange nach Projektende.

Vorgehen

Ich bin nach dem Prinzip Atomic Design vorgegangen, vom kleinsten Element aufwärts. Zuerst habe ich die Design Tokens angelegt: Grids, Farben, Icons, Font Scales. Darauf aufbauend die Komponenten, daraus die Module und daraus fertige Templates, die sich die Redaktion selbst aus den Modulen zusammenstellt. Dokumentiert ist auch, welche Module gut zusammenspielen, ohne das Design zu brechen. So hält die Marke über die ganze Seite zusammen, statt auf jeder Seite neu erfunden zu werden. Komponenten allein reichen aber nicht, wenn niemand weiß, wie man sie nutzt. Deshalb lag echtes Gewicht auf der Dokumentation: klar, navigierbar und für die Redaktion geschrieben. Meine Leitfrage war, wie ein System aussieht, das auch ohne Design-Ausbildung gute Entscheidungen möglich macht.

Ergebnis

Das Ergebnis ist ein vollständiges digitales Design System, das TÜV Nord eine konsistente visuelle Sprache über die ganze Seite gibt, dazu die Dokumentation und Templates, um das so zu halten. Jedes Element ist definiert, jeder Zustand beschrieben und jede Regel an einem Beispiel gezeigt.

Die Website ist live und wird von der eigenen Redaktion gepflegt, die Seiten mit dem von mir gebauten System erstellt und aktualisiert.

Genau das war das Ziel: Wer täglich damit arbeitet, findet die Antwort im System statt in einer Rückfrage. Mein Part war das Fundament, die Pflege liegt seitdem im Haus.

DT Swiss
— Wheel Finder
DT Swiss —
Wheel Finder

Ein geführter Konfigurator, der Fahrende zur passenden Komponente bringt: Präzisions-UX für eine zutiefst technische Marke.

Jahr: 2022 - 2026

RolLe: UX & UI Design

Agentur: Elbkapitaene GmbH

Kunde:

DT Swiss

Ziel

DT Swiss macht hochtechnische Fahrrad-Komponenten: Laufräder, Gabeln, Felgen, Speichen, Naben. Das Sortiment ist tief. Über die Zeit habe ich für DT Swiss mehrere Module auf der UX- und UI-Seite optimiert und gebaut, allen voran den Wheel Finder.

Dabei ging es um mehr als das Strukturieren dichter technischer Informationen. Die Marke ist präzisionsbesessen, und auf der Website zählen die Details für sie genauso wie im Produkt selbst.

Vorgehen

Bei einem technischen Kunden wie DT Swiss reicht es nicht, von außen zu gestalten. Man muss sich tief ins Thema einlesen und die User Needs klar definieren, bevor man das Interface anfasst. Diese Grundlage prägte alle Module, an denen ich gearbeitet habe, allen voran den Wheel Finder: einen Schritt-für-Schritt-Flow, der Fahrende durch die Konfiguration führt, vom Einsatzzweck über das richtige Material bis zur Komponente, die wirklich zum Bike passt. Gearbeitet habe ich durchgehend in einem bewusst minimalistischen visuellen System aus nur drei Farben: Schwarz, Rot und Weiß. Jede UX-Entscheidung musste ihren Platz verdienen, denn Klarheit entsteht hier allein aus Struktur und Hierarchie. Mit dem Kunden habe ich eng und agil zusammengearbeitet und die Details Runde für Runde geschärft.

Ergebnis

Der Wheel Finder macht ein sehr umfangreiches technisches Sortiment ohne Expertenwissen navigierbar. Fahrende kommen in wenigen Schritten zur passenden Komponente.

Die Arbeit im strengen Drei-Farben-System hat einen Punkt bestätigt, zu dem ich immer wieder zurückkomme: Zurückhaltung schärft den Blick. Mit Schwarz, Rot und Weiß als einzigen Mitteln liegt der Fokus ganz auf dem Produkt und der anstehenden Entscheidung.

Für mich war es eines der präzisesten Projekte: technisch, detailgetrieben und ein guter Beleg dafür, wie viel klare Grenzen im Interface Design leisten.