UX/UI E-Commerce

NUTZERZENTRIERTE OPTIMIERUNG IM E-COMMERCE

UX, Interaction Design und Conversion-Optimierung für digitale Produkterlebnisse


Unternehmen: Beurer GmbH

Bereich: D2C E-Commerce

Position: Werkstudent UX

Zeitraum: September 2022 bis November 2024

Schwerpunkte: UX/UI Design, Interaction Design, User Research, Conversion, Testing und Qualitätssicherung



AUSGANGSSITUATION

Beurer bietet ein breites Sortiment aus den Bereichen Gesundheit, Wohlbefinden und Körperpflege.

Im Direct-to-Consumer-E-Commerce treffen dabei unterschiedliche Anforderungen aufeinander:

komplexe Produkte

unterschiedliche Zielgruppen

erklärungsbedürftige Funktionen

wirtschaftliche Ziele

technische Rahmenbedingungen

bestehende Design- und Contentstrukturen

Für Nutzer muss daraus trotzdem ein möglichst einfaches digitales Einkaufserlebnis entstehen.

Die zentrale Herausforderung bestand deshalb darin, Produktinformationen, Nutzerbedürfnisse und geschäftliche Ziele miteinander zu verbinden.



DAS PROBLEM

Eine technisch vollständige Produktseite ist nicht automatisch eine gute Produktseite.

Nutzer müssen innerhalb kurzer Zeit verstehen:

Was ist das Produkt?

Welches Problem löst es?

Ist es für mich geeignet?

Welche Funktionen sind relevant?

Was unterscheidet es von Alternativen?

Kann ich dem Produkt und dem Anbieter vertrauen?

Wie komme ich möglichst einfach zur nächsten sinnvollen Aktion?

Jede unklare Information oder unnötige Interaktion kann dabei zu Unsicherheit oder einem Abbruch führen.

UX im E-Commerce bedeutet deshalb nicht nur Gestaltung.

Es bedeutet, die gesamte Entscheidungsstruktur des Nutzers zu verstehen.



MEINE ROLLE

Als Werkstudent im UX-Bereich des D2C E-Commerce unterstützte ich die Weiterentwicklung und Optimierung digitaler Nutzererlebnisse.

Meine Aufgaben umfassten unter anderem:

Entwicklung und Optimierung von UX/UI-Konzepten

Wireframes und Mock-ups

Interaction Design

Analyse bestehender Nutzerführungen

User Research

Usability Testing

Conversion-orientierte Optimierung

Qualitätssicherung

strukturiertes Ticketmanagement

Abstimmung innerhalb projektorientierter Teams

Unterstützung bei Content- und SEO-Themen

Testing bestehender und neuer Funktionen



DIE ZENTRALE FRAGE

Wie können Nutzer so durch einen digitalen Shop geführt werden, dass sie relevante Informationen schnell verstehen, weniger Unsicherheit erleben und einfacher zu einer fundierten Kaufentscheidung gelangen?



01 — NUTZER UND KONTEXT VERSTEHEN

Am Anfang stand nicht das Interface.

Zunächst musste verstanden werden, welche Informationen und Funktionen Nutzer tatsächlich benötigen.

Dabei wurden unter anderem betrachtet:

Nutzerziele

Informationsbedarf

mögliche Unsicherheiten

bestehende Nutzungsmuster

Probleme innerhalb der Customer Journey

Verständlichkeit von Funktionen und Inhalten

Durch User Research und Testing konnten interne Annahmen mit tatsächlichem Nutzerverhalten verglichen werden.



02 — BESTEHENDE USER FLOWS ANALYSIEREN

Ein wichtiger Bestandteil meiner Arbeit war die Betrachtung bestehender Nutzerführungen.

Dabei ging es unter anderem um Fragen wie:

Ist der nächste Schritt eindeutig?

Sind relevante Informationen zum richtigen Zeitpunkt sichtbar?

Gibt es unnötige Schritte?

Entstehen Sackgassen?

Sind Interaktionen verständlich?

Sind wichtige Funktionen dort platziert, wo Nutzer sie erwarten?

Das Ziel war nicht, möglichst viele Elemente zu verändern.

Entscheidend war, tatsächliche Reibungspunkte zu identifizieren.



03 — INFORMATION ARCHITECTURE

Besonders bei erklärungsbedürftigen Produkten spielt Informationsarchitektur eine zentrale Rolle.

Nicht jede Information besitzt für den Nutzer dieselbe Priorität.

Deshalb mussten Inhalte strukturiert und hierarchisiert werden.

Typische Ebenen waren:

Produktverständnis

zentrale Vorteile

relevante Funktionen

Unterschiede zwischen Varianten

technische Details

ergänzende Informationen

Kaufentscheidung

Die Herausforderung bestand darin, genügend Informationen bereitzustellen, ohne Nutzer mit Details zu überfordern.



04 — INTERACTION DESIGN

Interaction Design beschäftigte sich mit der Frage:

Wie reagiert das digitale Produkt auf den Nutzer und wie wird der Nutzer durch eine Aufgabe geführt?

Dabei betrachtete ich nicht nur einzelne Buttons.

Relevant waren komplette Interaktionsabläufe.

Zum Beispiel:

Information entdecken

Produkt verstehen

Option auswählen

Details vergleichen

Entscheidung treffen

Aktion auslösen

Feedback erhalten

Ein guter Flow sollte möglichst wenig Erklärung benötigen.

Der Nutzer sollte verstehen, welche Möglichkeiten bestehen und welche Konsequenz eine Interaktion hat.



05 — WIREFRAMES UND MOCK-UPS

Erkannte Probleme wurden in konkrete Lösungskonzepte übersetzt.

Dafür arbeitete ich mit Wireframes und Mock-ups.

Wireframes halfen insbesondere dabei, zunächst Struktur und Funktion zu klären.

Bevor visuelle Details ausgearbeitet wurden, konnten Fragen beantwortet werden wie:

Welche Information steht an erster Stelle?

Welche Elemente benötigen mehr visuelles Gewicht?

Welche Aktionen stehen zur Verfügung?

Welche Inhalte können reduziert werden?

Wie verändert sich der Aufbau auf unterschiedlichen Bildschirmgrößen?

Mock-ups ermöglichten anschließend eine realistischere Bewertung der geplanten Lösung.



06 — VISUELLE HIERARCHIE

Eine der wichtigsten Designaufgaben im E-Commerce ist die Steuerung von Aufmerksamkeit.

Nicht jedes Element darf gleich wichtig wirken.

Die visuelle Hierarchie sollte Nutzern vermitteln:

Was ist das?

Warum ist es relevant?

Was sollte ich als Nächstes ansehen?

Welche Aktion ist die wichtigste?

Dafür wurden unter anderem folgende Faktoren berücksichtigt:

Typografie

Abstände

Größe

Positionierung

Gruppierung

Kontrast

Bildsprache

Priorisierung von Call-to-Actions

Das Ziel war nicht maximale visuelle Aufmerksamkeit.

Das Ziel war Orientierung.



07 — CONVERSION-ORIENTIERTES DESIGN

Conversion-Optimierung bedeutet für mich nicht, möglichst aggressiv zum Kauf zu drängen.

Im Zentrum steht die Frage:

Welche Hindernisse verhindern eine Entscheidung?

Mögliche Conversion-Barrieren können sein:

unklare Produktvorteile

zu viele Informationen gleichzeitig

fehlende Orientierung

schlecht erkennbare Aktionen

unnötige Prozessschritte

fehlendes Vertrauen

unklare Auswahlmöglichkeiten

schwache visuelle Priorisierung

Informationslücken

Die Aufgabe besteht darin, solche Barrieren systematisch zu reduzieren.



08 — CALL-TO-ACTION DESIGN

Call-to-Actions sind ein wichtiger Bestandteil der User Journey.

Dabei geht es nicht nur um Farbe oder Größe eines Buttons.

Entscheidend ist:

Ist klar, was nach dem Klick passiert?

Ist die Aktion zum aktuellen Zeitpunkt sinnvoll?

Gibt es konkurrierende Aktionen?

Ist die wichtigste Aktion visuell eindeutig?

Hat der Nutzer vorher ausreichend Informationen für diese Entscheidung erhalten?

Ein Call-to-Action funktioniert nur dann gut, wenn der gesamte Kontext davor funktioniert.



09 — DESIGNSTRATEGIEN FÜR E-COMMERCE

Verschiedene Designprinzipien unterstützten die Optimierung der Nutzerführung.



REDUKTION

Nicht jede verfügbare Information muss gleichzeitig sichtbar sein.

Eine reduzierte Darstellung kann Orientierung verbessern und Cognitive Load verringern.



PROGRESSIVE DISCLOSURE

Komplexere Informationen können schrittweise verfügbar gemacht werden.

Zuerst erhält der Nutzer die wichtigsten Inhalte.

Weitere Details erscheinen erst bei Bedarf.



VISUELLE PRIORISIERUNG

Wichtige Informationen müssen schneller wahrgenommen werden als ergänzende Inhalte.



KONSISTENZ

Ähnliche Funktionen sollten sich ähnlich verhalten.

Wiederkehrende Muster reduzieren den Lernaufwand.



FEEDBACK

Nach einer Interaktion sollte der Nutzer erkennen können, dass seine Aktion registriert wurde und welchen Zustand das System nun besitzt.



ERROR PREVENTION

Ein gutes Interface sollte Fehler möglichst verhindern, bevor sie auftreten.

Das ist häufig besser als eine Fehlermeldung nach einer falschen Aktion.



10 — USER RESEARCH

Designentscheidungen basierten nicht ausschließlich auf persönlicher Einschätzung.

User Research half dabei zu überprüfen:

Welche Probleme Nutzer tatsächlich haben

welche Inhalte verstanden werden

wo Unsicherheit entsteht

welche Elemente übersehen werden

wie Nutzer bestimmte Funktionen interpretieren

Dadurch konnten Hypothesen hinterfragt und Designentscheidungen besser begründet werden.



11 — USABILITY TESTING

Usability Tests lieferten direktes Feedback zur tatsächlichen Nutzung.

Dabei war besonders interessant:

Nicht das, was Nutzer sagen, dass sie tun würden, sondern das, was sie während einer Aufgabe tatsächlich tun.

Beobachtet werden konnten unter anderem:

Suchverhalten

Missverständnisse

Zögern

falsche Interaktionen

Umwege

nicht wahrgenommene Inhalte

Probleme innerhalb eines Ablaufs

Diese Erkenntnisse flossen anschließend in die weitere Optimierung ein.



12 — ITERATIVES DESIGN

Ein Design war nicht automatisch abgeschlossen, sobald ein Mock-up fertiggestellt war.

Der Prozess verlief iterativ.

Analyse

Hypothese

Konzept

Wireframe

Mock-up

Testing

Feedback

Überarbeitung

Umsetzung

Qualitätssicherung

Dieses Vorgehen half dabei, Probleme schrittweise einzugrenzen und Lösungen kontinuierlich zu verbessern.



13 — TICKETMANAGEMENT UND HANDOFF

Ein gutes Konzept hat keinen Wert, wenn es nicht eindeutig umgesetzt werden kann.

Deshalb spielte die strukturierte Dokumentation von Anforderungen eine wichtige Rolle.

Erkenntnisse und Anforderungen wurden in nachvollziehbare Tickets übersetzt.

Dabei mussten unter anderem folgende Punkte eindeutig sein:

Welches Problem besteht?

Wo tritt es auf?

Wie sollte sich das System stattdessen verhalten?

Welche Bedingungen müssen berücksichtigt werden?

Wie kann überprüft werden, ob die Umsetzung korrekt ist?

Damit wurde UX gleichzeitig zur Schnittstelle zwischen Nutzerperspektive, Business und technischer Umsetzung.



14 — QUALITÄTSSICHERUNG

Nach der Umsetzung begann ein weiterer wichtiger Teil des Prozesses.

Neue oder veränderte Funktionen mussten geprüft werden.

Dabei betrachtete ich unter anderem:

funktionales Verhalten

Abweichungen vom Konzept

Darstellungsfehler

Responsive Verhalten

Contentfehler

Interaktionsprobleme

Inkonsistenzen

mögliche Fehler innerhalb wichtiger User Flows

Qualitätssicherung stellt sicher, dass die tatsächlich ausgelieferte Experience der geplanten Experience entspricht.



15 — TESTING UND AUTOMATISIERUNG

Je nach Aufgabenstellung kamen neben manuellen Prüfungen auch technische Hilfsmittel zum Einsatz.

Unter anderem arbeitete ich mit Selenium im Umfeld von Testing und Qualitätssicherung.

Dadurch konnten wiederkehrende Prüfungen strukturierter unterstützt und Fehler innerhalb digitaler Prozesse schneller identifiziert werden.



16 — CONTENT ALS UX-ELEMENT

UX besteht nicht nur aus visuellen Komponenten.

Auch Sprache beeinflusst die Nutzererfahrung.

Besonders im E-Commerce müssen Inhalte schnell verständlich sein.

Wichtig waren deshalb unter anderem:

klare Bezeichnungen

verständliche Produktinformationen

eindeutige Call-to-Actions

logische Informationsreihenfolge

Vermeidung unnötig technischer Sprache

Konsistenz zwischen verschiedenen Bereichen

Content Design wurde damit Teil der gesamten User Experience.



17 — SEO UND UX

SEO und UX wurden nicht als vollständig getrennte Disziplinen betrachtet.

Suchmaschinen helfen Nutzern zunächst dabei, relevante Inhalte zu finden.

Die eigentliche Aufgabe beginnt anschließend auf der Seite.

Eine gute Seite muss deshalb sowohl auffindbar als auch verständlich sein.

Dabei sollten Suchintention, Content und tatsächlicher Seiteninhalt zueinander passen.

Reichweite allein erzeugt keine gute Experience.



18 — BUSINESS UND UX VERBINDEN

E-Commerce-UX muss Nutzerbedürfnisse und wirtschaftliche Ziele zusammenbringen.

Das bedeutet:

Nutzer benötigen Orientierung.

Das Unternehmen benötigt Conversion.

Nutzer benötigen relevante Informationen.

Das Unternehmen möchte Produkte verständlich positionieren.

Nutzer wollen möglichst wenige unnötige Schritte.

Das Unternehmen benötigt funktionierende Prozesse.

Gute UX entsteht dort, wo sich diese Anforderungen sinnvoll überschneiden.



ERGEBNIS

Meine Arbeit unterstützte die kontinuierliche Weiterentwicklung der digitalen Customer Journey im Beurer D2C E-Commerce.

Dazu gehörten unter anderem:

strukturierte UX/UI-Konzepte

Verbesserung bestehender Nutzerführungen

Wireframes und Mock-ups als Entscheidungsgrundlage

Einbindung von User Research und Testing

conversion-orientierte Optimierungsansätze

strukturierte Übergabe von Anforderungen

Qualitätssicherung nach der Umsetzung

Unterstützung einer konsistenten digitalen User Experience

Konkrete interne Conversion- oder Umsatzkennzahlen werden aus Vertraulichkeitsgründen nicht veröffentlicht.



WAS ICH GELERNT HABE

UX ist kein einzelner Design-Schritt.

Eine gute User Experience entsteht aus mehreren miteinander verbundenen Bereichen:

Research

Informationsarchitektur

Interaction Design

Visual Design

Content

Testing

technische Umsetzung

Business-Ziele

Qualitätssicherung

Besonders wichtig war für mich die Erkenntnis, dass ein visuell überzeugendes Interface nicht automatisch ein gutes Interface ist.

Design muss ein reales Nutzerproblem lösen.



MEINE WICHTIGSTE ERKENNTNIS

Gutes E-Commerce-Design reduziert nicht nur Klicks.

Es reduziert Unsicherheit.

Wenn Nutzer schneller verstehen, was relevant ist, welche Möglichkeiten sie haben und was als Nächstes passiert, profitieren sowohl User Experience als auch Conversion.



KOMPETENZEN

UX Design

UI Design

Interaction Design

Information Architecture

Conversion Optimization

E-Commerce UX

User Research

Usability Testing

Wireframing

Mock-ups

Customer Journey

Content Design

SEO

Quality Assurance

Selenium

Ticketmanagement

Responsive Design

Design Systems

Visual Hierarchy

Error Prevention

Stakeholder Collaboration