Gehäuse-Design: E-Commerce-Website von Coral Order

Bild

Starten Sie


Vor einigen Monaten wurden wir von einem Stammkunden angesprochen, zu dem wir bereits mehrere erfolgreiche Projekte abgeschlossen haben. Er musste sein Hauptprojekt umgestalten.

Die Entscheidung zur Neugestaltung des Onlineshops und zur Änderung des Designkonzepts beruhte auf der Tatsache, dass die Website nicht den aktuellen Webstandards entspricht und ihre Aufgaben nicht löst. Die Site war zuvor ebenfalls geschlossen worden, aber sie beschlossen, sie öffentlich zu machen.

BildVergleich des alten mit dem neuen Geschäft



Über das Projekt


Coral Club ist ein Offline-Club von Personen, die Produkte dieser Marke verwenden. Ursprünglich war die Site nur für Besitzer eines Offline-Clubs gedacht. Wenig später änderte sich das Konzept und es wurde ein vollwertiger Online-Shop.

Jetzt verkauft der Online-Shop Produkte für Gesundheit, Schönheit und zu Hause. Das Sortiment des Geschäfts besteht größtenteils aus allen Arten von Biozusätzen und Vitaminen, mit denen Sie sich besser fühlen können.

Forschung


Wir hatten eine ungewöhnlich kurze Recherchephase, da der Kunde eine Armee von Entwicklern, Vermarktern und Designern hat, die die Site rund um die Uhr überwachen und alle ihre Probleme und Mängel kennen.

Wir wurden freundlich mit umfassenden Daten zum Projekt versorgt, wie zum Beispiel:

  • Hauptprobleme der aktuellen Version der Website
  • Webview-Metriken
  • Kundenumfragedaten
  • Website-Feedback von regulären Nutzern
  • Links zu Mitbewerberseiten
  • ausführliches Briefing mit Wünschen des Kunden


Es blieb die Aufgabe, die Daten zu untersuchen und ein Produkt zu entwickeln, das alle Probleme in Übereinstimmung mit den dafür festgelegten Anforderungen löst.

BildErster Schuss auf Dribbble

Hauptprobleme


1. Die Website wird nicht verkauft

Nachdem die Website öffentlich zugänglich gemacht wurde, hat der Kunde mithilfe von Metriken und einem Callcenter festgestellt, dass Benutzer, die die Empfehlung nicht beachteten, nichts gekauft haben.

2. Das Produkt selbst ist für

Benutzer unverständlich : Neue Benutzer, die über eine Suche auf die Website gekommen sind, haben die Besonderheiten des Produkts und die Kaufanforderungen nicht verstanden.

3. Die Waren werden nur gemäß den Empfehlungen gekauft.

Es stellte sich heraus, dass diejenigen Benutzer, die die Waren kaufen, diese nur gemäß den Empfehlungen wählen. Die Benutzer haben Waren tatsächlich offline gekauft, und die Website dient nur als Plattform für die Gestaltung vorgewählter Waren. Dies war eine großartige Entdeckung für den Kunden selbst, da er der Meinung war, dass einige der Benutzer immer noch Waren online kaufen.

4. Die Site ist nicht anpassungsfähig
Fast 40% der Website-Nutzer besuchen es von Mobilgeräten aus.

Herausforderung


  1. Veranlassen Sie Benutzer, Produkte auf der Website ohne Empfehlungen zu kaufen
  2. Machen Sie Produkte für alle Benutzer so klar wie möglich
  3. Stellen Sie das Produkt stärker in den Vordergrund
  4. Erhöhen Sie die Anzahl der Waren in der Durchschnittsrechnung
  5. Design auf mobile Geräte abstimmen
  6. Gestalten Sie das Design so, dass es sich leicht anpassen lässt


Einzelheiten


Während der Verhandlungen mit dem Kunden wurde einstimmig beschlossen, ein Design in Material zu erstellen. Diese Entscheidung wurde durch die Tatsache gerechtfertigt, dass Google über detaillierte Anleitungen verfügt, die die Wartung und Verbesserung des Geschäfts in Zukunft erleichtern. Das Material ist einfach anzupassen und verfügt über viele Quellmaterialien in Form von Symbolen, Farben, Schriftarten, Skripten und Quellcode.

Anhand von 3 Schlüsselseiten der Website werden wir Ihnen mehr über die Funktionen dieses Projekts erzählen. Alle Seiten des Projekts können über den Link zum Dribbble eingesehen werden.

Komplex für sich


BildImage des Komplexes für sich selbst

Da neue Benutzer das Produkt nur unzureichend verstehen, haben wir eine ganze Liste von Lösungen zusammengestellt, mit denen diese Personen besser auf der Website navigieren können.

Eine dieser Entscheidungen bestand darin, einen Block mit vorgewählten Komplexen auf der Hauptseite und der Produktseite zu erstellen, um die Art des von einer Person benötigten Produkts zu sortieren und schnell einen Kauf abzuschließen.

Grundlegende Navigation


Eine der Hauptaufgaben bestand darin, die Navigation auszublenden und zu vereinfachen, da sie auf der aktuellen Site viel nützlichen Platz einnahm.

BildMenü zur Auswahl des Landes und der Sprache

Das erste Problem, das gelöst werden musste, war, dass der Coral Club Niederlassungen in 35 Ländern der Welt hat und alle Benutzer eine Website verwenden. Es musste auch berücksichtigt werden, dass in jedem Land mehrere Sprachen gesprochen werden können. Das heißt, für 35 Länder musste ein Selektor erstellt werden, in dem Sie eine Seite und eine Sprache auswählen und schnell darauf zugreifen können, um Parameter zu ändern.

BildDas Hauptmenü der Site

Ein weiteres Problem war, dass die Site mit einer kleinen Anzahl von Produkten viele Kategorien aufweist. Der Kunde wollte das Sortiment erweitern, was ebenfalls berücksichtigt werden musste.

Für ungeübte Benutzer wurden im Menü „Intelligente Kategorien“ bereitgestellt, die das Verschieben der Site so weit wie möglich vereinfachten.

BildWarenkorbmenü auf der Website

Wir haben uns entschlossen, ein Szenario zu testen, in dem Sie die Anzahl der Produkte auf jeder Seite anzeigen und ändern können.

Produktinformationen


BildProduktkartenbild

Im Vergleich zur Vorgängerversion ist es uns unserer Meinung nach gelungen, mehr Informationen hinzuzufügen und keine allgemeinen und informativen Informationen zu verlieren :)

Auf der neuen Karte können jetzt mehrere Tags eingegeben werden, und es ist auch eine Dosierung für Medikamente erschienen. Trotz der Tatsache, dass die Struktur und Anzahl der Blöcke auf einer Seite gleich geblieben sind, hat die neue Karte mehr Luft und ist leichter zu lesen.

BildProduktseite auf der Website

Auf der Produktkarte haben wir versucht, die Informationen für unvorbereitete Benutzer zugänglicher und verständlicher zu machen. Vergessen Sie auch nicht die komplexe Reihenfolge :)

Anpassungsfähigkeit


BildTeil der responsiven Seiten


Einer der wichtigsten Faktoren ist, das Design responsiv zu gestalten, da fast die Hälfte der Benutzer über mobile Geräte auf die Site zugreifen. Das Design sollte eine Mindestbreite von 320px haben. Bei der Entwicklung von responsiven Seiten haben wir es geschafft, die Funktionalität der Webversion anzupassen.

Fazit


Nachdem das Konzept des Geschäfts fertig war, haben wir alle Materialien an den Kunden geschickt. Nach der Bestätigung des Designs bestand der nächste Schritt in der Zusammenarbeit mit der Entwicklungsabteilung. Jetzt helfen wir der Entwicklungsabteilung bei der Implementierung unseres Designs, beantworten ihre Fragen und fungieren auch als Tester der Frontend-Teile, suchen nach Fehlern und senden sie an die Fehlerliste.

Im nächsten Schritt testet der Kunde das neue Design für die Benutzer. Da Produktdesign immer Verbesserung bedeutet, denken wir immer darüber nach, wie wir das Produkt verbessern und neue Ideen für das Projekt anbieten können.

PS Bevor wir diesen Fall vorbereiteten, haben wir mehr als 30 Fälle gesammelt, untersucht und versucht, ihn für Sie interessant zu machen. Wir haben es lange vorbereitet und wollten uns Ihr Feedback in den Kommentaren oder in einer für Sie passenden Form anhören.

Nur registrierte Benutzer können an der Umfrage teilnehmen. Bitte komm rein .

Wie interessiert sind Sie an diesen Fällen?

  • 80,8% Interessant, ich würde noch 186 lesen
  • 13% Nicht interessiert, Habr überhaupt nicht für diese 30
  • 6,9% Trotzdem 16
  • 0.8% Eine andere Meinung, die ich in den Kommentaren kommentiert habe :) 2

Jetzt auch beliebt: