Work
UI/UX Projekt
Overview
Projekttyp
UI/UX Projekt
Zeitrahmen
2 Wochen
Service
UI Design
UX Research
Prototyp
Tools
Figma
Das Problem am Biomarkt
Viele traditionelle Biokisten-Angebote wirken heute unflexibel und wenig kundenorientiert. Die Auswahl ist oft begrenzt, die Kommunikation über Herkunft und Qualität der Produkte intransparent, und der Bestellprozess kompliziert. Doch der Wille, umweltbewusster zu leben wächst. Das Image der “verstaubten Biokiste” muss sich also ändern, damit die Nachhaltigkeit und die reduzierte Lebensmittelverschwendung wieder in den Vordergrund rückt.
Ziel
Wir glauben, dass wir mithilfe von Kraut und Quer das Problem lösen können. Die verstaubte Biokiste bekommt durch eine moderne Usability, ein zeitgemäßes Auftreten und Flexibilität des Bestellverlaufs eine neue Bedeutung. Durch die eigene Entscheidung der vorgefertigten Biokiste oder dem Zusammenstellen einer eigenen Kiste, wird der Kauf zu einem positiven Erlebnis.
Erste Annahme
NUTZER*INNEN WÜNSCHEN SICH EINE INDIVIDUELL ANPASSBARE PRODUKTZUSAMMENSTELLUNG, DIE IHREN PERSÖNLICHEN BEDÜRFNISSEN ENTSPRICHT, UM LEBENSMITTELVERSCHWENDUNG ZU VERMEIDEN UND NUR DAS ZU ERHALTEN, WAS SIE TATSÄCHLICH VERWENDEN KÖNNEN.
Designprinzipien
Umfrage
106+
106+
Teilnehmende
text text text
User Flow
Der User Flow zeigt den typischen Ablauf einer Bestellung. Vom Startbildschirm führt der Weg über die Produktauswahl und den Warenkorb bis hin zum Kaufabschluss. Besonderes Augenmerk liegt auf einer klaren Struktur und möglichst wenigen Klicks, damit der Prozess schnell und unkompliziert bleibt. Ziel ist es, den Einkauf von geretteten Lebensmitteln genauso einfach – oder einfacher – zu machen wie den Kauf im Supermarkt.
Prototyp
Style Guide
Mid-Fidelity Wireframes
Unser Prototyp ist entlang unseres User Flows entwickelt worden, wobei das User Testing und die Aufgabenstellung „Stelle eine eigene Biokiste zusammen und füge einen Boskoop-Apfel in deinen Warenkorb“ im Mittelpunkt standen. Um die Nutzer:innen intuitiv durch den Prozess zu führen, setzten wir auf ein klares Storytelling und ein einleitendes Pop-Up, das beim Start der Kistenzusammenstellung unterstützt. Zudem haben wir die Navigation optimiert, indem wir Hauptkategorien wie Obst und Gemüse um Subkategorien ergänzt haben, um die Orientierung zu erleichtern. Auch die Produktkarten wurden angepasst und zeigen nun alle wichtigen Informationen wie Preis und Menge direkt an, sodass Produkte mit nur einem Klick in die Kiste gelegt werden können. Ein fixierter Bestell-Button, der beim Scrollen sichtbar bleibt, und eine schwebende Budgetanzeige nach der Produktauswahl helfen dabei, den Überblick zu behalten und den Kaufprozess klarer und einfacher zu gestalten.
Typografie
KNEWAVE
Mit ihrer handschriftlichen, verspielten Form bringt Knewave Persönlichkeit und Lebendigkeit ins Design. Sie wirkt ehrlich, direkt und nahbar – perfekt für ein Projekt, das Transparenz und Charme in den Mittelpunkt stellt. Die Schrift verleiht Headlines Charakter und transportiert die lockere, zugängliche Tonalität der Marke auf den ersten Blick.
Headline 1 - 42/120
Headline 2 - 28/120
NUNITO
Nunito ergänzt Knewave mit klarer Struktur und hoher Lesbarkeit. Ihre sanften Rundungen wirken freundlich und modern, was die intuitive Nutzerführung optimal unterstützt. Die Schrift vermittelt Zuverlässigkeit ohne Strenge – ideal für digitale Oberflächen, die flexibel, klar und einladend sein sollen.
Body 1 - 18/150
Body 2 - 16/150
Farben
Die Farbpalette kombiniert natürliche Grün- und Beigetöne mit kräftigen Orangetönen. Grün steht für Natur, Ruhe und Vertrauen, während Orange Energie und Aufmerksamkeit schafft. Ergänzende dunkle Akzentfarben geben Stabilität. Zusammen entsteht ein harmonisches, frisches und modernes Erscheinungsbild, das Nachhaltigkeit und Nutzerfreundlichkeit betont.
Logo Design
text text text
Illustrationen & Components
Die Sticker greifen die zentralen Design-Prinzipien auf: ehrlich, „Bio mal anders“, intuitiv und flexibel. Durch die realistische Darstellung vermitteln sie Nähe und Authentizität, ohne etwas zu beschönigen. Ergänzende Illustrationen bringen Leichtigkeit ins Design und spiegeln die freundliche, zugängliche Tonalität der App wider. Die Components wurden erstellt, um ein konsistentes und wiedererkennbares Interface zu gewährleisten. Sie erleichtern den Aufbau neuer Screens, sorgen für Klarheit im Nutzerfluss und machen die Interaktion einfach und intuitiv. So entsteht eine klare visuelle Sprache, die das gesamte Produkt zusammenhält.
