Sur La Table
Neugestaltung des Checkouts
Neugestaltung des Checkouts für ein flüssigeres, benutzerfreundliches Erlebnis.
Sur La Table
Kassen-Redesign
Eine Checkout-Seite neu gestalten für ein reibungsloseres und benutzerfreundlicheres Erlebnis.
Sur La Table
Neugestaltung des Checkouts
Neugestaltung des Checkouts für ein flüssigeres, benutzerfreundliches Erlebnis.
Sur La Table
Kassen-Redesign
Eine Checkout-Seite neu gestalten für ein reibungsloseres und benutzerfreundlicheres Erlebnis.
Werkzeuge:
Werkzeuge:
Werkzeuge:
Project Overview
Das Ziel unseres Kunden war es, den Checkout-Prozess neu zu gestalten, um eine benutzerfreundlichere Erfahrung zu schaffen und die Konversion um 2 % zu steigern. Ziel war es, Warenkorbabbrüche zu reduzieren und die Kundenzufriedenheit zu erhöhen. Mit diesen Zielen im Blick haben mein Team und ich ein neues Designschema für die Marke des Kunden entwickelt.
Das Ziel unseres Kunden war es, den Checkout-Prozess neu zu gestalten, um eine benutzerfreundlichere Erfahrung zu schaffen und die Konversion um 2 % zu steigern. Ziel war es, Warenkorbabbrüche zu reduzieren und die Kundenzufriedenheit zu erhöhen. Mit diesen Zielen im Blick haben mein Team und ich ein neues Designschema für die Marke des Kunden entwickelt.
Das Ziel unseres Kunden war es, den Checkout-Prozess neu zu gestalten, um eine benutzerfreundlichere Erfahrung zu schaffen und die Konversion um 2 % zu steigern. Ziel war es, Warenkorbabbrüche zu reduzieren und die Kundenzufriedenheit zu erhöhen. Mit diesen Zielen im Blick haben mein Team und ich ein neues Designschema für die Marke des Kunden entwickelt.
Werkzeuge:
Design Process
Der Prozess umfasste drei Hauptphasen, um eine benutzerfreundliche Erfahrung zu gewährleisten, Schwachstellen zu beheben und die Zufriedenheit zu steigern.
1. Forschung zur Identifizierung von Problemen und Lösungen.
2. Ideenfindung und Design (von Graustufen zu Mockups).
3. Benutzer testen nach dem Start mit Leistungsanalyse.
Der Prozess umfasste drei wichtige Phasen, die auf Benutzerfreundlichkeit, Lösung von Problemen und Steigerung der Zufriedenheit abzielten.
1. Recherche zur Identifizierung von Problemen und Lösungen.
2. Ideenfindung und Design (von Graustufen zu Mockups).
3. Benutzertests nach dem Start mit Leistungsanalyse.
Problem
Problem
Kunden stehen beim Checkout vor Herausforderungen, vom Hinzufügen von Artikeln bis zum Abschluss der Bestellung. Diese Reibungen beeinträchtigen den Prozess und führen zu mehr Warenkorbabbrüchen und höheren Absprungraten.
Kunden stehen beim Checkout vor Herausforderungen, vom Hinzufügen von Artikeln bis zum Abschluss der Bestellung. Diese Reibungen beeinträchtigen den Prozess und führen zu mehr Warenkorbabbrüchen und höheren Absprungraten.
Ziele
Ziele
Kasse-Prozess optimieren
Formulare vereinfachen
Personalisierte Abläufe für SLT-Kundentypen verbessern (Geschenke, Abholung im Laden, Kochkurse usw.)
Kassenleistung und -geschwindigkeit steigern
Für mobile Responsiveness optimieren
Sicherheitsmaßnahmen für sensible Daten wie Kreditkarteninformationen verstärken
Research
Nutzerfluss
Nutzerfluss
Um Benutzerinteraktionen effektiv vorherzusagen und zu bewerten, haben mein Team und ich das folgende Flussdiagramm erstellt, um die möglichen Wege der Benutzer während des Checkout-Prozesses darzustellen.
Um Benutzerinteraktionen effektiv vorherzusagen und zu bewerten, haben mein Team und ich das folgende Flussdiagramm erstellt, um die möglichen Wege der Benutzer während des Checkout-Prozesses darzustellen.
Flussdiagramm des Checkout-Prozesses
Flussdiagramm des Checkout-Prozesses (zum Vergrößern klicken)
Competitor Research
Competitor Research
Um Verbesserungen zu erkennen, haben wir unser Design anhand etablierter Usabilitätsrichtlinien bewertet und mit dem Design von 11 Konkurrenzprodukten verglichen.
Um Verbesserungen zu erkennen, haben wir unser Design anhand etablierter Usabilitätsrichtlinien bewertet und mit dem Design von 11 Konkurrenzprodukten verglichen.
Einseitiger vs. mehrstufiger Checkout (zum Vergrößern klicken)
Einseitiger vs. mehrstufiger Checkout
Findings
Findings
Die zwei häufigsten Checkout-Versionen sind:
- eine Ein-Seiten-Version mit Akkordeons (die wir derzeit haben)
- und die 2. Version mit einer separaten Seite für jeden Schritt.8 von 12 Seiten platzieren die Labels in den Eingabefeldern, um Platz zu sparen.
Auf dem Desktop sind die Eingabefelder paarweise nebeneinander angeordnet.
Alle Wettbewerber zeigen den Nutzern alle ausgefüllten Informationen in einem geschlossenen Dropdown an, das leicht bearbeitbar ist.
4 von 12 Wettbewerbern verwenden „Weiter zu [nächster Schritt]“ als CTA.
4 von 12 Wettbewerbern bieten ein „Adresse überprüfen/Bearbeiten“-Popup an.
11 von 12 Wettbewerbern haben das Ablaufdatum (MM/JJ) in einem einzigen Eingabefeld. Nur ein Wettbewerber nutzt das Format, das wir momentan haben, mit separaten Dropdowns für Monat und Jahr.
7 von 12 Wettbewerbern nennen es „Sicherheitscode“. Die anderen teilen sich auf in „CVN“, „CVV“ und „CVC/CVV“.
Kein Wettbewerber (0 von 12) verlangt, dass Nutzer den Kartentyp wählen. Nach Eingabe der ersten Ziffern der Kreditkartennummer erkennt das System automatisch, ob es sich um Visa, Maestro oder eine andere Karte handelt.
7 von 12 Wettbewerbern bieten eine Geschenkoption/Nachricht an, wobei 4 davon es für einzelne Produkte anbieten.
Zwei gängige Checkout-Typen: einseitig mit Akkordeons (aktuell) und mehrstufig mit separaten Seiten.
8 von 12 Seiten platzieren Labels in Eingabefeldern, um Platz zu sparen.
Eingabefelder sind nebeneinander auf dem Desktop angeordnet.
Alle Wettbewerber erlauben eine leichte Bearbeitung der Informationen über ein geschlossenes Dropdown.
4 von 12 nutzen „Weiter zu [nächster Schritt]“ als CTA.
4 von 12 bieten ein „Adresse überprüfen/Bearbeiten“ Popup an.
11 von 12 nutzen ein einziges Eingabefeld für das Ablaufdatum (MM/JJ); nur 1 nutzt separate Dropdowns.
7 von 12 nennen es „Sicherheitscode“, andere teilen sich in „CVN“, „CVV“ oder „CVC/CVV“ auf.
Keine erfordern die Auswahl des Kartentyps; Systeme erkennen dies anhand der ersten Ziffern automatisch.
7 von 12 bieten eine Geschenkoption/Nachricht an, bei 4 pro Produkt.
Zwei gängige Checkout-Typen: einseitig mit Akkordeons (aktuell) und mehrstufig mit separaten Seiten.
8 von 12 Seiten platzieren Labels in Eingabefeldern, um Platz zu sparen.
Eingabefelder sind nebeneinander auf dem Desktop angeordnet.
Alle Wettbewerber erlauben eine leichte Bearbeitung der Informationen über ein geschlossenes Dropdown.
4 von 12 nutzen „Weiter zu [nächster Schritt]“ als CTA.
4 von 12 bieten ein „Adresse überprüfen/Bearbeiten“ Popup an.
11 von 12 nutzen ein einziges Eingabefeld für das Ablaufdatum (MM/JJ); nur 1 nutzt separate Dropdowns.
7 von 12 nennen es „Sicherheitscode“, andere teilen sich in „CVN“, „CVV“ oder „CVC/CVV“ auf.
Keine erfordern die Auswahl des Kartentyps; Systeme erkennen dies anhand der ersten Ziffern automatisch.
7 von 12 bieten eine Geschenkoption/Nachricht an, bei 4 pro Produkt.
Findings
Findings
Zwei gängige Checkout-Typen: Einseiter mit Akkordeons (aktueller Checkout des Kunden) und ein mehrstufiger Ansatz mit separaten Seiten für jeden Schritt
8 von 12 nutzen einen mehrstufigen Checkout
8 von 12 Seiten platzieren Labels innerhalb der Eingabefelder für Platzersparnis
Eingabefelder sind in der Desktop-Ansicht nebeneinander angeordnet
Alle Wettbewerber erlauben es, Informationen leicht über ein geschlossenes Dropdown zu bearbeiten
4 von 12 nutzen „Weiter zu [nächster Schritt]“ als Call-to-Action
4 von 12 bieten ein „Adresse überprüfen/Bearbeiten“-Popup
11 von 12 nutzen ein einziges Eingabefeld für das Ablaufdatum (MM/JJ); nur 1 nutzt separate Dropdowns
7 von 12 bezeichnen es als „Sicherheitscode,“ andere verwenden „CVN,“ „CVV,“ oder „CVC/CVV“
Kein Anbieter erfordert die Auswahl des Kartentyps; Systeme ermitteln diesen automatisch anhand der ersten Ziffern
7 von 12 bieten eine Geschenknachricht/-verpackungsoption, wobei 4 dies pro Produkt anbieten
Zwei gängige Checkout-Typen: Einseiter mit Akkordeons (aktueller Checkout des Kunden) und ein mehrstufiger Ansatz mit separaten Seiten für jeden Schritt
8 von 12 verwenden einen mehrstufigen Checkout
8 von 12 Seiten platzieren Beschriftungen innerhalb der Eingabefelder, um Platz zu sparen
Eingabefelder sind in der Desktop-Ansicht nebeneinander angeordnet
Alle Wettbewerber ermöglichen es Benutzern, Informationen einfach über ein geschlossenes Dropdown zu bearbeiten
4 von 12 verwenden „Weiter zu [nächster Schritt]“ als Handlungsaufforderung
4 von 12 bieten ein „Adresse überprüfen/Bearbeiten“-Popup an
11 von 12 verwenden ein einzelnes Eingabefeld für das Ablaufdatum (MM/JJ); nur 1 verwendet separate Dropdowns
7 von 12 nennen es „Sicherheitscode“, andere verwenden „CVN“, „CVV“ oder „CVC/CVV“
Keiner verlangt die Auswahl des Kartentyps; Systeme erkennen automatisch anhand der ersten Ziffern
7 von 12 bieten eine Geschenknachricht/Verpackungsoption an, 4 bieten es pro Produkt an
Kundenstimme
Kundenstimme
Direktes Kundenfeedback ist wichtig, um meine Designs zu formen. Ihre Gedanken und Einsichten helfen mir, die Nutzererfahrung an ihre Bedürfnisse und Vorlieben anzupassen.
Direktes Kundenfeedback ist wichtig, um meine Designs zu formen. Ihre Gedanken und Einsichten helfen mir, die Nutzererfahrung an ihre Bedürfnisse und Vorlieben anzupassen.
"Ich versuche, meinen Checkout zu bearbeiten! Ich komme einfach nicht weiter!"
"Ich versuche, meinen Checkout zu bearbeiten! Ich komme einfach nicht weiter!"
„Nicht benutzerfreundlich. Sehr verwirrender Checkout-Prozess.“
„Nicht benutzerfreundlich. Sehr verwirrender Checkout-Prozess.“
„Bestellung storniert, da der Checkout-Prozess schrecklich ist!“
„Bestellung storniert, da der Checkout-Prozess schrecklich ist!“
„Ich würde bei Ihnen bestellen, aber es ist SEHR schwierig, die Bestellung abzuschließen. Es ist frustrierend, weil ich den Bestellvorgang nicht beenden konnte.“
„Ich würde bei Ihnen bestellen, aber es ist SEHR schwierig, die Bestellung abzuschließen. Es ist frustrierend, weil ich den Bestellvorgang nicht beenden konnte.“
„Sonderangebot ausschließt Rabatt auf Nachrichten im Sale. Sehr irreführend, schadet dem Vertrauen. Kasse umständlich.“
„Sonderangebot ausschließt Rabatt auf Nachrichten im Sale. Sehr irreführend, schadet dem Vertrauen. Kasse umständlich.“
„Ich habe gerne bei Sur La Table Weihnachtsgeschenke gekauft, aber der Checkout-Prozess ist etwas umständlich.“
„Ich habe gerne bei Sur La Table Weihnachtsgeschenke gekauft, aber der Checkout-Prozess ist etwas umständlich.“
Kundenmeinungen zum Bezahlvorgang.
Ideen und Design
Lo-Fi-Wireframes des Versandschritts
Drahtmodelle
Drahtmodelle
Meine Recherche ergab, dass ein schrittweises Vorgehen effektiver ist als eine Einseiter. Durch das schnelle Erstellen von groben Wireframes konnte ich wesentliche Designentscheidungen schnell bewerten und die Abstimmung mit meinem Produktmanager und Teamkollegen hinsichtlich der Nutzeranforderungen sicherstellen.
Meine Recherche ergab, dass ein schrittweises Vorgehen effektiver ist als eine Einseiter. Durch das schnelle Erstellen von groben Wireframes konnte ich wesentliche Designentscheidungen schnell bewerten und die Abstimmung mit meinem Produktmanager und Teamkollegen hinsichtlich der Nutzeranforderungen sicherstellen.
Design-Entwürfe
Design-Entwürfe
In dieser Phase habe ich etwa 50 Szenarien entworfen. Ich deckte alle Anwendungsfälle ab, von „Happy Paths“ bis „Fehlerbilder“, dachte an Tooltips, Links, Formulare, Seiten- und Untergruppen, Tabs und Bilder, um die Benutzerfreundlichkeit zu verbessern. Ich arbeitete mit meinem Produktmanager und Co-Designer zusammen, um unnötige Widgets zu entfernen und die Benutzererfahrung zu optimieren.
In dieser Phase habe ich etwa 50 Szenarien entworfen. Ich deckte alle Anwendungsfälle ab, von „Happy Paths“ bis „Fehlerbilder“, dachte an Tooltips, Links, Formulare, Seiten- und Untergruppen, Tabs und Bilder, um die Benutzerfreundlichkeit zu verbessern. Ich arbeitete mit meinem Produktmanager und Co-Designer zusammen, um unnötige Widgets zu entfernen und die Benutzererfahrung zu optimieren.
Design System
Während der Neugestaltung unseres Checkout-Prozesses sorgte mein Produktmanager dafür, dass ich Zeit hatte, ein Designsystem basierend auf dem Checkout-Projekt zu entwickeln.
Ich baute Komponenten für jedes Widget, einschließlich Farben, Schriftarten, ein Rastersystem für unsere vier Breakpoints, Schaltflächen, Links, Schalter und mehr. Unser Ziel war es, die Wiederverwendbarkeit für zukünftige Projekte sicherzustellen, einfache Aktualisierungen zu ermöglichen und Konsistenz über alle Breakpoints hinweg zu gewährleisten. Dadurch schufen wir eine Basis, die zukünftige Projekte effizienter macht und als Referenz für Designänderungen dient.
Während wir unseren Checkout-Prozess neu gestalteten, sorgte mein Product Manager dafür, dass ich Zeit hatte, ein Designsystem auf Basis des Checkout-Projekts zu entwickeln.
Ich entwickelte Komponenten für jedes Widget, einschließlich Farben, Schriftarten, ein Rastersystem für unsere vier Breakpoints, Schaltflächen, Links, Umschalter und mehr. Unser Ziel war es, die Wiederverwendbarkeit für zukünftige Projekte sicherzustellen, einfache Updates zu ermöglichen und Konsistenz über alle Breakpoints hinweg zu gewährleisten. So schufen wir eine Basis, die zukünftige Projekte effizienter machen und als Referenz für Designänderungen dienen wird.
Schriftart
Basierend auf dem Feedback der Hauptnutzer unseres Kunden - in diesem Fall ältere Frauen - haben mein Team und ich erfahren, dass die aktuelle Schriftart "Lato" schwer lesbar ist. Daher haben wir für das Redesign des Checkouts die Schriftart "Brandon Grotesque" gewählt, um die Lesbarkeit zu verbessern.
Die abgerundeten Ecken der Schrift verleihen ihr ein organisches Gefühl, das zur Marke passt
Die hohe x-Höhe sorgt für bessere Lesbarkeit
Basierend auf Rückmeldungen von den Hauptnutzern unseres Kunden – in diesem Fall älteren Frauen – haben mein Team und ich festgestellt, dass die aktuelle Schriftart, „Lato“, schwer lesbar ist. Deshalb wählten wir für das Redesign des Checkouts die Schriftart „Brandon Grotesque“, um die Lesbarkeit zu verbessern.
Die abgerundeten Ecken der Schriftart verleihen ihr ein organisches Gefühl, das zur Marke passt
Die hohe x-Höhe sorgt für bessere Lesbarkeit
Brandon Grotesque
Normal
Normal
Fett
Fett
Farbe
Um die visuelle Attraktivität und Funktionalität der Website zu verbessern, erweiterten mein Team und ich die Farbpalette über die derzeit hauptsächlich für den Verkauf verwendeten Farben (Schwarz, Weiß und Rot) hinaus.
Einführung von zwei neuen Farben in das Designsyst em:
Ein sanftes Beige-Grau und ein lebhaftes Erfolgsgrün
Während das Beige-Grau einen subtilen Touch bietet, hebt das Erfolgsgrün positive Botschaften im gesamten Benutzererlebnis hervor und verstärkt sie.
Um die visuelle Attraktivität und Funktionalität der Website zu verbessern, erweiterten mein Team und ich die Farbpalette über die bisher hauptsächlich für den Verkauf genutzten Farben (Schwarz, Weiß und Rot) hinaus.
Einführung von zwei neuen Farben ins Designsystem:
Ein sanftes Beige-Grau und ein lebhaftes Erfolgsgrün
Während das Beige-Grau einen subtilen Akzent setzt, hebt das Erfolgsgrün positive Botschaften im Benutzererlebnis hervor und verstärkt sie
Breakpoints ohne Raster
Raster mit Breakpoints
Fahren Sie über das Bild, um es ohne Raster zu sehen.
Raster & Umbrüche
Raster & Umbrüche
Mein Team und ich haben vier Rasterlayouts für unsere wichtigsten Breakpoints erstellt. Da fast 70 % der Nutzer die Seite auf Mobilgeräten (375px) aufrufen, haben wir uns entschieden, mit 375px statt den üblichen 320px zu beginnen. Bei der Gestaltung unterschiedlicher Nutzererlebnisse für jeden Breakpoint sorgten wir für nahtlose Anpassung, wodurch die Zugänglichkeit verbessert und die Benutzerbindung gesteigert wurde.
Mein Team und ich haben vier Rasterlayouts für unsere wichtigsten Breakpoints erstellt. Da fast 70 % der Nutzer die Seite auf Mobilgeräten (375px) aufrufen, haben wir uns entschieden, mit 375px statt den üblichen 320px zu beginnen. Bei der Gestaltung unterschiedlicher Nutzererlebnisse für jeden Breakpoint sorgten wir für nahtlose Anpassung, wodurch die Zugänglichkeit verbessert und die Benutzerbindung gesteigert wurde.
Breakpoints ohne Raster
Raster mit Breakpoints
Einfache Navigation
Entdecken Sie das neue Checkout-Erlebnis. Laut unserer Forschung haben mein Team und ich das Layout von einer Seite auf einen vierseitigen Prozess umgestellt. Dieses Design ermöglicht es den Nutzern, sich auf eine Aufgabe zu konzentrieren, was die Navigation vereinfacht und effizienter macht.
Entdecken Sie das neue Checkout-Erlebnis. Laut unserer Forschung haben mein Team und ich das Layout von einer Seite auf einen vierseitigen Prozess umgestellt. Dieses Design ermöglicht es den Nutzern, sich auf eine Aufgabe zu konzentrieren, was die Navigation vereinfacht und effizienter macht.
Entdecken Sie das neue Checkout-Erlebnis. Laut unserer Forschung haben mein Team und ich das Layout von einer Seite auf einen vierseitigen Prozess umgestellt. Dieses Design ermöglicht es den Nutzern, sich auf eine Aufgabe zu konzentrieren, was die Navigation vereinfacht und effizienter macht.
Entdecken Sie das neue Checkout-Erlebnis. Laut unserer Forschung haben mein Team und ich das Layout von einer Seite auf einen vierseitigen Prozess umgestellt. Dieses Design ermöglicht es den Nutzern, sich auf eine Aufgabe zu konzentrieren, was die Navigation vereinfacht und effizienter macht.
Vorher und Nachher
Vorher und Nachher
Vorher und Nachher
1
Altes Login-Feld
Neue Anmeldeseite
Anmelden
Die Anmeldeseite ist in zwei Bereiche unterteilt: 'Stammkunde' und 'Gastkasse'. Für einen schnelleren Checkout sind Optionen wie Apple Pay und PayPal unter 'Gastkasse' zusammengefasst. Um diese Optionen hervorzuheben, sind die Karten vor einem warmen grauen Hintergrund hervorgehoben.
2
Alte Versandübersicht
Neue Versandseite
Versand
Die Eingabefelder wurden in separate Karten für 'Lieferadresse' und 'Kontaktinformationen' zusammengefasst. Diese Methode machte den Prozess intuitiver und platzsparender. Außerdem passen sich die Karten dynamisch je nach im Warenkorb befindlichen Produkten und ob der Nutzer ein Wiederkehrer ist oder nicht, an.
3
Altes Rechnungs-Akkordeon
Neue Abrechnungsseite
Rechnung
Die Versandadresse wird automatisch in den Rechnungsschritt übernommen, sodass Nutzer sie schnell überprüfen und bei Bedarf bearbeiten können. Die Kreditkartenoption ist standardmäßig ausgewählt, wodurch Nutzer nahtlos zum nächsten Schritt geführt werden und das Gesamterlebnis vereinfacht wird.
4
Alte Bewertungen
Neue Bewertungsseite
Bewertung
Nutzer erhalten die Möglichkeit, alle Informationen auf Richtigkeit zu prüfen, bevor sie ihren Kauf abschließen. Dies sorgt für ein reibungsloses Checkout-Erlebnis und stärkt das Vertrauen. Bei Bedarf können Nutzer einfach auf 'Bearbeiten' neben dem entsprechenden Abschnitt klicken oder die obere Fortschrittsleiste verwenden, um zu einem vorherigen Schritt zurückzukehren.
Anmeldung
Anmeldung
Versand
Versand
Rechnungsschritt
Rechnungsschritt
Schritt prüfen
Schritt prüfen
Vorher und Nachher
Vorher und Nachher
Anmelden
Altes Login-Feld
Neue Anmeldeseite
Die Anmeldeseite ist in zwei Bereiche unterteilt: 'Stammkunde' und 'Gastkasse'. Für einen schnelleren Checkout sind Optionen wie Apple Pay und PayPal unter 'Gastkasse' zusammengefasst. Um diese Optionen hervorzuheben, sind die Karten vor einem warmen grauen Hintergrund hervorgehoben.
Versand
Alte Versandübersicht
Neue Versandseite
Die Eingabefelder wurden in separate Karten für 'Lieferadresse' und 'Kontaktinformationen' zusammengefasst. Diese Methode machte den Prozess intuitiver und platzsparender. Außerdem passen sich die Karten dynamisch je nach im Warenkorb befindlichen Produkten und ob der Nutzer ein Wiederkehrer ist oder nicht, an.
Rechnung
Altes Rechnungs-Akkordeon
Neue Abrechnungsseite
Die Versandadresse wird automatisch in den Rechnungsschritt übernommen, sodass Nutzer sie schnell überprüfen und bei Bedarf bearbeiten können. Die Kreditkartenoption ist standardmäßig ausgewählt, wodurch Nutzer nahtlos zum nächsten Schritt geführt werden und das Gesamterlebnis vereinfacht wird.
Bewertung
Alte Bewertungen
Neue Bewertungsseite
Nutzer erhalten die Möglichkeit, alle Informationen auf Richtigkeit zu prüfen, bevor sie ihren Kauf abschließen. Dies sorgt für ein reibungsloses Checkout-Erlebnis und stärkt das Vertrauen. Bei Bedarf können Nutzer einfach auf 'Bearbeiten' neben dem entsprechenden Abschnitt klicken oder die obere Fortschrittsleiste verwenden, um zu einem vorherigen Schritt zurückzukehren.
1
Altes Login-Feld
Neue Anmeldeseite
Anmelden
Die Anmeldeseite ist in zwei Bereiche unterteilt: 'Stammkunde' und 'Gastkasse'. Für einen schnelleren Checkout sind Optionen wie Apple Pay und PayPal unter 'Gastkasse' zusammengefasst. Um diese Optionen hervorzuheben, sind die Karten vor einem warmen grauen Hintergrund hervorgehoben.
2
Alte Versandübersicht
Neue Versandseite
Versand
Die Eingabefelder wurden in separate Karten für 'Lieferadresse' und 'Kontaktinformationen' zusammengefasst. Diese Methode machte den Prozess intuitiver und platzsparender. Außerdem passen sich die Karten dynamisch je nach im Warenkorb befindlichen Produkten und ob der Nutzer ein Wiederkehrer ist oder nicht, an.
3
Altes Rechnungs-Akkordeon
Neue Abrechnungsseite
Rechnung
Die Versandadresse wird automatisch in den Rechnungsschritt übernommen, sodass Nutzer sie schnell überprüfen und bei Bedarf bearbeiten können. Die Kreditkartenoption ist standardmäßig ausgewählt, wodurch Nutzer nahtlos zum nächsten Schritt geführt werden und das Gesamterlebnis vereinfacht wird.
4
Alte Bewertungen
Neue Bewertungsseite
Bewertung
Nutzer erhalten die Möglichkeit, alle Informationen auf Richtigkeit zu prüfen, bevor sie ihren Kauf abschließen. Dies sorgt für ein reibungsloses Checkout-Erlebnis und stärkt das Vertrauen. Bei Bedarf können Nutzer einfach auf 'Bearbeiten' neben dem entsprechenden Abschnitt klicken oder die obere Fortschrittsleiste verwenden, um zu einem vorherigen Schritt zurückzukehren.
1
Altes Login-Feld
Neue Anmeldeseite
Anmelden
Die Anmeldeseite ist in zwei Bereiche unterteilt: 'Stammkunde' und 'Gastkasse'. Für einen schnelleren Checkout sind Optionen wie Apple Pay und PayPal unter 'Gastkasse' zusammengefasst. Um diese Optionen hervorzuheben, sind die Karten vor einem warmen grauen Hintergrund hervorgehoben.
2
Alte Versandübersicht
Neue Versandseite
Versand
Die Eingabefelder wurden in separate Karten für 'Lieferadresse' und 'Kontaktinformationen' zusammengefasst. Diese Methode machte den Prozess intuitiver und platzsparender. Außerdem passen sich die Karten dynamisch je nach im Warenkorb befindlichen Produkten und ob der Nutzer ein Wiederkehrer ist oder nicht, an.
3
Altes Rechnungs-Akkordeon
Neue Abrechnungsseite
Rechnung
Die Versandadresse wird automatisch in den Rechnungsschritt übernommen, sodass Nutzer sie schnell überprüfen und bei Bedarf bearbeiten können. Die Kreditkartenoption ist standardmäßig ausgewählt, wodurch Nutzer nahtlos zum nächsten Schritt geführt werden und das Gesamterlebnis vereinfacht wird.
4
Alte Bewertungen
Neue Bewertungsseite
Bewertung
Nutzer erhalten die Möglichkeit, alle Informationen auf Richtigkeit zu prüfen, bevor sie ihren Kauf abschließen. Dies sorgt für ein reibungsloses Checkout-Erlebnis und stärkt das Vertrauen. Bei Bedarf können Nutzer einfach auf 'Bearbeiten' neben dem entsprechenden Abschnitt klicken oder die obere Fortschrittsleiste verwenden, um zu einem vorherigen Schritt zurückzukehren.
Final Result
Messbarer Erfolg
Messbarer Erfolg
Erheblicher 6% Anstieg bei Konversionen mit neuem Warenkorb
Design für 4 Breakpoints
36 verschiedene Komponenten für neues Designsystem erstellen
900+ Frames in Figma - mehrere Geräteansichten
48 verschiedene Szenarien
Signifikante 6% mehr Konversion mit neuem Warenkorberlebnis
Design für 4 Breakpoints
Bau 36 verschiedene Komponenten für neues Designsysteem
900+ Frames in Figma - mehrere Bildschirme für verschiedene Geräte
48 verschiedene Szenarien
Mitnehmen
Dieses Projekt betonte den Wert von nutzerzentriertem Design, Tests und Konkurrenzforschung. Ich habe von mehreren Mitbewerbern gelernt, Widgets effizienter zu nutzen, um das Neuerlernen für Benutzer zu minimieren. Außerdem habe ich zum ersten Mal ein Designsystem erstellt, das ich gerne weiter verfeinern möchte, um Konsistenz in der Marke zu gewährleisten und schneller zu gestalten. Schließlich ist das Verständnis der Benutzer und ihrer Schwachstellen entscheidend, um Designdenken zu formen und unsere digitale Präsenz zu optimieren.
Mitnehmen
Dieses Projekt betonte den Wert von nutzerzentriertem Design, Tests und Konkurrenzforschung. Ich habe von mehreren Mitbewerbern gelernt, Widgets effizienter zu nutzen, um das Neuerlernen für Benutzer zu minimieren. Außerdem habe ich zum ersten Mal ein Designsystem erstellt, das ich gerne weiter verfeinern möchte, um Konsistenz in der Marke zu gewährleisten und schneller zu gestalten. Schließlich ist das Verständnis der Benutzer und ihrer Schwachstellen entscheidend, um Designdenken zu formen und unsere digitale Präsenz zu optimieren.
Mobil-Guide (Zum Abspielen klicken)
Mobile Anleitung
(Klicken zum Abspielen)
Desktop-Demo (Klicken zum Abspielen)
Mitnehmen
Dieses Projekt unterstrich den Wert von nutzerzentrierter Gestaltung, Testing und Wettbewerbsforschung. Durch die Analyse mehrerer Wettbewerber lernte ich, Widgets effizienter zu nutzen, um Nutzerumlernen zu minimieren. Zudem erstellte ich erstmals ein Designsystem, das ich weiter verfeinern möchte, um die Markenübereinstimmung zu verbessern und schneller zu gestalten. Zuletzt ist das Verstehen der Nutzer und ihrer Schwachpunkte entscheidend für die Gestaltung von Designdenken und die Optimierung der digitalen Präsenz eines Kunden.
Dieses Projekt unterstrich den Wert von nutzerzentrierter Gestaltung, Testing und Wettbewerbsforschung. Durch die Analyse mehrerer Wettbewerber lernte ich, Widgets effizienter zu nutzen, um Nutzerumlernen zu minimieren. Zudem erstellte ich erstmals ein Designsystem, das ich weiter verfeinern möchte, um die Markenübereinstimmung zu verbessern und schneller zu gestalten. Zuletzt ist das Verstehen der Nutzer und ihrer Schwachpunkte entscheidend für die Gestaltung von Designdenken und die Optimierung der digitalen Präsenz eines Kunden.
See More Case Studies
See More Case Studies
See More Case Studies
See More Case Studies
See More Case Studies
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved
Thanks For Watching
© Tiziana Bucher 2025. All Rights Reserved