KRAUT&QUER

KRAUT
&QUER

KRAUT&QUER

Work

UI/UX Projekt

Jahr

2025

Durch Kraut&Quer kriegt Bio ein neues Image. Der Einkauf wird so einfach und transparent wie möglich gestaltet.

Work

UI/UX Projekt

Jahr

2025

Work

UI/UX Projekt

Durch Kraut&Quer kriegt Bio ein neues Image. Der Einkauf wird so einfach und transparent wie möglich gestaltet.

Work

UI/UX Projekt

Jahr

2025

Durch Kraut&Quer kriegt Bio ein neues Image. Der Einkauf wird so einfach und transparent wie möglich gestaltet.

Overview

Im Rahmen meiner UX/UI-Weiterbildung bei neue fische habe ich in einem dreiköpfigen Team eine App konzipiert, womit das Einkaufen von Bio Produkten einfacher und transparenter gestaltet wird. Bio bekommt hierbei durch das Interface ein neues, frisches Immage. Ausgangspunkt war unsere Recherche rund um das Thema ´Verstaubte Biokiste´. Ziel war es, innerhalb von zwei Wochen, die App mithilfe von Interviews und Usability Testings auf Benutzerfreundlichkeit zu überprüfen.

Projekttyp

UI/UX Projekt

Zeitrahmen

2 Wochen

Bereiche

UX Research

UI Design

Prototyping

Tools

Figma

Overview

Im Rahmen meiner UX/UI-Weiterbildung bei neue fische habe ich in einem dreiköpfigen Team eine App konzipiert, womit das Einkaufen von Bio Produkten einfacher und transparenter gestaltet wird. Bio bekommt hierbei durch das Interface ein neues, frisches Immage. Ausgangspunkt war unsere Recherche rund um das Thema ´Verstaubte Biokiste´. Ziel war es, innerhalb von zwei Wochen, die App mithilfe von Interviews und Usability Testings auf Benutzerfreundlichkeit zu überprüfen.

Projekttyp

UI/UX Projekt

Zeitrahmen

2 Wochen

Bereiche

UX Research

UI Design

Prototyping

Tools

Figma

Overview

Im Rahmen meiner UX/UI-Weiterbildung bei neue fische habe ich in einem dreiköpfigen Team eine App konzipiert, womit das Einkaufen von Bio Produkten einfacher und transparenter gestaltet wird. Bio bekommt hierbei durch das Interface ein neues, frisches Immage. Ausgangspunkt war unsere Recherche rund um das Thema ´Verstaubte Biokiste´. Ziel war es, innerhalb von zwei Wochen, die App mithilfe von Interviews und Usability Testings auf Benutzerfreundlichkeit zu überprüfen.

Projekttyp

UI/UX Projekt

Zeitrahmen

2 Wochen

Bereiche

UX Research

UI Design

Prototyping

Tools

Figma

Overview

Im Rahmen meiner UX/UI-Weiterbildung bei neue fische habe ich in einem dreiköpfigen Team eine App konzipiert, womit das Einkaufen von Bio Produkten einfacher und transparenter gestaltet wird. Bio bekommt hierbei durch das Interface ein neues, frisches Image. Ausgangspunkt war unsere Recherche rund um das Thema "Verstaubte Biokiste". Ziel war es, innerhalb von zwei Wochen, die App mithilfe von Interviews und Usability Testings auf Benutzerfreundlichkeit zu überprüfen.

Projekttyp

UI/UX Projekt

Zeitrahmen

2 Wochen

Bereiche

UX Research

UI Design

Prototyping

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.

Viele Menschen haben Schwierigkeiten, gemeinsame Aktivitäten spontan oder regelmäßig zu organisieren. Absprachen verlaufen unübersichtlich, Treffen scheitern oft an unterschiedlichen Stimmungen, Verfügbarkeiten 

oder der Verantwortung einzelner Personen. Dadurch bleibt der
Wunsch nach Nähe und gemeinsamen 

Erlebnissen häufig unerfüllt.

Designprinzipien
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.

STYLEGUIDE

STYLEGUIDE

STYLEGUIDE

Typografie
Typografie

KNEWAVE

KNEWAVE

Die Neue Haas Grotesk wird in Versalien für Überschriften eingesetzt und mit einem bunten Unterstrich hervorgehoben. Dadurch entsteht ein starker, moderner Look, der Klarheit schafft und den Inhalten Gewicht verleiht. Die markante Grotesk verleiht der App eine urbane, selbstbewusste Ausstrahlung, die perfekt zur jungen Zielgruppe passt.

Die Neue Haas Grotesk wird in Versalien für Überschriften eingesetzt und mit einem bunten Unterstrich hervorgehoben. Dadurch entsteht ein starker, moderner Look, der Klarheit schafft und den Inhalten Gewicht verleiht. Die markante Grotesk verleiht der App eine urbane, selbstbewusste Ausstrahlung, die perfekt zur jungen Zielgruppe passt.

Headline 1 - 42/120

Headline 1 - 42/120

Headline 2 - 28/120

Headline 3 - 24/150

Headline 3 - 24/150

Headline 2 - 28/120

Headline 4 - 18/120

Headline 4 - 18/120

NUNITO

NUNITO

Die Urbanist wird für Fließtexte und erklärende Inhalte genutzt. Ihre runden, offenen Formen sorgen für eine hohe Lesbarkeit und wirken gleichzeitig freundlich und zugänglich. Sie bildet einen ruhigen Gegenpol zur kraftvollen Grotesk und unterstützt eine klare, unkomplizierte Kommunikation innerhalb der App.

Die Urbanist wird für Fließtexte und erklärende Inhalte genutzt. Ihre runden, offenen Formen sorgen für eine hohe Lesbarkeit und wirken gleichzeitig freundlich und zugänglich. Sie bildet einen ruhigen Gegenpol zur kraftvollen Grotesk und unterstützt eine klare, unkomplizierte Kommunikation innerhalb der App.

Body 1 - 18/150

Body 1 - 18/150

Body 2 - 16/150

Button - 20/120

Button - 20/120

Body 2 - 16/150

Link - 18/150

Link - 18/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.

Illustrationen & Components
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.

PROTOTYP

PROTOTYP

PROTOTYP

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.

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.

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.

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.

User Testing

Mit dem qualitativen User Testings konnten wir unsere App auf Usability testen. Hierzu hatten wir zwei Personen, die dies erstesten mussten und die Aufgabe, einen Boskoop Apfel in die Kiste zu tun bewältigen.





Die Durchführung des User Testings hat uns als Gruppe neue Insights gegeben, wie sich Personen wirklich in unserer App zurechtfinden. Der Pain Point unseres Testings war die Unklarheit in Bezug auf "eigene Kiste erstellen" oder "eine bereits erstellte Kiste kaufen".

Auch die Verbindlichkeit, die Box nur regelmäßig bestellen zu können, hat unseren Testpersonen ein unwohles Gefühl gegeben. Hierzu hatten wir schließlich diese Iteration:

Learnings

Learnings

Learnings

PORTFOLIO

CHECK OUT SOME MORE

CHECK OUT SOME MORE

UX Research

UI Design

Prototyping

Branding

UX Research

UI Design

Prototyping

Branding

UX Research

UI Design

Prototyping

Branding

UX Research

UI Design

Prototyping

Branding

UI Design

Prototyping

Künstliche Intelligenz

UI Design

Prototyping

Künstliche Intelligenz

UI Design

Prototyping

Künstliche Intelligenz

UI Design

Prototyping

Künstliche Intelligenz

DEIN PROJEKT VERDIENT GUTES DESIGN

LET´S WORK TOGETHER

LET´S WORK TOGETHER