E-Commerce
Digital Transformation

AI First: Eine neue User Experience in nur 8 Wochen

Wie der mymuesli-Konfigurator durch Generative Engineering zur interaktiven Social Experience wurde.

AI-getriebenes UX-Design in Rekordzeit

Mit einem klaren Fokus auf den Ansatz „AI First“ begleiteten wir mymuesli bei der kompletten Neugestaltung ihres digitalen Herzstücks. Kern des Projekts war die Überführung des stark funktionalen Müsli-Konfigurators in eine dynamische Social-Commerce-Anwendung. Um diese Vision in Rekordzeit zu realisieren, verankerten wir das Konzept des Generative Engineering tief in allen Entwicklungsphasen. Von der ersten Prototypen-Erstellung mit Figma Make über automatisierte Nutzerinterviews via Dovetail bis hin zur direkten Code-Übergabe durch Claude Code griff modernste Künstliche Intelligenz ineinander. Ergänzt wurde diese technologische Beschleunigung durch ein strategisches UX-Konzept, das auf interaktives Storytelling und smarte Nudges setzt. So entstand in nur acht Wochen eine markenkonforme, konvertierende Experience, die zeigt, wie KI messbare Business-Mehrwerte schafft.

Auf mobilen Endgeräten stieß der bisherige Konfigurator an seine Grenzen: Beim endlosen Scrollen durch über 80 Zutaten verloren Nutzer:innen schnell den Überblick über den Preis und das ideale Mixverhältnis – es entstand eine regelrechte „Decision Paralysis“. Erschwert wurde das Erlebnis durch starre Fehlermeldungen und eine mangelnde Flexibilität beim nachträglichen Anpassen der Müsli-Kreationen. Hinzu kam, dass sich die Nutzeroberfläche nach diversen Systemwechseln in der Vergangenheit zunehmend von der emotionalen mymuesli-Markenwelt entkoppelt hatte und wie ein rein funktionales, separates Tool wirkte.

Wir begannen mit einem grundlegenden Re-Design, das Transparenz und Nutzerführung drastisch erhöht. Starre Menüs weichen smarten Nudges, während ein dynamischer Balken Preis und Zutatenverhältnis in Echtzeit visualisiert. Parallel etablierten wir eine völlig neue Storytelling-Komponente, die das Prinzip von Social Media in den E-Commerce überträgt: Über Influencer Stories können Nutzer:innen inspirierende Kreationen direkt übernehmen und anpassen. Community Stories machen datengetriebene Trends der Woche sichtbar, während Health & Seasonal Stories gezielt auf anlassbezogene und gesundheitliche Schwerpunkte einzahlen. Um diese Vision umzusetzen, orchestrierten unsere UI/UX-Expert:innen den generativen KI-Prozess so, dass sich maximale technologische Geschwindigkeit und ein emotionales, markenspezifisches Nutzererlebnis nahtlos ergänzen.

Jessica Paracz, Business Leader Marketing

Vom AI-Konzept zum Development Handover

01

AI-Prototyping & Rapid Iteration:

Um die Konzeptionsphase massiv zu beschleunigen, haben wir das strategische UX-Konzept mittels Figma Make direkt in einen AI-Prototypen überführt. Anstatt isolierte Clickflows zu entwerfen, kreierten wir eine interaktive Live-Website. Durch den Einsatz von rund 300.000 Figma-Tokens testeten und optimierten wir hunderte Design-Varianten in kürzester Zeit – für ein sofort erlebbares Gesamtprodukt.

02

Automatisierte UX-Forschung mit Dovetail:

Wir unterzogen den Live-Prototypen qualitativen Testläufen unter realen Bedingungen. Die Auswertung der Nutzerinterviews erfolgte dabei komplett automatisiert über das AI-Tool Dovetail. Identifizierte UX-Optimierungen und Insights wandelte das System direkt in User-Story-Entwürfe um, die nahtlos zur Priorisierung in das Projektmanagement-Tool Asana flossen.

03

UI/UX-Orchestrierung & Markenintegration:

Während 80 % der funktionalen Konzeption durch KI skaliert wurden, übernahmen unsere Design-Expert:innen die entscheidenden 20 %. Wir definierten die visuellen Kernelemente, setzten die strategische „Baseline“ und lösten komplexe Interaktionsprobleme. So stellten wir sicher, dass die KI-generierten Raster nahtlos mit den markenspezifischen Emotionen von mymuesli verschmolzen.

04

AI-basiertes Development Handover:

Wir etablierten einen Paradigmenwechsel in der Übergabe an die Entwicklung. Statt endloser Spezifikationsdokumente oder kleinteiliger Design-Files übergaben wir lediglich die URL der finalen Prototyp-Website. Das mymuesli-Team, das parallel von uns in Claude Code geonboardet wurde, konnte die Seite so mit der KI crawlen und Spezifikationen sowie Code-Fragmente komplett automatisiert extrahieren.

05

Modulare Skalierung der Social Experience:

Nicht nur technisch beschleunigt, sondern konsequent auf Conversion ausgerichtet: Wir verankerten systematisch abgeleitete Story-Templates im System. Durch die neuen Formate für Influencer-, Community- sowie Health- und Seasonal-Stories schufen wir ein belastbares Fundament, um den ehemals funktionalen Konfigurator dauerhaft in eine konvertierende Marken-Experience zu verwandeln.