Noki Schokolade
Entwicklung eines Designsystem und interaktiven Prototyps für die Schokoladenmarke Noki
UI Design
E-Commerce
Kunde
Noki (fiktive Marke)
Branche
Lebensmittel
Jahr
2025
Projektdauer
3 Wochen
Rolle
Product Design (UX/UI)
Umfang
UI, Prototyp, Usability-Tests
Kontext
Weiterbildung bei neue fische
Kontext.
Im Rahmen meiner Weiterbildung bei neue fische haben wir in einem dreiköpfigen Team eine dreiwöchige Case Study umgesetzt. Ziel war die Konzeption und Entwicklung eines interaktiven E-Commerce-Prototyps. Ich war dabei maßgeblich für Konzeption, Screendesign, Prototyping sowie die Vorbereitung und Auswertung der Usability-Tests verantwortlich.
Als Projektbasis entwickelten wir einen fiktiven Online-Shop für die Schokoladenmarke Noki. Das visuelle und konzeptionelle Fundament von Noki basiert auf vier zentralen Designprinzipien: Verantwortung, Klarheit & Transparenz, Ehrlichkeit in der Kommunikation sowie Individualisierung.
Verantwortung zeigt sich in nachhaltigen Produktentscheidungen und barrierearmen Nutzererlebnissen. Klarheit und Transparenz prägen die Informationsarchitektur, das reduzierte Branding und die nachvollziehbare Darstellung von Zutaten und Herkunft. Ehrliche Kommunikation verzichtet bewusst auf Übertreibungen und schafft Vertrauen durch Zertifizierungen und konsistente Gestaltung. Individualisierung wird durch personalisierbare Produkte und einen interaktiven Schokoladen-Konfigurator erlebbar gemacht.
Ansatz.
In der ersten Woche haben wir eine stabile Design-Foundation aufgebaut: Farben, Typografie und eine Komponenten-Bibliothek als Grundlage für ein skalierbares Designsystem.
Darauf aufbauend formulierten wir drei zentrale User Stories zu Orientierung & Suche, Transparenz von Produktinformationen sowie Interaktion & Gamification. Diese definierten die funktionalen Anforderungen und dienten als Basis für die Erstellung erster Wireframes zur Strukturierung von Nutzerführung und Inhalten.
Lösung.
In Woche zwei entstanden High-Fidelity-Screendesigns sowie ein klickbarer Prototyp mit Fokus auf Klarheit, Konsistenz und gezielten Mikrointeraktionen.
Iteration
In der dritten Woche haben wir den entwickelten Prototypen in moderierten sowie unmoderierten Usability-Tests mit insgesamt zwölf Testpersonen validiert. Die unmoderierten Tests wurden über Maze durchgeführt, um strukturiertes, vergleichbares Feedback zu erhalten.
Die Auswertung zeigte deutlich, dass die Suchfunktion kaum aktiv genutzt wurde. Stattdessen orientierten sich die Nutzer:innen primär über das Sortiment.
Auf Basis dieser Erkenntnisse haben wir die Navigationsstruktur überarbeitet und den Fokus stärker auf unterstützende Filter- und Sprungmarken gelegt, um den Produkteinstieg intuitiver und effizienter zu gestalten.
Fazit.
Die Case Study hat deutlich gezeigt, wie wertvoll Usability-Tests für fundierte Designentscheidungen sind. Sie helfen, Annahmen zu überprüfen und echte Nutzerbedürfnisse sichtbar zu machen. Iteratives Arbeiten mit Testing ist ein unverzichtbarer Bestandteil erfolgreicher digitaler Produktentwicklung.
Aufgrund des engen Zeitrahmens konnten wir den Prototypen nicht in allen Navigationspfaden vollständig ausarbeiten. Dies zeigte sich insbesondere in den unmoderierten Tests, in denen einige Testpersonen alternative Lösungswege einschlugen, die im Prototypen noch nicht vollständig abgebildet waren.
Diese Situation lieferte jedoch wertvolle Erkenntnisse: Sie machte deutlich, wo Nutzererwartungen von unseren Annahmen abwichen und welche zusätzlichen Interaktionspfade in einer Weiterentwicklung berücksichtigt werden müssten.
Credits.
Das Projekt wurde gemeinsam von Azer Bas, Shad Ismail und mir umgesetzt. Ich habe einen Großteil der Projektleitung übernommen und war maßgeblich an Screendesign, Prototypenbau sowie der Planung und Auswertung der Tests beteiligt. Das Projekt entstand im Rahmen meiner Weiterbildung bei neue fische.
