Cases — UX/UI Design & Art Direction

A Configurator for
Elli Charging
A CONFIGURATOR
for
Elli CharGing

A B2B configurator for dealerships: put together wallbox model, brand, power level, and cable length in a few steps, then order without errors.

Year: 2022 - 2023

Role: UX & UI Design

Agency: Elbkapitaene GmbH

Client:

elli.eco

Goal

Elli is the Volkswagen Group's energy and charging solution, driving e-mobility forward with its own brand and a group-wide platform. To roll out the charging infrastructure in B2B, the idea for a smart B2B configurator took shape.

Sales teams at dealerships needed to assemble complex wallbox setups without errors, without technical expertise, and under real time pressure on the sales floor.

As Senior UX/UI Designer, I owned this digital product strategically and visually, from user research to the final interface design.

Strategy

It started with a shift in perspective. Why a static product page when dealerships can configure the exact wallbox they need?

That question became the foundation for everything that followed.The hard part was the complexity underneath: brand compatibility, cable lengths, power levels.

All of it had to translate into an information architecture that never overwhelms anyone. My guiding principle was radical simplicity. Only what belongs to the task appears on screen.I built it as a modular UI design and an interactive high-fidelity clickdummy. Validation came early, through user testing of the prototype with selected salespeople in real dealerships.

Outcome

The testing gave me real data. I saw exactly where users slowed down and reworked the UX and UI at those points.

‍Usability barriers were gone before a single line of code was written, which saved expensive rework later.

The design went to the development team and was implemented exactly as designed. It runs live today as the B2B ordering portal that dealerships use on the sales floor.

I supported the handover throughout and walked the developers through the details, so nothing got lost between design and code.

The Future of Food,
Made Digital
The Future
of food,
made Digital

When everyone's at the table, there's no either-or. That's the idea behind the new website.

Year: 2023 - 2024

Role: UX & UI Design

Agency: Elbkapitaene GmbH

Client:

Rügenwalder Mühle

Goal

Rügenwalder Mühle is one of the industry's early movers on plant-based food and wants to bring people together at the dinner table instead of splitting them into camps.

Community comes before debate. The new website had to carry exactly that: one platform that feels equally welcoming whether you eat meat, veggie, or vegan. A second ambition came with it.

Beyond being accessible to every audience, exploring the product range had to be enjoyable and work as an inspiring food experience, with room for recipes and guidance.

Strategy

The client handed us a brand styleguide, though a rudimentary one with just a handful of basic elements. My main task was to translate it into digital and expand it into a full UI: components, states, interaction patterns, and responsive behavior. None of that was covered by the guide. A static set of brand basics became a working design language the whole site could be built on.

My focus throughout was on how it feels to move through the site. Navigating the product world should spark curiosity and a sense of discovery, and be more than a list of products.

The project also took patience. Many stakeholders were involved, plus other agencies handling social, brand, and more. Holding the design system coherent across all those hands took as much coordination as craft, and the collaboration held up.

Outcome

To make the design tangible for everyone signing off on it, I developed an animation concept and built it as an interactive prototype in Protopie. Decision-makers could see my vision in motion, with every transition, hover state, and filter movement in place rather than picturing it from static screens. With so many stakeholders and agencies at the table, that was the decisive step: rather than debating flat mockups, everyone could experience how the interactions should feel, and the playful character stayed intact through every round of feedback.

The website went live exactly as designed and is still in use today. The expanded design carried the brand's personality onto the site, balancing fun, inspiration, and clear product information.

Alpina:"Feine Farben"
– Campaign Website
Alpina:
"Feine Farben"
Digital
CAMPAIGN

A premium wall-paint collection, put center stage, with product deep-dives and color inspiration.

Year: 2019

Role: UX & UI Design

Agency: Davies Meyer GmbH

Client:

Alpina Feine Farben

Goal

Alpina's "Feine Farben" is a premium collection of refined, matte wall paints with real character and exceptional quality.

The landing page had to make this collection explorable in detail: getting to know each shade, understanding its color quality, and finding an emotional way in through a prominently staged brand film.

Room for inspiration came with it. The level had to match the product, with calm imagery, clear structure, and the colors always in focus.

Strategy

There was no styleguide to start from. All I had were the colors, the video, and the photography. From that, I built the full UX and UI: a single page as scrollytelling that leads through the color world.

For the look, I picked up the muted colors themselves and worked with lots of whitespace, which gives the whole thing a high-end presence. I gave every color room through generous open space, so the page never feels cluttered. Carefully placed animations give the content extra expression.

Outcome

The result is an elegant onepager that puts the collection center stage. The muted palette and plenty of room set a calm, high-end tone from the start.

An integrated social wall brings in inspiration, the brand film carries the emotional side, and the exceptional color quality becomes tangible up close. Interest then turns into a next step: you can order the color catalog directly or find a nearby retailer through the dealer locator.

The design went live exactly as designed and is still online today.

Alpina:"Holzschutz"
Complexity, Guided
Alpina:
"Holzschutz"
Productsite

Complex wood-care products, made simple through a guided, step-by-step flow. Whether you're a seasoned pro or picking up a brush for the first time, the right product is only a few questions away.

Year: 2019 - 2020

Role: UX & UI Design

Agency: Davies Meyer GmbH

Client:

Alpina Holzschutz

Goal

Alpina's "Holzschutz" range is broad and technically complex. The right product depends on the wood, its condition, and the project at hand. The goal was to make that complexity approachable and guide people to the product that fits their situation. That applies to seasoned pros who need no hand-holding as much as to first-timers picking up a brush for the first time.

Users should feel advised and reach a confident decision step by step, the way a knowledgeable salesperson would walk them through it in a store.

Strategy

At the start, the question was how to guide the different personas through the range. For each, I built separate user flows, because the audience splits into three: pros, people with some experience, and complete beginners.

The core idea was to turn product selection into a guided click-path. Users say what they're working on, which wood project and what condition the wood is in, and are led step by step to the product that fits. I created the full UX and UI and built it as an interactive clickdummy, so the whole decision logic could be tested before development.

Outcome

The result was a guided product finder that breaks a complex, technical range down into a few clear questions. Answered with a click, and you land on the right product with confidence.

The focus was firmly on the click-path. Every question is backed by fitting imagery, and optional tips can be shown at any step for anyone who wants them. The interface stays calm, letting the wood and the products carry the visual weight.

The real UX work sits in the decision logic: pros, hobbyists, and beginners all move through the same flow and get there in a few steps.

HSV Pitch —
Closer to the Fans
HSV Pitch —
Closer to
the fans

A pitch-winning concept for a full digital relaunch, designed to bring fans closer to the club than ever.

Year: 2023

Role: UX & UI Design

Agency: Elbkapitaene GmbH

Client:

HSV

Goal

HSV wanted a complete website relaunch: more interactivity, a better user experience, and a digital home that matched the size of the club. The bigger ambition behind it was closeness, bringing the club nearer to its fans.

Alongside scores and news, the site needed more interviews, more podcasts, more room for the players as people, and more space for fans to interact with each other. The brief was clear: turn a standard club website into a living fan platform.

Strategy

We started with the people. Together with a second UX designer, I helped define three core personas: the heavy user who checks the site every day, the casual fan, and the visitor who just wants to buy a ticket. Each persona got a dedicated user flow, so every type of fan finds their path fast. The club's existing styleguide was strong and thorough, though built for print.

My job was the UI: I translated that print-first identity into a full digital design system, built from the ground up for screen, interaction, and scale, with components, states, and grids for every device. Throughout, our guiding idea was closeness: giving players a stage, fans a voice, and the club new ways to be present in everyday fan life.

Outcome

The concept went further than a relaunch. We proposed live matchday broadcasts right on the site, with real-time chat, reactions, and stats, the kind of energy fans know from live social streams. Match nights become a shared digital experience instead of something happening elsewhere.

The vision for HSV.de was a place where fans feel close to the club and to each other, closer and more interactive than before.

Hapag-Lloyd Cruises
— Premium, Made Digital
Hapag lloyd
cruises —
Premium,
Made Digital

Translating a five-star cruise brand into a digital experience: inspiring, accessible, and with a booking journey that actually flows.

Year: 2023 - 2026

Role: UX & UI Design

Agency: Elbkapitaene GmbH

Client:

Hapag Lloyd Cruises

Goal

Hapag-Lloyd Cruises had gone through a brand relaunch, and the website needed to catch up: the new look and feel translated to the web, and a strongly print-based styleguide brought into a living digital system. It went beyond the visuals. Several core modules needed rethinking, from the booking flow to the cruise detail pages.

The goal was to carry the brand's premium promise into every screen, inspiring and emotional while clearly structured. And the path from first interest to booking had to feel effortless.

Strategy

I started by looking outward: I researched benchmarks across the premium travel segment, studying how other high-end brands solve inspiration, navigation, and booking. Then I evaluated what would genuinely fit Hapag-Lloyd Cruises and what was only a trend.

From there, I translated the print-first styleguide into a coherent digital UI and developed concepts for the modules we challenged most: the booking flow and the cruise detail pages, the central points of the customer journey. Together with the client, we evaluated the site's tracking data and wrote acceptance criteria for each ticket. I optimized the UI against them, round after round. It's a way of working I value: design decisions grounded in real user behavior and shared, measurable goals.

Outcome

The brand relaunch is live. The premium world of Hapag-Lloyd Cruises now carries consistently across the site, its print-first identity translated into a digital experience that matches the brand behind it. The reworked booking flow and cruise detail page concepts turned dense travel information into a clearer, more guided path. It respects the emotion of the journey as much as the visitor's need to decide with confidence.

Every change was measured against real tracking data and agreed acceptance criteria. That made it possible to check each round for whether an improvement actually moves the metrics that matter. This is where art direction and UX come together.

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

A print-based styleguide turned into a living digital design system, documented so the whole editorial team can build with it.

Year: 2024

Role: UX & UI Design

Agency: Elbkapitaene GmbH

Client:

TÜV Nord

Goal

TÜV Nord had a styleguide developed by a brand agency, strong and thorough, though conceived for print. My task was to translate it into a working digital design system: a global styleguide with every element defined, backed by clear, practical documentation the whole team could navigate.

What was needed wasn't a one-off website but a foundation. TÜV Nord's content is maintained by editors, so the system had to empower people who aren't designers to build consistent, on-brand pages on their own, long after the project was done.

Strategy

I worked the Atomic Design way, from the smallest element up. First I set the design tokens: grids, colors, icons, font scales. On top of those came the components, then the modules, and finally ready-made templates the editorial team assembles from the modules themselves.

The documentation also covers which modules work well together without breaking the design. That's how the brand holds together across the whole site rather than being reinvented page by page. But components alone aren't enough if no one knows how to use them. So I put real weight on documentation: clear, navigable, and written for editors. My guiding question was what a system looks like that lets non-designers make good decisions.

Outcome

The result is a complete digital design system that gives TÜV Nord a consistent visual language across its site, along with the documentation and templates to keep it that way. Every element is defined, every state described, and every rule shown with a working example.

The website is live and maintained by TÜV Nord's own editors, who build and update pages using the system I created. That was the goal all along: the people working with it every day find the answer in the system instead of in a follow-up question to the agency.

My role was the foundation, and the upkeep has lived in-house ever since.

DT Swiss
— Wheel Finder
DT Swiss
— Wheel Finder

A guided configurator that helps riders find the component that fits: precision UX for a deeply technical brand.

Year: 2022 - 2026

Role: UX & UI Design

Agency: Elbkapitaene GmbH

Client:

DT Swiss

Goal

DT Swiss makes highly technical cycling components: wheels, forks, rims, spokes, hubs. Their range runs deep. Over time, I optimized and built a number of modules for DT Swiss on the UX and UI side, most notably the Wheel Finder.

It went beyond structuring dense technical information. This is a precision-obsessed brand, and getting the details right matters as much on the website as it does in the product itself.

Strategy

With a technical client like DT Swiss, designing from the outside isn't enough. You have to read deep into the subject and define the user needs with real clarity before touching the interface. That groundwork shaped every module I worked on, above all the Wheel Finder: a step-by-step flow that guides riders through configuration, from use case to the right material to the component that actually fits their bike. Throughout, I worked within a deliberately minimalist visual system built on just three colors: black, red, and white. Every UX decision had to earn its place, because clarity here comes from structure and hierarchy alone. I worked in close, agile collaboration with the client, refining the details round after round.

Outcome

The Wheel Finder makes a very extensive technical range navigable without expertise. Riders reach the right component in a few steps. Working within the strict three-color system proved a point I keep coming back to: restraint sharpens the eye. With black, red, and white as the only tools, the focus stays entirely on the product and the decision at hand.

For me it was one of the most precise projects I've done: technical, detail-driven, and good evidence of how much clear constraints deliver in interface design.