UX Design · E-Commerce · Cognitive Load

Cross-Selling,
ohne Reibung.

Ein Cross-Selling-Modul für den Warenkorb, von Grund auf entworfen. Fünf Iterationsstufen, ein klares Ziel: Umsatzpotenzial nutzen, ohne den Kunden im wichtigsten Moment des Kaufprozesses zu stören.

Rolle
UX/UI Designer
Tool
Figma
Kontext
Holy Fashion Group
Status
In Entwicklung

Ausgangslage

Das Problem

Im Warenkorb wurden Cross-Selling-Artikel bisher gar nicht angezeigt. Kunden mit bereits hoher Kaufbereitschaft, kurz vor dem Checkout, entging dadurch die Möglichkeit, passende Zusatzartikel zu entdecken. Das Umsatzpotenzial durch Cross-Selling blieb ungenutzt.

Die Herausforderung: Genau in diesem Moment ist der Kunde zielgerichtet und oft in Eile. Jede Ablenkung ohne klaren Mehrwert wird als Störung empfunden statt als hilfreicher Vorschlag.

💰
Business-Ziel
Erhöhung des durchschnittlichen Warenkorbwerts (AOV) durch höhere Cross-Selling-Konversion
😊
User-Ziel
Relevante Produktvorschläge schnell erkennen und ohne Umwege hinzufügen, ohne den Checkout zu verzögern

Anforderungen

Kognitive Nutzerführung
als Leitprinzip

Hick's Law
Kognitive Belastung gering halten
Anzahl gleichzeitig angezeigter Vorschläge auf 3–5 Artikel begrenzen, um Entscheidungsparalyse zu vermeiden.
Fitts's Law
Schneller Zugriff
Auswahl und Hinzufügen mit möglichst wenigen Interaktionsschritten, Touch-Targets ausreichend gross und gut erreichbar.
Klarheit
Erkennbarkeit als Empfehlung
Klare Kennzeichnung wie „Passend dazu“, damit sofort verständlich ist, warum diese Artikel gezeigt werden.
Relevanz
Bezug sichtbar machen
Verbindung zum bereits im Warenkorb befindlichen Artikel zeigen, um Vertrauen und Relevanz zu erhöhen.
Flow
Kein Bruch im Prozess
Das Modul fügt sich in den bestehenden Warenkorb-Flow ein, statt wie ein Fremdkörper oder Pop-up zu wirken.

Exploration

Fünf Iterationen
bis zur Lösung

Statt direkt auf eine Lösung zuzusteuern, habe ich fünf grundlegend unterschiedliche Platzierungs- und Interaktionskonzepte durchgespielt und gegeneinander abgewogen: horizontale Karten-Slider, kontextuelle Platzierung direkt unter dem Artikel, Drawer-Mechanismen und vertikale Module mit Bundle-Funktion.

V1
Horizontaler Slider unter dem Artikel
V2
Kompaktes Modul, direkt verlinkt
V3
Drawer mit Tooltip-Hinweis
V4
Vertikale Karten, mit/ohne Scroll
V5
Finale Lösung mit Bundle-CTA

Finale Lösung — V5

Ein Modul,
das mitdenkt.

Die V5-Variante platziert das Modul vertikal, direkt im natürlichen Blickfokus zwischen Artikelliste und Bestellübersicht. Es besitzt vier klar definierte States: Closed, Opened, Loading und Hinzugefügt, jeweils mit sichtbarem Feedback, damit der Kunde jederzeit Kontrolle über seine Interaktion wahrnimmt.

Ein zentrales Detail ist der Bundle-CTA „Alle Hinzufügen“: Statt jeden Artikel einzeln bestätigen zu müssen, kann der Kunde die gesamte Empfehlung mit einem Klick übernehmen, ein direkter Hebel gegen Entscheidungsmüdigkeit.

Closed
Kompakt sichtbar, keine Ablenkung vom Kaufprozess
Opened
Empfehlungen mit Grösse und Rabatt-Varianten sichtbar
Loading
Klares Feedback während des Hinzufügens
Hinzugefügt
Bestätigung, Warenkorb aktualisiert ohne Neuladen

Sorgfalt im Detail

Edge Cases mitgedacht

Gutes UX-Design zeigt sich nicht nur im Standardfall, sondern in den Momenten dazwischen: Was passiert, wenn ein Artikel bereits im Warenkorb liegt? Wenn die Grösse nicht verfügbar ist? Wenn mehrere Artikel im Warenkorb liegen und die Empfehlung sich auf welchen davon bezieht? Diese Fälle wurden systematisch durchdacht und in einer Referenztabelle dokumentiert, bevor die finale Lösung stand.

Status

Vom Konzept
zur Umsetzung

5
Iterationsstufen exploriert
4
Definierte Modul-States
3–5
Empfehlungen je Chunk
0
Checkout-Unterbrechungen

Das Projekt ist aktuell in Entwicklung. Was es zeigt: eine Design-Entscheidung ist erst dann fertig, wenn sie sich gegen echte Nutzerbedürfnisse und gegen das behauptet, was der Wettbewerb längst als Standard etabliert hat, ohne diesen Standard unhinterfragt zu übernehmen.

UX DesignFigmaE-CommerceCognitive LoadDesign ExplorationInteraction Design