Redesign der 404-Seite

Sur La Table

Die Fehlerseite des Kunden muss neu gestaltet werden. Ich konnte diese Seite sofort angehen, nachdem ich die Produktdetailseite an das Entwicklungsteam übergeben hatte.

Projektübersicht

Das Ziel war, die 404-Seite zu beleben und ihr oft übersehenes Potenzial zu verbessern, indem Unordnung und Abstandsprobleme angegangen wurden, um sie ästhetisch an das neue Design der Marke anzupassen. Ziel war es, die Nutzer nahtlos zurück zu ihrem Einkaufserlebnis zu führen, indem Elemente aus dem neuen Designsystem und anderen Projekten wie PDP oder Checkout integriert wurden.

Das Ziel war, die 404-Seite zu beleben und ihr oft übersehenes Potenzial zu verbessern, indem Unordnung und Abstandsprobleme angegangen wurden, um sie ästhetisch an das neue Design der Marke anzupassen. Ziel war es, die Nutzer nahtlos zurück zu ihrem Einkaufserlebnis zu führen, indem Elemente aus dem neuen Designsystem und anderen Projekten wie PDP oder Checkout integriert wurden.

Designprozess

Recherche phase

Recherche

Analyse

Konkurenz Recherche

Aktuelle Seite bewerten:

Aktuelle Seite bewerten: Führen Sie eine gründliche Analyse der vorhandenen 404-Seite des Kunden durch und identifizieren Sie Schwachstellen, Usabilitätsprobleme und Verbesserungsmöglichkeiten.

Wettbewerbsanalyse:

Untersuchen Sie Wettbewerberlösungen für 404-Seiten. Bewerten Sie Stärken, Schwächen und innovative Ansätze für die Nutzererfahrung.

Design phase

Design Patterns

Designsystem

Rastersystem

Bilderarchiv

Konzept

Ideen und Konzepte basierend auf meinen Forschungsergebnissen entwickeln. Benutzererlebnis und Design für die neue 404-Seite definieren.

Bildauswahl

Durchsuchen Sie das Bildarchiv des Kunden nach Bildern, die dem gewünschten Ton und der Botschaft der 404-Seite entsprechen. Wählen Sie dann Bilder aus, die Emotionen hervorrufen und das Gesamtdesign ergänzen.

Durchsuchen Sie das Bildarchiv des Kunden nach Bildern, die dem gewünschten Ton und der Botschaft der 404-Seite entsprechen. Wählen Sie dann Bilder aus, die Emotionen hervorrufen und das Gesamtdesign ergänzen.

Wireframing und Prototyping

Erstellen Sie Wireframes und einfache Prototypen, um das Layout und die Struktur der neuen 404-Seite zu visualisieren, und verwenden Sie das Feedback meines Produktmanagers, um die Designs zu überarbeiten.

Erstellen Sie Wireframes und einfache Prototypen, um das Layout und die Struktur der neuen 404-Seite zu visualisieren, und verwenden Sie das Feedback meines Produktmanagers, um die Designs zu überarbeiten.

Entwicklungsphase

Zusammenarbeit

Reaktionsschnell

Anmerkung

Design-Fragen

Umsetzung

Mit Entwicklern zusammenarbeiten, um das endgültige Design in Code umzusetzen. Sicherstellen, dass das Design reaktionsfähig, zugänglich und für verschiedene Geräte und Browser optimiert ist.

Forschungsphase

Mobil

Desktop

Schmerzpunkte

Überladene Seite, kein Fokuspunkt
Der Titel ist schwer zu lesen, sehr lang, in Großbuchstaben und über die gesamte Seitenbreite verteilt
In der Desktop-Ansicht ist die Empfehlung unterhalb der Umschlaglinie
Hierarchieprobleme
Verwirrende Navigation auf einer Seite der Seite
Bild passt nicht zur Seite

Unübersichtliche Seite, kein Fokuspunkt
Der Titel ist schwer zu lesen, sehr lang, in Großbuchstaben und erstreckt sich über die gesamte Breite der Seite
In der Desktop-Ansicht ist die Empfehlung unterhalb der Falzlinie
Hierarchieprobleme
Verwirrende Navigation auf einer Seite der Seite
Bild passt nicht zur Seite

Konkurrenten

Ich habe die 404-Seiten von Wettbewerbern analysiert und mich auf das visuelle Design, den Inhalt, die Farb-/Bildnutzung und die Layout-Hierarchie konzentriert.

Ergebnisse

Ansprechende Bilder oder Illustrationen, die zum Markenstil passen
Suchleiste, um Nutzern beim Finden zu helfen
Die meisten Titel sind kurz
Links/CTAs, um Nutzer zur Startseite oder Kategorien zu führen
Viel Leerraum auf den Seiten

Ansprechende Bilder oder Illustrationen im Stil der Marke
Suchleiste, um Benutzern bei der Suche zu helfen
Meistens kurze Titel
Links/CTA, um Benutzer zur Startseite oder Produktkategorien zu führen
Viel Leerraum auf den Seiten

Konzept

Ich habe Ideen und Konzepte basierend auf meinen Forschungsergebnissen entwickelt, dann das Layout aktualisiert, neue Bilder ausprobiert und eine klare, freundliche, manchmal humorvolle Nachricht integriert, die besagt, dass die Seite nicht gefunden werden konnte.

Ich habe Ideen und Konzepte basierend auf meinen Forschungsergebnissen entwickelt, dann das Layout aktualisiert, neue Bilder ausprobiert und eine klare, freundliche, manchmal humorvolle Nachricht integriert, die besagt, dass die Seite nicht gefunden werden konnte.

Reaktionsschnell

Indem wir sicherstellten, dass die Website des Kunden responsiv war, konnten wir das Benutzererlebnis verbessern. Wir hatten fünf Breakpoints und Designs, die nahtlos an alle Gerätegrößen angepasst werden mussten, um die Zugänglichkeit zu erhöhen und das Engagement für größeren Erfolg zu steigern.

Indem wir sicherstellten, dass die Website des Kunden responsiv war, konnten wir das Benutzererlebnis verbessern. Wir hatten fünf Breakpoints und Designs, die nahtlos an alle Gerätegrößen angepasst werden mussten, um die Zugänglichkeit zu erhöhen und das Engagement für größeren Erfolg zu steigern.

Alt und Neu (klicken zum Vergrößern)

Alt zu Neu

Ich habe das Design aktualisiert, um vorherige Probleme mit Abständen, veralteten Elementen und Unordnung zu beheben. Das neue Layout schafft eine klare Hierarchie und enthält vertraute Widgets wie das Empfehlungs-Widget und hervorgehobene Kategorien, um das Einkaufserlebnis zu verbessern. Die Suchleiste ist jetzt direkt unter der Hauptnachricht prominent platziert. Zudem vermittelt das Bild nun genau, was diese Seite aussagt: „Etwas ist schiefgelaufen...“.

Ich habe das Design aktualisiert, um vorherige Probleme mit Abständen, veralteten Elementen und Unordnung zu beheben. Das neue Layout schafft eine klare Hierarchie und enthält vertraute Widgets wie das Empfehlungs-Widget und hervorgehobene Kategorien, um das Einkaufserlebnis zu verbessern. Die Suchleiste ist jetzt direkt unter der Hauptnachricht prominent platziert. Zudem vermittelt das Bild nun genau, was diese Seite aussagt: „Etwas ist schiefgelaufen...“.

Endergebnis

Mobil-Durchgang (klicken zum Abspielen)

Desktop-Rundgang (Klick zum Starten)

Redesign der 404-Seite