Monochromatic Case Study

Monochromatic ist eine UX/UI Case Study von Hacer Aydemir, Grafik und UI Designerin aus Berlin. Die Arbeit zeigt Kommunikationsdesign digital und print im Kontext einer farbbasierten Mobile Shopping App.

UX / UI Case Study

Monochromatic
Color-first Shopping App

Ein Mobile-first Konzept für einen Shop, der Produkte nach Farbstimmung kuratiert. Fokus auf Farbfilter, schnelle Produktauswahl und einen klaren Checkout-Flow.

Mobile UI E-Commerce Color Navigation Wireframes to Hi-Fi
Monochromatic App-Mockup im violetten Umfeld

Von Skizze zu Struktur

Der Prozess startete mit einer Low-Fidelity Navigation für vier Kernbereiche: Start, Farbauswahl, Produktdetail und Warenkorb. Danach wurden Interaktionen für Favoriten, Mengensteuerung und Add-to-Cart-Feedback konkretisiert.

Low-Fidelity-Wireframes der Monochromatic App
Wireframe Startbildschirm Wireframe Produktliste Wireframe Farbsektionen Wireframe Produktdetail Wireframe Add-to-Cart-Dialog Wireframe Warenkorb

Farblogik als Navigationsprinzip

Die App organisiert Produkte über dominante Farbwelten. Jede Farbe erhält einen eigenen visuellen Balken und kuratierte Produktsammlungen, sodass Nutzerinnen und Nutzer direkt über Stimmung statt Kategorie entdecken können.

Babyblue
Valentine's Pink
Lavender
Lime Green
Blue Green
Lila Glaeser als Produktfotografie Gelbe Stillleben-Komposition Gelbes Zimmer als Farbwelt Rosa Beauty-Komposition Rosa Produktdetail Gruene Wohnraum-Komposition Gruener Tisch als Stillleben Violette Haarclips Blaue Instant-Kameras Le-Creuset-Cocotte in Babyblau

Branding

Kompakter Überblick über das visuelle System: Logobau, Kernfarben und Schriftarten.

Monochromatic Logo-Board

App Colors

#EDF2FB #FFFFFF #8E44FF #212121

App Typography

Archivo Black San Francisco Display

High-Fidelity Screens und Flows

Die finalen Mobile Screens zeigen den kompletten Kaufprozess: farbbasierte Produktliste, Detailseite mit Mengenwahl, Save-for-later, Cross-Selling und den Checkout mit klaren Handlungsoptionen.

Produktdetail Le Creuset Uebersicht Lieblingsfarben Warenkorb-Ansicht Farbkategorien uebersicht Produktliste Babyblue Farbkategorien erweitert

App Screens im Überblick

Monochromatic App-Ansicht 1 Monochromatic App-Ansicht 2 Monochromatic App-Ansicht 3 Monochromatic App-Ansicht 4 Monochromatic App-Ansicht 5 Monochromatic App-Ansicht 6
Monochromatic App-Ansicht 6 Monochromatic App-Ansicht 5 Monochromatic App-Ansicht 4 Monochromatic App-Ansicht 3 Monochromatic App-Ansicht 2 Monochromatic App-Ansicht 1

Presentation Boards

Presentation-Board mit vier App-Ansichten 3D-Praesentation der App auf mehreren Phones