UI/UX Design für GEPA: Markenseite und Fair-Trade-Shop

GEPA handelt seit 1975 fair: Kaffee, Schokolade, Tee, Honig, Handwerk. Zwei Websites erzählen davon, die Markenseite gepa.de und der Shop gepa-shop.de.

Wir haben das UI/UX Design für beide entworfen: ein gemeinsames Gestaltungssystem aus Farben, Typografie und Bausteinen, das auf der Markenseite erzählt und im Shop verkauft.

Gestaltet haben wir. Gebaut haben andere.

Fairer Handel ist eine Haltung. Sie muss auch so aussehen.

GEPA spricht viele Menschen an: Endkund:innen, die fair einkaufen wollen, Weltläden und Handel, die bestellen, Firmenkunden, die Kaffee für die Kantine brauchen. Markenseite und Shop sollten sich wie eine Marke anfühlen und trotzdem klar trennen, wo erzählt und wo gekauft wird. Unsere Aufgabe: das UI/UX Design für beide, vom Gestaltungssystem bis zur Produktseite.

Ein System, zwei Tonlagen.

Dunkler Kaffeeton, warmes Creme, ein roter Akzent für alles, was man anklicken soll, und eine kräftige Display-Schrift für Überschriften: Das Grundgerüst ist auf beiden Seiten dasselbe. Die Markenseite trägt es dunkel und bildstark, der Shop hell und aufgeräumt. Buttons, Karten, Teaser und Navigation kommen aus demselben Baukasten, damit der Wechsel zwischen den Seiten nicht wie ein Wechsel wirkt.

Erst die Geschichte, dann das Produkt.

gepa.de erklärt, warum fair: mit großen Bildern der Partnerorganisationen, klaren Einstiegen nach Produkt, Engagement und Kriterien, einem Blog und einem Umschalter für Handel und Firmenkunden. Die Produktseiten führen ohne Umweg in den Shop.

Kaufen soll einfach sein. Fair ist es schon.

Der Shop ordnet das Sortiment nach Kategorie, Anlass und Herkunft: Tee nach Sorte oder Anbaugebiet, Kaffee nach Bestsellern, Neuheiten oder Zubereitung. Produktseiten zeigen Staffelpreise, Bio-Siegel und Bewertungen auf einen Blick. Weltläden und Außer-Haus-Kunden wechseln oben in ihren eigenen Bereich.