Redesign bonbon-mueller.de v2 — Part 1: Vom Businessplan zum Designkonzept

Die Ausgangslage

Bonbon-Müller stellt seit 1949 handgemachte Kräuterbonbons in Duisburg her. Drei Generationen Familientradition, Rezepte, die sich bewährt haben, und eine treue Kundschaft. Der bestehende Online-Shop sieht so aus:

Funktional? Ja. Aber austauschbar. Kein Gefühl für die Marke. Keine Geschichte. Ein Standard-Template, das genauso gut Schrauben verkaufen könnte.

Die Inputs

Für das Redesign hatten wir drei Quellen:

1. Der Businessplan

Der Kunde hat einen ausführlichen Businessplan — mit klaren Wachstumszielen für den Online-Kanal und definierten Markenwerten: Bodenständigkeit, Verlässlichkeit, Neugier, Vernetzung.

2. Die Shop-Analyse

Unser KI-gestütztes Team hat den bestehenden Shop systematisch analysiert. Das Ergebnis: ein detaillierter Review-Report mit klaren Befunden.

• Keine eigene Farbpalette — generisches Weiß/Grau
• Keine Markentypografie — Standard-Systemschriften
• Kein visuelles Identitätssystem — keine Muster, keine Illustrationen
• Produktkategorien liefern 404-Fehler — ein Conversion-Killer
• Kontaktseite enthält nur eine E-Mail-Adresse
• Keine Social-Media-Präsenz
• Die faszinierende Gründergeschichte (Wilhelm Müller, geboren 1924, kochte seine ersten Bonbons vor Publikum auf dem Wochenmarkt) versteckt sich tief in einer Unterseite

Gesamtbewertung: 5,5 von 10. Solide Technik, aber die Marke wird nicht ansatzweise transportiert.

3. Die Produktfotos

Der entscheidende Input: echte Fotos der Bonbons, der Produktion, der Kräuter. Aus diesen Bildern hat unser System die Farbpalette extrahiert — die warmen Rottöne des Bonbon-Suds, das Amber der Kräuterextrakte, die cremigen Neutraltöne der Manufaktur.

Das Ergebnis: Sechs Designrichtungen in einem HTML-Dokument

Aus diesen drei Inputs hat unser KI-gestütztes Designteam ein vollständiges Exploration-Dokument generiert — sechs unterschiedliche Designrichtungen, alle basierend auf derselben fotografiebasierten Farbpalette:

Das komplette, interaktive Dokument können Sie hier ansehen: Design-Richtungen öffnen

Jede Richtung exploriert einen anderen Ansatz:

• Editorial Magazine — Fotografie-geführt, Magazin-Stil. Die Geschichte und der Shop verschmelzen zu einem redaktionellen Erlebnis.
• Warm Artisan — Heritage-betont, warme Cremetöne, Handwerks-Hinweise auf jeder Produktkarte.
• Bold DTC — Conversion-optimiert, kräftige Typografie, starke CTAs. Moderne Direct-to-Consumer-Energie.
• Story Scroll — Die Homepage IST die Geschichte. Produkte tauchen erst auf, nachdem die Story überzeugt hat.
• Clean Commerce — Effizienz zuerst. Schneller Produktzugang, klares Grid, Handwerk als Akzent.
• Immersive Heritage — Dunkel, cinematisch, Premium-Positionierung auf Maximum.

Was hier beeindruckend ist

Das ist kein Mockup in Figma. Das ist ein vollständiges, interaktives HTML-Dokument mit:

• Einer Farbpalette, die direkt aus den Produktfotos abgeleitet wurde
• Einem durchdachten Typografie-System (DM Serif Display + DM Sans)
• Sechs komplett ausgearbeiteten Layout-Varianten mit echtem Content
• Einer Vergleichsmatrix, die jede Richtung nach Zielgruppe, Conversion-Speed und Brand Elevation bewertet

Der Zeitaufwand? Nicht Wochen. Nicht Tage. Stunden. Das ist der Unterschied, den KI-gestützte Entwicklung macht — nicht Abstriche bei der Qualität, sondern Elimination der Wartezeiten, die in traditionellen Projekten den Großteil der Durchlaufzeit ausmachen.

Wie es weitergeht

Die Empfehlung aus der Analyse: Eine Kombination aus Editorial Magazine (Fotografie + Layout) und Warm Artisan (Vertrauenssignale + Produktkarten) — damit werden beide Zielgruppen bedient: die jüngere Entdeckerin und die treue Stammkundin.

Im nächsten Teil zeigen wir, wie aus dieser Designrichtung ein funktionierender Shop wird.