Gestaltung einer erfolgreichen eComm-Site

Jeder liebt Hunde.

Deine Eltern, Schwiegereltern, dein Cousin Onkel. Es ist nicht zu leugnen. Und ... was ist bezaubernder als Hunde selbst? Hunde mit Modekleidung!

Vorstellung unseres Kunden „Gnaw“

Gnaw ist ein auf LA basierendes B2C-E-Commerce-Startup, das einzigartige Hundekleidung anbieten wird.

Das Hauptziel dieser Website ist es, den Kunden ein KLARES Verständnis dafür zu vermitteln, worum es bei Gnaw geht. Gleichzeitig soll es dem Kunden EINFACH gemacht werden, die gewünschten Produkte zu kaufen.

All dies muss erreicht werden, während die geschäftlichen Werte von Gnaw im Spiel bleiben: lustig, trendy und exklusiv.

Die Website muss sich auch von anderen Wettbewerbern abheben, indem sie sich auf ihr einzigartiges Marken- und Wertversprechen konzentriert.

Sie starten bald und möchten, dass ein UX-Experte sie beim Einstieg in ihre Website unterstützt. Guter Zug.

Lass uns anfangen.

FORSCHUNG

Benutzer-Personas

Für wen entwerfen wir? Was noch wichtiger ist, an wen verkaufen wir?

In eComm ist es von Anfang an wichtig zu wissen, wer Ihre Zielgruppe ist.

Dinge, die wir wissen müssen: Alter, Gehalt, Vorlieben / Abneigungen beim Online-Shopping und soziale Einflüsse.

Nachdem die Recherche durchgeführt wurde, haben Gnaw und ich diese drei Benutzer-Personas generiert.

Und einige weitere Kundendaten, die ich aus eComm-Ressourcen gesammelt habe, um unsere vorhandenen Ergebnisse zu untermauern.

User Research Executive Summary: Die Zielgruppe von Gnaws sind tausendjährige Hundebesitzer mit einem mittleren bis hohen Durchschnittseinkommen. Sie werden stark von Instagram beeinflusst und treffen in der Regel Online-Kaufentscheidungen anhand von Empfehlungen von Freunden und Instagram-Influencern. Sie kaufen Online-Produkte, die von Kundenrezensionen gründlich vorgestellt, beschrieben und unterstützt werden. Sie sind auch eher zum Kauf geneigt, wenn es sich um billigen oder kostenlosen Versand mit einer schnellen Lieferzeit handelt.

Wettbewerbsforschung

"Wenn Sie nicht der Erste sind, sind Sie der Letzte." - Grant Cardone

Ich habe an der Konkurrenz geforscht, um Inspiration für die Site zu gewinnen und zu analysieren, wie Gnaw sich von den anderen unterscheiden und sie schlagen kann.

Die von mir analysierten Hauptmerkmale waren die Benutzeroberfläche, UX, IA, der Benutzerfluss und die Value-Angebote.

Der Eigentümer von Gnaw und ich haben diese drei direkten und zwei indirekten Wettbewerber identifiziert

Daraus habe ich einige wichtige Erkenntnisse gewonnen. Die wichtigsten waren die Art und Weise, wie Wettbewerber ihre Website gestalteten, ihre Produkte strukturierten und ihre Funktionen präsentierten. Es hat sich als hilfreich erwiesen, um sicherzustellen, dass Gnaw zu einem Top-Konkurrenten wird.

In diesen harten Wettbewerbsumgebungen ist es sehr wichtig, sich zu unterscheiden. Wir müssen einen Weg finden, um durch Usp, Design, Branding und Kundenerfahrung unvergesslich zu sein. Denn wenn wir das nicht tun, konkurrieren wir nur um den Preis von Produkten und das ist in der Regel ein Wettlauf nach unten.

Informationsarchitektur

Hier ist ein Reality-Check für andere Designer.

Wir können das trendigste Webdesign mit SEHR ästhetischen Bildern und den COOLEST-Animationen haben, aber der wahre Erfolg unseres Designs wird einfach an der Anzahl der durchgeführten Komplettkäufe gemessen. Wenn Kunden nicht kaufen, bedeutet dies, dass das Design schlecht ist.

Sie werden gefeuert. Stakeholder verlieren Geld. Kunden verpassen ein erstaunliches Produkt. Niemand gewinnt.

Zum Glück trägt eine gute Folgenabschätzung wesentlich dazu bei, dieses Problem zu vermeiden.

Es ist wichtig, dass unsere IA eine klare, intuitive Navigation bietet und den Kunden hilft, Dinge auf ihrer Reise zu verstehen, wie:

  • Mit welcher Marke haben sie es zu tun?
  • Wo ist das Menü? Wo ist die Suche? Wo sind die Filter?
  • Auf welcher Seite sie sich befinden
  • Wo ist die Möglichkeit, den Support zu kontaktieren?
  • Wie können sie uns bezahlen?
  • Lassen Sie uns in diesem Sinne klar und übersichtlich werden.

    Seitenverzeichnis

    Unsere Kategorisierung wurde festgelegt. Stellen wir uns nun vor, wie ein Kunde sein Ziel erreichen würde.

    Der Zweck dieser Übung ist es, uns in die Lage eines Kunden zu versetzen und die Erfahrung durch ihre Linse zu sehen. Dieser Datensatz kann uns dabei helfen, die Website für Geschäftsziele zu optimieren und gleichzeitig sicherzustellen, dass der Kunde sein Ziel reibungslos und frustrationsfrei erreicht.

    Szenario: Cristina blättert durch Instagram und sieht, wie einer ihrer Lieblings-Influencer ihren Hund zeigt, der einen tollen Hundehoodie rockt. "Was für ein süßer Hoodie", denkt sie bei sich. Die Influencerin ruft Gnaw und wirbt für ihren Rabattcode.

    Der Winter kommt ... und denk dran ... Cristina liebt ihre Hunde wie ihre Kinder, damit sie auf ihren täglichen Spaziergängen nicht kalt werden und der Hoodie cool aussieht. Cristina beschließt, auf die Gnaw-Website zu gehen und 2 Hoodies zu kaufen.

    So würde es aussehen.

    Solide Reise. Wir konnten einige mögliche Schwachstellen vorhersehen und beheben, noch bevor wir mit dem Entwerfen begannen :).

    Proaktiv. Niemals reaktiv.

    Jedes Element auf der Website muss bewusst sein und eine wichtige Rolle spielen, da es die Conversion erheblich beeinflussen kann. Auf dem heutigen eComm-Markt können sich Käufer nicht durch unnötige Schritte behindern lassen. Sie fordern eine Erfahrung, die schneller, bequemer und einfacher ist als der Besuch eines tatsächlichen Geschäfts. Wenn wir es ihnen nicht zur Verfügung stellen, werden sie woanders hingehen.

    Weiter.

    ENTWICKLUNG

    Nachdem wir genügend Daten gesammelt haben, ist es Zeit, mit dem Aufbau zu beginnen.

    Ich beginne mit einer Skizze aus Papier und Stift, um ein besseres Bild davon zu erhalten, wie die Website insgesamt aussehen wird.

    Nach Fertigstellung der Skizzen haben wir den Prototyp mit einigen potenziellen Kunden getestet, um sicherzustellen, dass wir diese Kundenprobleme von früher gelöst haben, und um deren Feedback zu erhalten. (Es ist wichtig, jetzt mit dem Testen zu beginnen, damit wir die meisten Änderungen in den frühen Phasen und nicht erst später im Produktzyklus vornehmen können, wenn dies mehr Zeit und Geld kostet.)

    Ich ließ sie drei verschiedene Szenarien durchlaufen und beobachtete, wie sie sich entwickelten. Die Szenarien waren:

    1- Fügen Sie drei Artikel zu Ihrer Tasche und zur Kasse. Entfernen Sie an der Kasse eines der Produkte und fügen Sie zwei der gleichen Produkte hinzu, ohne zurückzukehren.

    2- Suchen Sie einen Hundekapuzenpulli und navigieren Sie zu allen Hundekapuzenpullis auf der Produktseite, ohne die obere Navigation zu verwenden.

    3- Suchen Sie ein mittelgroßes Hundehalsband und überprüfen Sie es mit möglichst wenigen Klicks.

    Testergebnisse

    1- Der Kunde war im Checkout-Bildschirm und konnte feststellen, wo er die Menge anpassen konnte, konnte jedoch einen Artikel nicht entfernen, da es keine Lösch- oder X-Schaltfläche gab (episches Versagen von mir).

    2- Der Kunde hat den Hundekapuzenpulli über die Suchfunktion gefunden, wusste jedoch nicht, wie er die Hoodie-Kategorie anzeigen soll, ohne das Navigationsgerät zu verwenden. Dies führte dazu, dass ich einen kleinen klickbaren Kategorielink direkt über dem Produkttitel implementierte. (Ich wollte noch keine Paniermehl verwenden, da Gnaw mit einem kleineren, exklusiveren Inventar beginnt.)

    3- Der Kunde hat es problemlos überstanden. Erfolg!

    Präsentation der Hauptskizzen. (Ich weiß, dass es nicht schön ist, aber der Teil kommt später. Versprechen)

    Wireframes

    Ich genieße es, Dinge zum Leben zu erwecken.

    In den folgenden Wireframes wird gezeigt, wie jede Funktion beabsichtigt ist und wie sie auf Benutzerprobleme reagiert.

    Lassen Sie uns nun eine Aufschlüsselung meines Design-Denkens durchgehen ... auch mit Farben.

    Startseite

    Der Hauptzweck einer Homepage ist es, klar zu machen, wer Sie sind und was Ihre Marke bietet.

    Mein Ziel mit dieser Seite ist es, es extrem einfach zu halten und die Leute sofort anzusprechen. Sie können nur einmal einen ersten Eindruck hinterlassen.

    Ich brauchte diese Seite, um Kunden anzusprechen und ihnen durch effiziente Navigation und optimierte CTAs bei ihren Einkaufszielen zu helfen. Hier findet die Conversion statt.

    Heldenbild

    Ich habe dieses Banner entworfen, um offen zu erklären, was Gnaw anbietet - Hundekleidung. Es ist meine erste Chance, Aufmerksamkeit zu erregen. Deshalb muss das Bild auch groß und schön sein und einen benutzerdefinierten CTA-Knopf haben, der sich effektiv vom Hintergrund abhebt, damit die Augen der Kunden natürlich davon angezogen werden.

    Eine eindeutige CTA-Schaltfläche ist der Schlüssel, da sie Ihr Branding deutlich macht und eine der wichtigsten Regeln für die Konvertierung erfüllt - helfen Sie dem Kunden, so schnell wie möglich zur Produktseite zu gelangen.

    Neu eingetroffen

    Hier habe ich die neuesten Produkte zusammengestellt, um den Kunden zu zeigen, dass die Seite auch lebendig ist, und hilfreiche Vorschläge zu Kaufmöglichkeiten gemacht.

    Hier können Sie auch Aktualisierungen implementieren. Es ermöglicht uns, die Seite mit neuem Inventar zu aktualisieren und Trends in der Hundekleidung einzuführen. Verleiht das Gefühl der Lebendigkeit - ähnlich wie das Austauschen von Schaufensterpuppen in einem Laden aus Backstein und Mörtel.

    Weitere kategorisierte Bilder

    "Show. Erzähl es nicht. "

    Auf dem heutigen Markt ist es äußerst wichtig, dass wir die Kunden mit schönen Bildern anziehen und einbinden. Heutzutage ist qualitativ hochwertige Fotografie der Hauptantriebsfaktor für den Online-Verkauf. Produktqualität, -größe und -beschreibung treten in den Hintergrund. Wir kaufen einfach, was gut aussieht. Ich bin nicht anders, ich ertappe mich regelmäßig dabei, mich auf dieses Verhalten einzulassen.

    Im Kopf erinnerte ich mich immer wieder daran, luxuriöse Fotografien aufzunehmen, die das verwendete Produkt in Szene setzen. Wenn der Kunde sich und seinen Hund auf den Fotos nachvollziehen und mental sehen kann, erhöht sich die Wahrscheinlichkeit, dass er etwas kauft, dramatisch. Geschichten verkaufen sich und wir müssen dem Kunden helfen, sich selbst als Hauptfigur bei der Verwendung unseres Produkts vorzustellen.

    Link zur Markengeschichte

    Ich bin ein Jahrtausend alt und die meisten meiner Freunde sind es auch. Außerdem ist Gnaws Zielkunde Millennials.

    Was bedeutet das?

    Das heißt, wir fordern Markenvertrauen. Wir sind von traditioneller Werbung nicht betroffen. Millennials sind dafür verantwortlich, Milliarden für den jährlichen Online-Einkauf auszugeben. Wir müssen helfen, ihre Kaufwünsche zu erfüllen.

    Hier ist ein Banner, das einen Einblick in die Markengeschichte und eine Markenursache gibt. Beim Klicken wird eine Verknüpfung zur Story-Seite der Marke hergestellt.

    Wenn wir unsere Zielgruppe dazu bringen können, uns zu vertrauen, sind wir unseren Mitbewerbern 10 Schritte voraus. Es ist so wichtig, Vertrauen aufzubauen, weil es Gnaw dabei hilft, langfristig treue Kunden mit viel Kaufkraft zu gewinnen!

    Sozialer Beweis

    Auch hier stützen sich Millennials stark auf soziale Medien, Markenempfehlungen von Influencern und Bewertungen der Öffentlichkeit, um ihre Kaufentscheidungen zu beeinflussen. Daher ist es kein Problem, dass ein IG-Feed auf unserer Homepage enthalten sein muss.

    Wenn Ihre Kunden sehen, dass Sie in sozialen Medien mit anderen interagieren, hinterlässt dies einen positiven Eindruck und zeigt, dass Sie eine Marke sind, der sie vertrauen können.

    Das Engagement auf Instagram ist eine der Hauptstraßen für den Traffic von Gnaw, und die Bereitstellung verschiedener Wege für Kunden, um Ihre Seite zu erreichen, hilft auch bei SEO- und Conversion-Bemühungen.

    E-Mail anmelden

    Schließlich habe ich dies zu einem sehr visuellen Element auf der Seite gemacht, da es für die Kunden von Gnaw sehr hilfreich ist, wenn sie sich anmelden!

    Hiermit können Kunden über Verkäufe, Sonderangebote und neue Produkte informiert werden.

    Außerdem ist E-Mail nachweislich eine der wichtigsten Triebfedern für die Umsatzumsetzung auf dem aktuellen Markt. Für Gnaw ist es äußerst wichtig, eine Liste zu erstellen und der Community wichtige Informationen zu übermitteln.

    Nächste Seite.

    Produktseite

    Ihre Produktseite ist die wichtigste Seite auf Ihrer Website.

    Es kann die ganze Sache machen oder brechen. Hier treffen Kunden die Entscheidung, ob sie einkaufen.

    Es muss vollständig optimiert werden.

    Produktmerkmal Bild

    Das Wichtigste auf einer Produktseite ist das Funktionsbild. Es setzt die Erwartungen von Anfang an. Sie würden einem Geschäft vertrauen, das seine Fotos richtig fotografiert und umgekehrt.

    Der Weg, um beim Online-Verkauf ERSTAUNLICH zu werden, führt über eine effektive Präsentation. Denken Sie daran, einer der größten Probleme, die Verbraucher online haben, ist die Unfähigkeit, das Produkt vor dem Kauf zu berühren oder mit ihm zu interagieren. Helfen wir ihnen dabei.

    Wenn Sie hochwertige Produktfotos aufnehmen, geben Sie eine beschreibende Darstellung und lassen die Verbraucher das Produkt mehr wünschen.

    Wenn Sie die 80/20-Regel kennen, Das abgebildete Bild ist definitiv Teil dieser 20%.

    Produktgalerie

    Dies hilft bei der oben genannten Schwierigkeit, vor dem Kauf nicht mit dem Produkt interagieren zu können.

    Im Idealfall möchten Sie Ihr Produkt aus allen Blickwinkeln zeigen und Szenario-Produktfotos einfügen, die Ihnen dabei helfen, eine Geschichte zu kommunizieren. Es ist wichtig, dass der Kunde genau weiß, was er kauft, um den Umsatz zu steigern und die Rendite zu senken.

    Produktvideo

    Möchten Sie, dass Ihre Website auf der ersten Seite von Google aufgeführt wird?

    Ja, sagst du? Cool. Nun, es muss Produktvideos enthalten :)

    Videos helfen deiner Website dabei, einen hohen Rang einzunehmen, weil:

    • Google nimmt Video-Klicks als Zeichen für eine stärkere Bindung an Algorithmen wahr
    • Es zeigt an, dass Sie eine etablierte Online-Präsenz haben
    • Google besitzt Youtube und belohnt Onlineshops, die es nutzen.

    Neben der Steigerung des Umsatzes durch SEO bieten Videos Ihrem Publikum eine Live-Demo des Produkts, die zusätzlich bei der genannten Problematik hilft.

    Produktübersicht

    Der erste Weg, ein Produkt effektiv zu präsentieren, sind Bilder. Zweitens ist Text.

    Eine detaillierte Produktbeschreibung ist ein Muss, um den Kunden zu informieren und ihm bei der Kaufentscheidung zu helfen. Es ist auch eine Gelegenheit, die Stimme Ihrer Marke zum Ausdruck zu bringen und das Markenvertrauen zu stärken.

    In diesem Bereich können Sie potenzielle Kundenangst lindern.

    Wenn wir von früher zur Benutzerreise zurückkehren; 3 mögliche Fragen, die Cristina vom Einkauf abhielten, waren:

    - "Passt das zu meinem Hund?"
    - "Wie lange dauert der Versand?"
    - "Was ist, wenn es mir nicht gefällt?"

    Dies wurde direkt gelöst, indem die Antworten genau dort platziert wurden, wo es auf der Einkaufsreise des Kunden zu einer kritischen Zeit kam.

    Produkt CTA

    Entwarf, eins der dominierendsten Elemente auf der Seite zu sein.

    Käufer müssen wissen, was der nächste Schritt beim Kauf des Produkts ist, und ein wirklich großer und markengeschützter CTA-Knopf ist eine hervorragende Möglichkeit, sie in die richtige Richtung zu lenken.

    Enthaltene Symbole unter der Schaltfläche, die das Vertrauen zum Kunden stärken und Ängste lindern.

    Produkt-Up-Selling

    "Möchtest du Pommes damit?"

    Hier tragen wir dazu bei, den Kunden einen Mehrwert zu bieten, indem wir Produkte anbieten, die ihren Kauf ergänzen.

    Es ist am besten, diese Auswahl basierend auf Daten früherer Transaktionen auf der Website zu treffen. (Welche Produkte verbinden Kunden normalerweise miteinander)

    Produktrezensionen

    Untersuchungen haben ergeben, dass jeder Kunde 60% mehr Kaufbereitschaft hat, wenn Bewertungen vorliegen. Und bei Millennials schießt diese Zahl auf bis zu 90%.

    Bewertungen schaffen Vertrauen und Vertrauen erhöht die Conversions.

    In der heutigen Zeit ist ein marktsozialer Beweis ein Muss.

    Auschecken

    Kasse fließen

    "Baue es und sie werden kommen"

    … Bei eComm nicht so :)

    Viele Websites weisen hohe Zugriffsraten auf, weisen jedoch aufgrund eines schlechten Checkout-Flusses eine schlechte Umsatzleistung auf.

    Hier ist, wie ich Gnaws entwarf und mein Bestes gab, um sicherzustellen, dass es nahtlos und intuitiv ist.

    Mehrere Zahlungsmöglichkeiten

    Es ist das Jahr 2019, und viele Kunden haben unterschiedliche Zahlungsoptionen wie Paypal oder Visa Checkout als Treueprofi eingestuft.

    Nagen beginnt als kleiner Laden. Mit der Tatsache, dass es sogar Amazon Pay, Google Pay und Paypal anbietet, hat es die 10-fache Glaubwürdigkeit seiner Marke, da es sich um vertrauenswürdige Anbieter handelt.

    Jüngste Statistiken zeigen auch, dass eComm-Websites ihre Conversions um 7% steigern, indem sie einfach Amazon Pay einbeziehen.

    Kein Header

    Der Kunde braucht in diesem Prozess keine Ablenkungen.

    Durch das Entfernen des Navigationsgeräts kann sich der Kunde auf das Auschecken konzentrieren und hat dennoch die Möglichkeit, bei Bedarf zurückzukehren.

    Erfassen Sie E-Mails

    In der Wirtschaft gibt es viele Dinge, die Sie nicht kontrollieren können, z.

    Vergewissern Sie sich unbedingt, dass dies das erste Formularfeld ist, das Sie erfassen, damit Sie die automatische Ausfüllung von Google-Inhalten verwenden und ihnen eine hervorragende Erfahrung bieten oder die einzigen Daten erfassen können, die Sie zum Starten Ihrer Kampagne zur Aufgabe des Einkaufswagens benötigen.

    Erfolgreiche Abbruchkampagnen helfen in der Regel rund 20% der Kunden beim Kauf. Abhängig von der Größe Ihres Unternehmens kann dies Einnahmen in Höhe von mehreren Tausend US-Dollar bedeuten.

    Als Gast fortfahren

    Ich habe eine volle Tasche online und kann sofort zur Kasse gehen. Wenn ich jedoch gebeten werde, ein Konto zu erstellen, brich ich diesen Kauf in 80% der Fälle ab.

    24% der Transaktionen wurden 2018 abgebrochen, was beweist, dass es anderen genauso geht. Wir können dieses Dilemma vermeiden, indem wir einfach die Option hinzufügen, als Gast fortzufahren.

    Werbe-Code

    Viele Kunden werden von Influencers mit Affiliate-Links auf die Website von Gnaw geleitet. Ich habe ziemlich deutlich gemacht, wo der Code eingegeben werden muss, damit die Kunden keine Verwirrung stiften.

    Gesamtübersicht

    Was ist schlimmer als hohe Versandkosten?… Versteckte Gebühren.

    Es ist wichtig, dass alle Preise in der Zusammenfassung aufgeführt sind, damit der Kunde genau weiß, wie viel er bezahlt.

    Dies erhöht das Markenvertrauen und das Vertrauen entspricht der Kundenbindung :)

    Gedanken zum Schließen der Checkout-Seite

    Der Schlüssel zu einem guten UX-Ablauf beim Checkout ist, die Dinge so einfach wie möglich zu halten.

    Helfen Sie dem Kunden, den Inhalt seines Einkaufswagens zusammenzufassen, und geben Sie ihm die Möglichkeit, ihn von dort aus zu bearbeiten. Entfernen Sie alle unnötigen Formularfelder und implementieren Sie moderne Zahlungsmethoden.

    Mein Ziel ist es, es dem Kunden leicht zu machen, Gnaws Produkt zu erhalten.

    Prototyp

    Hier ist ein Prototyp eines reibungslosen Benutzerflusses in Aktion.

    NÄCHSTE SCHRITTE

    In Zukunft werde ich die Site weiter aktualisieren und dabei helfen, Daten zu messen und zu beobachten, wo die Stärken der Site zusammen mit den Schwächen liegen.

    Es ist meine Pflicht, dafür zu sorgen, dass Gnaw das neueste und beste Design erhält und gleichzeitig für die Konvertierung optimiert wird.

    Die Seite von Gnaw wird bald gestartet. In der Zwischenzeit kannst du sie bei Interesse auf Instagram unter @Gnawdogs verfolgen.

    Vielen Dank für Ihre Zeit. Wenn Sie Fragen, Feedback oder Interesse an einer Zusammenarbeit haben, können Sie mich unter lazviera@gmail.com erreichen.

    Prost ~ Laz

    Werkzeuge: Sketch, Figma, Adobe PS, Invision