Case Study · E-Commerce & Branding · User Centered Design 3 · OST

Eine Streetwear-Marke
mit Herz.

PROGRÈS ist eine fiktive Fashion-Marke, die ich im Modul UCD 3 an der OST entwickelt habe. Die Marke verbindet sportliche Ästhetik, urbane Energie und brasilianische Wurzeln.

Gefordert war eine Produktseite auf Basis eines Designsystems. Freiwillig habe ich die Aufgabe um eine eigene Brand Identity, eine Landingpage, About Us sowie Cart & Checkout erweitert – damit Branding, UI und User Experience als ein durchgängiges Erlebnis spürbar werden.

RolleBranding, UX/UI Design & Prototyping

ProjektEinzelarbeit · fiktive Marke

ZeitraumHerbstsemester 2025

ToolsFigma · Variables · Komponenten · Prototyping · KI-Bildgenerierung

Aufgabe

Eine Produktseite auf Basis eines Designsystems gestalten.

Was ich gemacht habe

Name, Logo und Farbwelt entwickelt
Designsystem mit Tokens aufgebaut
Klickbaren Prototyp für Desktop & Mobile gebaut und getestet

Ergebnis

Aus einer Produktseite wurde ein Shop-Prototyp mit fünf Seiten.

16–30

Jahre – modeaffine, digital orientierte Zielgruppe aus Streetwear, Sportswear & Urban Fashion

Plattformen: eigenständige Desktop- (1440 px) und Mobile-Version (393 px)

High-Fidelity-Screens: Landing, Produktliste, Produktdetail, About Us, Cart & Checkout

Design-Frage

Wie gestalte ich ein E-Commerce-Interface, das visuelle Klarheit, intuitive Interaktion und emotionale Markenkommunikation miteinander verbindet?

01 — Der Shop

Der Shop.

Fünf High-Fidelity-Screens: Landingpage, Produktliste, Produktdetailseite, About Us sowie Cart & Checkout – für Desktop und, ausser dem Checkout, auch für Mobile. Alle greifen auf dieselben Farben, Textstile und Komponenten zurück – und machen die Marke in jedem Schritt spürbar.

02 — Kernstück: Die Produktkachel

Eine Kachel,
viele Zustände.

Die horizontale Desktop-Kachel war die erste Komponente und bildet die strukturelle Referenz für alle weiteren Varianten: Medienbereich links, Informationsbereich rechts – Kategorie, Produktname, Preis, Farbe, Varianten, Grösse, Material, Add to Cart und Lieferinfo.

Daraus habe ich die vertikale Kachel für Mobile abgeleitet – und gemerkt, dass sie im 4-spaltigen Desktop-Grid genauso funktioniert. Varianten zeigen Default, Hover mit Model-Shot und Farbwechsel; Image- und Video-Preview-Varianten ergänzen das System.

Kachel Hover Model Beige — Hover · Model Beige

01Kategorie & Produkttitel, Preis, Farbe

02Farbvarianten als Thumbnails

03Grösse & Material (inkl. Herkunft)

04Call-to-Action «Add to Cart»

05Lieferinformation 2–4 Tage

Interaktion

Desktop: Hover zeigt das Model, Farbwechsel per Smart Animate. Mobile: Tap wechselt sofort – statt Hover kommt der Pressed-State.

03 — Markenidee

Ordem e
Progresso.

PROGRÈS ist die französische Form von «Progresso» – dem Wort aus dem brasilianischen Staatsmotto «Ordem e Progresso». Die Marke steht für Weiterentwicklung, Verantwortung und Fortschritt – und für eine faire Streetwear-Marke mit starkem Community-Gedanken.

Der Stern stammt aus der brasilianischen Flagge und ist das grafische Leitelement der Marke. Er steht für Orientierung, Zusammenhalt und positive Entwicklung. Das Blau verweist auf den Himmel und die Sterne – auf Ruhe und Richtung.

Moodboard & Brand Exploration

Inspiriert
von Bahia.

Die Farbwelt ist inspiriert von Bahia, dem brasilianischen Bundesstaat, aus dem meine Mutter stammt – bekannt für seine starke kulturelle Identität, warme Menschen, Küstenlandschaften und lebendige Energie. Dieses Gefühl von Leichtigkeit, Sonne und Klarheit habe ich mit dem cleanen, reduzierten Look moderner E-Fashion verbunden.

04 — Logoentwicklung

Ein Stern,
der vorangeht.

Bildmarke und Wortmarke verbinden sportliche Kraft mit klarer Geometrie: ein Stern im abgerundeten Quadrat, dessen Schweif Bewegung nach vorne zeigt, und eine heavy-condensed Typografie, wie man sie von Sportswear-Brands kennt. Das Logo existiert horizontal und vertikal – für Kleidung, die Navigation, den mobilen Footer oder als Intro auf der Landingpage.

05 — Designsystem

Vom Moodboard
zum Token.

Aus der Bahia-Palette wurden zwei Markenfarben: Royal Blue für primäre Aktionen und Forest Green für sekundäre. Ihre Skalen von 50 bis 950 sind als Primitives angelegt; darauf bauen semantische Tokens für Buttons, Texte, Hintergründe und States auf. Default nutzt Stufe 500, Hover die dunklere Stufe 800.

ROYAL BLUE

FOREST GREEN

Primary#312783

Primary Hover#161146

Secondary#0A5E07

Secondary Hover#022B01

Text Primary#1B1B1B

Background#FFFFFF

Typografie

INTER

Inter wurde für Bildschirme entwickelt und bleibt auch klein sehr gut lesbar. Dekorative Fonts habe ich getestet und verworfen – sie wirkten zu unruhig. Die Kraft liegt in der kompakten Wortmarke; alles andere bleibt bewusst leicht: grosse Headlines in Light Italic, Produktnamen in Semi Bold, Fliesstext in Light.

H1 ItalicInter Light Italic · 96 pxNEW ARRIVALS

H2Inter Light · 64 pxBestsellers

Product NameInter Semi Bold · 16 pxMOHAIR TURTLENECK TOP

BodyInter Light · 20 pxOrganic streetwear with soul — effortless and real.

UI / NavigationInter Italic · 18 pxAbout Us

Small / PriceInter Regular · 14 pxCHF 54.00

Prozess · vom Wireframe zum Shop

Erst die Struktur, dann die Marke.

Bevor Farben, Bilder und Logo dazukamen, habe ich Landingpage und Produktkacheln als Low-Fidelity-Wireframes aufgebaut. So konnte ich die Struktur prüfen, ohne mich von der Optik ablenken zu lassen.

Low-Fidelity-Wireframe der Landingpage — **Low-Fidelity.** Navigation, Hero und Produktraster als Platzhalter.

High-Fidelity-Design der Landingpage — **High-Fidelity.** Dieselbe Struktur mit Marke, Bildwelt und Designsystem.

06 — Fotografie & Visual Direction

Moodboard

Die Bildwelt verbindet Sport, Strasse und Sonne: Trikots auf dem Fussballplatz, junge Menschen auf den Dächern Bahias, Küstenorte im weichen Film-Look. Für den Shop stehen Produkte freigestellt auf hellem Grau – damit Farbe und Material im Raster wirken und der Wechsel zum Model-Shot eine kleine Überraschung bleibt.

07 — User Testing & Iteration

Drei Personen.
Ein klares Signal.

Getestet wurde informell mit drei Personen direkt im Figma-Prototyp, mit der Thinking-Aloud-Methode. Aufgaben: Landingpage erkunden und Produkt wählen, zwischen Produktbildern wechseln, Verfügbarkeit prüfen, Produkt in den Warenkorb legen und Unterkategorien über die Navigation finden.

Testpersonen · Thinking Aloud

realistische Shop-Aufgaben

3/3

erwarten eine klickbare Grössenauswahl

ErkenntnisAnpassung

Grössen nur als Text wirkten unklar – alle erwarten klickbare, sichtbar hervorgehobene Optionen.

Grössenauswahl als interaktive Buttons – auf Mobile und in der vertikalen Kachel.

Auf Mobile helfen kleinere Produktbilder, schneller einen Überblick zu bekommen.

Weniger, kompaktere Produkte auf der mobilen Landingpage; grosse Bilder bleiben in der Detailansicht.

Reduzierte Preise werden in Grün positiver wahrgenommen als in Rot.

Sale-Preise in Green 300 aus der Palette – als Token für spätere Ausbaustufen vorgemerkt.

Material- und Herkunftsinfos sind gewünscht.

Herkunftsort bei der Materialangabe (z. B. Baumwolle) in der mobilen Ansicht ergänzt.

09 — Reflexion & Ausblick

Was ich mitnehme.

Meine Rolle · Einzelarbeit

Von der Marke über Research und Designsystem bis zum getesteten Prototyp – alles selbst umgesetzt.

01Der Vorprozess zähltRecherche, Low-Fi-Skizzen und Tests zeigen, was erste Ideen übersehen.

02Inhalt vor OptikBei der Produktkachel entschied die Struktur – Name, Preis, Farbe, Zusatzinfos – über die Qualität.

03Designsystem früh aufbauenTokens, Typo und Komponenten vereinfachen Entscheidungen und sorgen für Konsistenz.

04Sauber benennenMein erstes grosses Figma-Projekt: Auto Layout, Varianten und Layer-Namen lernte ich Schritt für Schritt.

05Prototyp ≠ ProduktFigma hat Grenzen beim Scrollen – Prototyping kommuniziert Flows, nicht jede Technik.

Ausblick

Mit mehr Zeit würde ich …