Digitales Design · Figma-Prototyp
MyMixx
Dein Müsli. Dein Mix. Ein responsiver Konfigurator, der die Auswahl von Zutaten in einen klaren Bestellablauf übersetzt.
Originalprojekt in Figma ansehen
Originalscreens aus Figma · In den Ansichten scrollen oder die Vollansicht öffnen.
Kontext
Berufsschulprojekt · LF6. Erweiterung des Angebots einer fiktiven Müsli-Bar.
Mein Beitrag
Das Design und den Figma-Prototyp habe ich vollständig selbst umgesetzt.
Ergebnis
Desktop- und Mobilansichten für sechs Zutatenschritte, Warenkorb und Bestellbestätigung.
Vom individuellen Mix zur Abholung
Ein Ablauf, zwei Bildschirmgrößen
- 01
Zutaten auswählen
Sechs Kategorien führen durch die Auswahl – von der Basis bis zu den Flüssigkeiten.
- 02
Mix zusammenstellen
Die gewählten Zutaten ergeben den persönlichen Mix; Mengen und Preis bleiben sichtbar.
- 03
Warenkorb prüfen
Zutaten und Mengen prüfen und die Zusammenstellung bei Bedarf anpassen.
- 04
Bestellung überblicken
Kontaktangaben, Abholzeit und Zahlungsart sind im Warenkorb zusammengeführt.
- 05
Bestätigung ansehen
Die Bestellbestätigung zeigt Bestellnummer, Mix, Abholort und Abholzeit.
Warenkorb & Bestellung
Originalscreens aus Figma · In den Ansichten scrollen oder die Vollansicht öffnen.
Bestellbestätigung
Originalscreens aus Figma · In den Ansichten scrollen oder die Vollansicht öffnen.
Ausgangslage, Gestaltung & Umsetzung
Ausgangslage
Die Müsli-Bar MyMixx sollte um eine Online-Konfiguration für Müsli und Porridge erweitert werden. Das Briefing forderte Zutatenauswahl, Bereitstellungstermin, Bestellung und Rückmeldung sowie einen Einstieg über einen Call-to-Action.
Mein Beitrag
Design und Figma-Prototyp vollständig eigenständig. Das Unterrichtsbriefing sah Partnerarbeit für das Gesamtprojekt vor; die hier gezeigte Design- und Prototyp-Arbeit stammt von mir.
Material & Bildquellen
Die Abbildungen zeigen unveränderte Exporte meines Figma-Projekts. Die Aufgabenstellung stammt aus dem LF6-Briefing. Gezeigt wird der Prototyp mit Beispieldaten.
Umsetzung
Wiederkehrende Zutatenkarten, farbige Zustände und eine schrittweise Navigation verbinden die Desktop- und Mobilansichten. Die Bestellübersicht fasst die Auswahl zusammen.
Tools & Produktion
- Figma
- UI-Design, Desktop- und Mobile-Ansichten, Click-Dummy, Interaktionsablauf und Bestellprozess / User Flow.
- Adobe Illustrator
- Erstellung der grafischen Elemente und Vektorelemente.
Die Arbeitsprobe zeigt den Entwurf und keine produktive Shop-Anwendung.