Umfangreiches Redesign elementarer (Ein-)Kaufprozesse
Ein langjähriger Kunde trat an uns mit der Vorstellung heran, zur visuellen Optimierung des Einkaufserlebnisses im Onlineshops, die Darstellung der Produktboxen auf der Produktseite, im Warenkorb und auch im Checkoutprozess zu optimieren.
Konkret sollten nicht relevante Informationen entfernt und die Reihenfolge der Darstellung der Informationen neu gestaltet und geordnet werden. Gemäß nach dem Motto: „Weniger ist mehr“.
Die Umsetzung umfasste folgende Aspekte:
- Redesign der Buy Box auf der Produktseite
- Redesign der Darstellung der Produkte im seitlichen Warenkorb und der eigentlichen Warenkorbseite.
- Redesign der gesamten Darstellung des gesamten Bestellvorgangs.
Produktseite (Vorher/Nachher)
Link zur Produktseite: Hier
Vorher:
Nachher:
Erklärungen:
- Blau umrahmte Buybox inkl. einem blau hinterlegten Hinweis für Rabatte
- Trennstriche zur klaren Separierung zwischen Produktkonfiguration (Varianten) und Zusatzinformationen
- Entfernen unnötiger Zusatzinformationen aus der Buybox
- Änderung der Farbe des Preises zur besseren Differenzierung vom restlichen Text
- Angenehmere Abtrennung zwischen Produktgallerie, Produktbild und Buybox durch farbliche und grafische Unterschiede und Formen
Warenkorb und Ajax-Warenkorb (nur Neu)
Erklärungen Warenkorb:
- Blauer Rahmen um die Buybox zur visuellen Abtrennung
- Trennstrichs zur klaren Separierung zwischen Produktkonfiguration und Zusatzinformationen
- Entfernen unnötiger Zusatzinformationen aus der Buybox
- Anzeige von wichtigen Produkteigenschaften mit optischer Hervorhebung
Erklärungen seitlicher Warenkorb:
- Blaue Rahmen um jede Produktposition zur klaren optischen Trennung der einzelnen Positionen
- Neuanordnung der Finanzdaten mit Priorisierung auf dem Gesamtbestellwert
- Entfernen nicht relevanter Informationen (hier bspw. Produktnummer)
Neuer Bestellvorgang für Devita Online
Die umfangreichsten Optimierungen wurden im Bestellvorgang vorgenommen. Devita nutzt seit Jahren erfolgreich unseren Proxation Checkout, der sich sehr stark an das Checkout Design von shopify anlehnt.
Im ersten Schritt – der Kundenregistrierung – wurde das Formular umgebaut und parallel rechts die Produktdarstellung optimiert. Aus technischer Sicht ist die Umsortierung der Registrierungsfelder eine durchaus beachtliche Herausforderung, da Shopware hier nach einer bestimmten Validierungslogik arbeitet, die es nicht erlaubt, Felder einfach zu verschieben.
Vorher/Nachher
Erklärungen:
- Umstrukturierung der Eingabefelder
- Klickbare Kacheln für Privat oder Gewerblich (farblich unterschiedlich zur besseren Übersicht)
- Bei Devita ist das Geburtsdatum nur für Kauf auf Rechnung relevant, daher wurde diese Abfrage direkt in die Zahlungsart im Zahlungsschritt integriert
- Darstellung der Lieferzeit in der Produktkachel
- Umstrukturierung der Produktanzeige rechts oben
- Reduzierung der Finanzzahlen und Hervorhebung der relevanten Kennzahlen
Im zweiten Schritt, der Versandartenauswahl, wurde die Darstellung der Zahlungsartenübersicht optimiert und die aktive Zahlungsart visuell hervorgehoben (mit Kachel und leichtem Schatten hinter der Kachel). Zusätzlich wurde die ausgewählte Zahlungsart fixiert, sodass diese nicht an erste Stelle springt (Shopware 6 Standard). Hintergrund dieser Anpassung ist, dass wenn ein Kunde bspw. die Zahlungsart an 4ter Position auswählt, diese sogleich auf die erste Position springt und dem Kunden u.U. nicht direkt klar ist, ob seine Auswahl übernommen wurde. Gleiches haben wir im dritten Schritt auch für die Versandart entwickelt.
Im dritten Schritt – Auswahl Zahlungsart – ist neben den gleichen Anpassungen wie im zweiten Schritt bemerkenswert, dass bei der Auswahl der Zahlungsart „Kauf auf Rechnung“ innerhalb der Zahlungsart eine Geburtsdatums-Abfrage hineinprogrammiert wurde. Dadurch wird elegant umgangen, wie in shopware 6 üblich, dass die Altersabfrage auf der Registrierungsseite erscheint und Kunden unnötig Zeit beim Checkout kostet. Manche Kunden schrecken Altersabfragen auch ab.
Abschließend möchten wir resümieren, dass wir viele sehr interessante Verbesserungen in den Shop einbauen durften und sind sehr zufrieden mit dem visuellen und auch funktionalen Ergebnis dieses Projekts. Wir danken Devita für die intensive und lebhafte Zusammenarbeit und wünschen viel Umsatz dank der Designoptimierungen!