E-COMMERCE · UX/UI Case Study
KRUME
Ein digitales Bestell- und Produktionssystem für eine lokale Sauerteigbäckerei: vom Brot-Konfigurator über Wunschtag, Abholung und Lieferung bis zu Bestellverwaltung, Produktionsübersicht und Katalogpflege im Adminbereich.
- UX/UI
- Full Stack
- E-Commerce
- Projekt
- Konzeptprojekt für eine fiktive Sauerteigbäckerei in Frankfurt am Main
- Meine Rolle
- Product Concept, UX/UI Design und Product Decisions
- Technische Umsetzung
- AI assisted development mit Claude Code auf Basis von Next.js, Fastify, Supabase und TypeScript.
- Plattform
- Responsive Web-App mit Shop, Kundenkonto und Adminbereich
- Technologie & Tools
- Next.js, Fastify, Supabase, TypeScript, Tailwind CSS, Leaflet / OpenStreetMap
01 · Ausgangslage
Worum es geht
Sauerteigbrot lässt sich auf viele Arten individualisieren: Teig, Zutaten, Gestaltung, persönliche Initiale oder Zahl. Jede zusätzliche Option macht das Angebot reicher, aber auch die Entscheidung schwerer.
Gleichzeitig backt eine kleine Bäckerei nicht jeden Tag und nicht unbegrenzt. Bestellungen hängen an Backtagen, Kapazitäten, Abholung oder Lieferung in einem begrenzten Gebiet. Diese Regeln müssen für Kund:innen verständlich und für die Backstube planbar sein.
02 · Ziel
Was das Produkt erreichen soll
Individualisierung verständlich machen, ohne sie zur Pflicht zu machen: Wer einfach ein gutes Brot möchte, soll genauso schnell ans Ziel kommen wie jemand, der sein Brot selbst gestalten will.
Den gesamten Weg von der Auswahl über Wunschtag, Abholung oder Lieferung bis zur Bestellung abbilden und der Bäckerei ein Werkzeug geben, mit dem sie Bestellungen, Produktion, Backtage und Sortiment selbst steuern kann.
03 · Vorgehen
Vom Konzept zum Produkt
Schritt 1
Sortiment als System
Teige, Zutaten und Designs wurden als ein gemeinsamer Katalog strukturiert. Die Klassiker sind darin feste Konfigurationen, keine Sonderfälle. Dadurch gelten Preise, Allergene und Verfügbarkeit überall gleich.
Schritt 2
Zwei Einstiege definieren
Der Shop beginnt mit einer klaren Wahl: Klassiker direkt in den Warenkorb legen oder ein eigenes Brot gestalten. Beide Wege führen in denselben Warenkorb und Checkout.
Schritt 3
Konfigurator in Schritten
Die Gestaltung wurde in vier Schritte geteilt: Teig, Zutaten, Design, Übersicht. Jeder Schritt hat eine Aufgabe, die Übersicht fasst Preis, Zutatenliste und Allergene zusammen.
Schritt 4
Bestellablauf um den Wunschtag
Der Checkout folgt der Reihenfolge, in der die Entscheidung tatsächlich fällt: Abholung oder Lieferung, dann der Wunschtag, dann die Angaben. Gäste können ohne Konto bestellen.
Schritt 5
Die Perspektive der Backstube
Im Adminbereich entstanden Übersichten für Bestellungen, Produktion pro Tag, Wunschtage mit Sperren und Tageskapazität sowie die Pflege des Katalogs.
Schritt 6
Überarbeiten statt ergänzen
Im Verlauf der Konzeption wurden gezeichnete Vorschauen für Teig, Zutaten und Muster wieder entfernt. Sie wirkten künstlicher als das Produkt. Echte Fotos werden nur dort gezeigt, wo sie das Ergebnis wirklich abbilden.
04 · Zentrale UX Entscheidungen
Entscheidungen, die das Erlebnis prägen
01
Der Konfigurator bleibt optional
Eine zentrale Designentscheidung war, Klassiker und Konfigurator gleichwertig anzubieten. Nicht jede Person möchte ein Brot gestalten. Die Klassiker sind der schnelle Weg, der Konfigurator das Angebot für alle, die mehr wollen.
02
Kombinationen vor freier Auswahl
Im Zutatenschritt stehen zuerst abgestimmte Geschmackskombinationen. Die freie Auswahl liegt hinter „Lieber selbst zusammenstellen?“. Wer eine Kombination verändert, sieht sie als „Individuelle Kombination“ gekennzeichnet.
03
Beraten, nicht verbieten
Hinweise wie „Passt besonders gut dazu“ oder „Experimentelle Kombination“ geben Orientierung, blockieren aber nie eine Auswahl. Die Verantwortung für den Geschmack bleibt bei der Person, die bestellt.
04
Personalisierung sichtbar machen
Bei Initiale und Zahl ist das Ergebnis schwer vorstellbar. Deshalb zeigt der Konfigurator für jeden Buchstaben ein Beispielfoto eines Brotes und für Zahlen eine Live-Vorschau auf einem Brotfoto.
05
Inspiration als Einstieg
Die Inspirationswand zeigt echte Beispielbrote. Jede Karte öffnet den Konfigurator mit dieser Kombination vorausgewählt, alles bleibt veränderbar. Beispielinitialen werden bewusst nicht übernommen, das Feld bleibt leer und fokussiert.
06
Wunschtag statt Backtag
Die Sprache folgt der Perspektive der Kund:innen. Der Kalender bietet nur buchbare Tage an, gesperrte oder ausgebuchte Tage sind gar nicht erst wählbar. Saisonale Designs zeigen außerhalb ihrer Saison, wann sie wieder erhältlich sind.
07
Liefergebiet vor dem Checkout klären
Eine Karte mit Adresssuche zeigt sofort „Lieferung möglich“ oder „Keine Lieferung möglich“. Dieselbe Prüfung gilt später im Checkout, damit keine Enttäuschung erst am Ende entsteht.
08
Spürbares Feedback beim Hinzufügen
Ein Produkt fliegt sichtbar in den Warenkorb, danach öffnet sich kurz ein Mini-Warenkorb. Bei reduzierter Bewegung entfällt die Animation, der Mini-Warenkorb bleibt.
Vorher und nachher: der Zutatenschritt
Im früheren Stand war der Zutatenschritt eine freie Liste aller Zutaten nach Gruppen. Wer sein Brot gestalten wollte, musste jede Zutat einzeln abwägen. Dazu passte die Hierarchie nicht: „Keine zusätzlichen Zutaten“ stand ganz oben und wirkte wie die einzige Option, und die Kombinationen standen ohne erkennbare Geschmacksrichtung nebeneinander. Der Schritt wurde umgebaut: Heute stehen abgestimmte Kombinationen zuerst, nach Geschmacksrichtung gruppiert. Die freie Auswahl bleibt als Option erhalten.
Früher: freie Liste aller Zutaten nach Gruppen. Heute: Kombinationen zuerst, freie Auswahl optional.
05 · Verworfene Ansätze
Was ausprobiert und wieder verworfen wurde
Nicht jede Idee hat es ins Produkt geschafft. Diese Ansätze gab es in früheren Ständen; daneben steht jeweils, warum sie ersetzt wurden.
01
Ein normaler Shop mit Produktkategorien
- Früher
- Der erste Stand war ein üblicher Online-Shop: Produkte in Kategorien, eine Karte pro Brot.
- Warum verworfen
- KRUME sollte nicht nur ein klassischer Online-Shop sein. Das Besondere ist das selbst gestaltete Brot, und das ginge in einer Produktliste unter.
- Heute
- Der Shop beginnt mit einer Wahl: einen Klassiker bestellen oder ein eigenes Brot gestalten. Beide Wege führen in denselben Warenkorb.
02
Gezeichnete Vorschauen im Konfigurator
- Früher
- Teig, Zutaten und Muster wurden als gezeichnetes Brot gezeigt, das sich mit jeder Auswahl veränderte.
- Warum verworfen
- Die Zeichnungen überzeugten gestalterisch nicht und wirkten künstlicher als das Produkt selbst.
- Heute
- Für Teig, Zutaten und Muster gibt es keine Vorschau mehr. Echte Fotos stehen nur dort, wo sie das Ergebnis zeigen: bei der Initiale ein Beispielfoto des gewählten Buchstabens.
Früher: gezeichnete Vorschau, die sich mit den Zutaten veränderte. 
Heute: echtes Beispielfoto der gewählten Initiale. 03
Drei Rubriken mit je einer Option
- Früher
- Im Designschritt standen Herz, Saisonal und Saaten als eigene Rubriken, jede mit genau einer Karte.
- Warum verworfen
- Das wirkte unnötig lang und erzeugte leere Kategorien. Neue saisonale Motive sollten später dazukommen können, ohne jedes Mal eine Rubrik zu eröffnen.
- Heute
- Ein gemeinsamer Bereich „Weitere Designs“ mit gleichwertigen Karten für Herz, Kürbis und Saatenkruste.
Früher: drei Rubriken mit je einer Karte. 
Heute: ein Bereich, gleichwertige Karten. 04
Lieferkosten nach Entfernung
- Früher
- Die Lieferung kostete bis 10 km 3,90 € und bis 20 km 5,90 €. Im Checkout stand deshalb nur „ab 3,90 €“, der genaue Betrag ergab sich erst aus der Postleitzahl.
- Warum verworfen
- Die Lieferkosten sollten einheitlich sein: ein Preis, ein Liefergebiet.
- Heute
- Ein fester Preis von 3,90 € im Umkreis von 20 km, sichtbar, sobald „Lieferung“ gewählt ist.
Früher: „ab 3,90 €“, genauer Preis erst mit der Postleitzahl. 
Heute: ein Preis, sofort sichtbar. 05
Tageskacheln statt Kalender, Bestellung nur mit Konto
- Früher
- Der Wunschtag wurde aus einer Reihe von Tageskacheln gewählt, die am aktuellen Tag begann. Bestellen ging nur mit Konto.
- Warum verworfen
- Die Terminwahl sollte übersichtlicher werden, mit Wochen, die wie in einem gewohnten Kalender am Montag beginnen. Und bestellen sollte auch als Gast möglich sein.
- Heute
- Ein Kalender mit Wochen ab Montag; nicht wählbare Tage erklären beim Antippen, warum. Gäste bestellen ohne Konto.
Früher: Tageskacheln ab heute, Wochen nicht ausgerichtet. 
Heute: Kalender mit Wochen ab Montag. 06
Inspiration durch alle vier Schritte
- Früher
- Ein Brot aus der Inspiration öffnete den Konfigurator im ersten Schritt, alle vier Schritte mussten einzeln durchgeklickt werden.
- Warum verworfen
- Wer sich ein fertiges Beispiel aussucht, soll nicht alle vier Schritte von Hand durchgehen müssen.
- Heute
- Die Inspiration springt direkt zur Übersicht, bei Initiale oder Zahl in den Designschritt mit leerem Feld. Jede Auswahl bleibt veränderbar.
07
Bemalte Brote: angekündigt statt bestellbar
- Früher
- Bemalte Brote waren als weiteres Design vorgesehen.
- Warum verworfen
- Sie werden noch nicht angeboten, und nichts soll bestellbar sein, das es nicht gibt.
- Heute
- Sie erscheinen in der Inspiration als „Bald bei KRUME“, ohne Bestellmöglichkeit.
06 · Lösung
Funktionen und Bereiche
KRUME besteht aus einem Shop für Kund:innen und einem Adminbereich für die Bäckerei. Beide greifen auf denselben Katalog zu.
Shop und Konfigurator
- Klassiker mit Produktfotos, direkt bestellbar
- Konfigurator: Teig, Zutaten, Design, Übersicht
- Personalisierung mit Initiale oder Zahl
- Geschmackskombinationen und Empfehlungen
- Inspirationswand mit saisonalen Motiven
Bestellung
- Warenkorb mit Bearbeiten einzelner Brote
- Abholung oder Lieferung im Liefergebiet
- Wunschtag aus buchbaren Tagen
- Bestellung als Gast oder mit Konto
- Bestätigungsseite nach der Bestellung
Kundenkonto
- Bestellübersicht und Bestelldetails
- Passwort ändern
Adminbereich
- Dashboard und Bestellverwaltung mit Status
- Interne Notizen zu Bestellungen
- Produktionsübersicht pro Wunschtag
- Wunschtage sperren, Tageskapazität festlegen
- Katalogverwaltung: Klassiker, Teige, Zutaten, Kombinationen, Designs
Konfigurator und Bestellung
Adminbereich
07 · Evaluation
Wo man hängen bleibt
Vor Tests mit echten Kund:innen wurde KRUME heuristisch evaluiert: ein Walkthrough mit drei Aufgaben auf der Live-Seite, aus Sicht einer Erstbesucherin am Smartphone, am Desktop und mit Tastatur. Die Aufgaben: einen Klassiker zur Abholung am Samstag bestellen, ein Brot mit Initiale gestalten und herausfinden, ob nach 60311 geliefert wird.
Das ersetzt keinen Nutzertest, findet aber zuverlässig Stellen, an denen der Ablauf stockt. Die fünf wichtigsten wurden direkt behoben.
- Kritisch
Eine Postleitzahl allein wurde nicht erkannt
Wer nur „60311“ eingab und den Vorschlag wählte, bekam „Für diese Auswahl fehlt die Postleitzahl“, obwohl genau sie eingegeben war.
Geändert: Reine Postleitzahlen werden erkannt und direkt mit „Lieferung möglich“ oder „Keine Lieferung möglich“ beantwortet. Das Feld heißt jetzt „Adresse oder Postleitzahl eingeben“.
- Mittel
Ein gesperrter Wunschtag ohne Grund
Ein zu kurzfristiger Tag war zwar als nicht wählbar markiert, beim Antippen stand aber nur „Für diesen Tag sind keine Bestellungen mehr möglich“, ohne Grund und ohne Alternative.
Geändert: Die Meldung nennt den Vorlauf von zwei Tagen und den nächsten freien Tag.
- Mittel
Bei der Initiale lief das Tippen ins Leere
Nach der Wahl „Initiale“ blieb der Fokus auf der Karte. Wer sofort einen Buchstaben tippte, sah nichts passieren.
Geändert: Der Cursor springt direkt ins Feld für Buchstabe oder Zahl.
- Mittel
Das Liefergebiet war nicht dort prüfbar, wo die Frage entsteht
Die Startseite nennt den Umkreis von 20 km, bietet aber keine Prüfung an. Auf dem Smartphone lag sie weit unten auf einer anderen Seite.
Geändert: „Liefergebiet ansehen“ verlinkt jetzt direkt zur Adressprüfung.
- Mittel
Dreimal „Klassisch“
Die Variante ohne Zutaten hieß „Klassisch“, genau wie eine Design-Rubrik, dazu kamen der „Klassische Schnitt“ und das Brot „Der Klassiker“. Vorausgewählt war sie außerdem außerhalb des sichtbaren Bereichs.
Geändert: Die Variante ohne Zutaten heißt jetzt „Pur“.
- Kosmetisch
Mini-Warenkorb ohne Details
Ein gestaltetes Brot heißt dort nur „Mein Sauerteigbrot“.
Noch offen.
- Kosmetisch
Schwacher Fokusrahmen auf Auswahlkarten
Mit der Tastatur zeigt sich der Fokus nur als etwas dunklerer Rand.
Noch offen.
- Kosmetisch
Kalender beginnt mit einer vergangenen Woche
Die erste Zeile besteht oft nur aus Tagen, die nicht wählbar sind.
Noch offen.
08 · Reflexion
Was trägt und was als Nächstes kommt
Am meisten hat mich überrascht, wie viel ein einzelnes Wort ausmacht: Aus „Backtag“ wurde „Wunschtag“, weil es um den Tag der Kundin geht und nicht um den der Backstube.
Die gezeichneten Brotvorschauen habe ich gebaut und wieder verworfen, weil sie mich nicht überzeugt haben. Und der Walkthrough hat mir gezeigt, dass ausgerechnet die naheliegendste Eingabe, eine Postleitzahl, an meiner Lieferprüfung scheiterte. Seitdem teste ich zuerst mit dem, was Menschen wirklich eintippen würden.
Was bereits funktioniert
- Klassiker und Konfigurator führen in denselben Warenkorb, ohne dass sich die Wege gegenseitig im Weg stehen.
- Preise, Liefergebiet und Wunschtage folgen überall denselben Regeln, im Shop wie im Adminbereich.
- Die Bäckerei kann Sortiment, Backtage und Kapazität selbst pflegen.
Was als Nächstes getestet und weiterentwickelt wird
- Mit echten Kund:innen testen, ob die Schritte des Konfigurators und die Kombinationsvorschläge verständlich sind.
- Prüfen, welcher Einstieg im Shop gewählt wird und wo Bestellungen abgebrochen werden.
- Bestätigungen per E-Mail, Online-Zahlung und „Passwort vergessen“ sind noch nicht umgesetzt.
KRUME