Herausforderungen

WMF Professional Coffee Machines und Schaerer agieren global im Markt professioneller Kaffeemaschinen. Die bestehenden Websites waren in Struktur und Darstellung uneinheitlich. Produktseiten waren stark faktenorientiert, während Story-Inhalte komplex und wenig strukturiert integriert wurden. Es fehlten klare Templates und eine konsistente Nutzerführung.

Gleichzeitig sollten die neuen Plattformen emotionale Markeninszenierung und präzise Produktinformation verbinden, ohne beides zu vermischen. Unterschiedliche Zielgruppen, Nutzungsszenarien und Customer Journeys erforderten differenzierte Einstiege und klare Orientierung.

Parallel dazu bestanden hohe technische Anforderungen: Accessibility gemäß WCAG, SEO-Optimierung, Tracking, Internationalisierung, Skalierbarkeit sowie eine zukunftsfähige Systemarchitektur. Zudem sollten mehrere Marken auf einer gemeinsamen strukturellen Basis abgebildet werden, ohne ihre Eigenständigkeit zu verlieren.

Lösung

Für die Marken WMF Professional Coffee Machines und Schaerer wurde im Rahmen der Ausschreibung ein modularer Website-Ansatz visuell und konzeptionell ausgearbeitet. Kernidee war das Prinzip „One Website. Two Faces.“: eine emotionale Produkt-Story-Seite zur Markeninszenierung sowie eine klar strukturierte, rationale Produktinformationsseite. Beide Ebenen sind logisch getrennt, jedoch strukturell miteinander verbunden.

Für die Produktseiten wurde ein modularer Baukasten definiert. Standardisierte Storytelling-Regeln und wiederverwendbare Module ermöglichen konsistente, aber markenspezifische Ausprägungen. So entstehen klare Strukturen bei gleichzeitiger Differenzierung zwischen WMF und Schaerer.

Die gestalterische Grundlage bildet ein variablenbasiertes Design System mit klar definierten Ebenen für Core-, Referenz- und UI-Variablen. Gemeinsame Strukturprinzipien werden über diese Ebenen gesteuert, während visuelle Werte je Marke individuell definiert werden können. Auf dieser Basis entstanden exemplarische Screendesigns für WMF und Schaerer.

Im Kapitel Design Operations wurde darüber hinaus die Skalierbarkeit auf weitere Marken wie Curtis aufgezeigt. Durch definierte Prozesse, klare Rollenmodelle und eine strukturierte Systemlogik lässt sich das Fundament auf zusätzliche Marken übertragen, ohne gestalterische Konsistenz oder Effizienz zu verlieren.

Accessibility wurde als integraler Bestandteil von Gestaltung und Entwicklung berücksichtigt. Aspekte wie Farbkontraste, Typografie, semantische Struktur sowie technische Anforderungen gemäß WCAG wurden systematisch eingeplant.

Technologisch wurde eine hybride Architektur vorgeschlagen: Content- und Produktdetailseiten in einem Headless-Ansatz für hohe Performance und flexible Nutzerführung, während bestehende E-Commerce-Strukturen integriert bleiben. Ergänzend wurde ein datengetriebener Ansatz mit integriertem Website-Tracking vorgeschlagen, um Conversion, Nutzerführung und Performance kontinuierlich zu analysieren und weiterzuentwickeln.

Meine Tätigkeit

Verantwortlich für die gestalterische und inhaltliche Ausarbeitung innerhalb der Ausschreibung:

• Visuelle Umsetzung der konzeptionellen Ansätze für die Marken WMF Professional Coffee Machines und Schaerer
• Entwicklung exemplarischer Screendesigns für Story- und Produktdetailseiten
• Ausarbeitung des variablenbasierten Ansatzes für das Design System
• Inhaltliche Herleitung und Aufbau des Design-Operations-Kapitels
• Darstellung der Skalierbarkeit auf weitere Marken innerhalb der Systemlogik
• Gestaltung der vollständigen Präsentationsunterlage
• Präsentation der Design- und Design-Operations-Strategie beim Kunden

Herausforderungen

Die Benutzeroberfläche wird direkt an der Maschine bedient und muss klar und zuverlässig funktionieren.

Unterschiedliche Displaygrößen zwischen 6 und 10 Zoll erfordern eine konsistente Gestaltung, die sich flexibel an verschiedene Gerätekonfigurationen anpasst.

Gleichzeitig musste die Interface-Struktur sowohl einfache Standardabläufe als auch detaillierte Konfigurationsmöglichkeiten für Getränke abbilden.

Darüber hinaus bestand die Anforderung, eine Whitelabel-fähige Grundlage zu schaffen, die in unterschiedlichen Marken- und Produktkontexten eingesetzt werden kann.

Lösung

Die Benutzeroberfläche folgt einer klaren Struktur entlang der Getränkezubereitung.

Getränke werden visuell dargestellt und lassen sich direkt auswählen. Parameter wie Füllmenge, Stärke oder Zutaten können im Anschluss angepasst und unmittelbar im Interface nachvollzogen werden. Große, klar definierte Touchflächen unterstützen eine sichere Bedienung im laufenden Betrieb.

Parallel wurde ein variables System in Figma aufgebaut. Farben, Typografie und Abstände sind über strukturierte Variablen organisiert und bilden die Grundlage für eine konsistente Gestaltung über unterschiedliche Gerätegrößen hinweg.

Auf dieser Basis wurden Light Mode und Dark Mode innerhalb derselben Systemlogik entwickelt. Der Ansatz ermöglicht markenspezifische Ausprägungen und den Einsatz in unterschiedlichen Produktlinien.

Meine Tätigkeit

Verantwortlich für die visuelle Gestaltung des Touch-Interface sowie die Ausarbeitung der strukturellen Grundlage:

• Gestaltung der Benutzeroberfläche in Figma
• Aufbau einer Komponentenbibliothek
• Entwicklung der visuellen Hierarchie und Bedienlogik
• Aufbau eines variablenbasierten Systems für Farben, Typografie und Abstände
• Konzeption und Ausarbeitung von Light Mode und Dark Mode innerhalb einer gemeinsamen Systematik
• Übersetzung funktionaler Anforderungen in klare Interaktionsabläufe

Die Umsetzung erfolgte in enger Abstimmung mit der Konzeption auf Kundenseite.

WMF Professional Coffee Machines, Schaerer und Curtis sind international tätige Marken im Bereich professioneller Kaffeemaschinen. Die Produkte kommen weltweit in Hotellerie, Gastronomie, Systemgastronomie und im Unternehmensumfeld zum Einsatz. Die Marken agieren im Premium- und B2B-Segment und adressieren unterschiedliche Marktanforderungen bei gleichzeitig hohen Ansprüchen an Qualität, Technologie und Markenwahrnehmung. Digitale Plattformen und Benutzeroberflächen spielen dabei eine zentrale Rolle für Produktkommunikation, Leadgenerierung sowie die Nutzung und Konfiguration der Maschinen im operativen Einsatz.