ePages Now
Die nächste Generation von E-Commerce-Cloud-Software, die es jedem ermöglicht, online zu verkaufen.
Zusammenfassung
Ich habe das UX-Design einer umfassenden Produktverbesserung bei ePages geleitet, die es Kunden ermöglicht, schnell und einfach einen modernen, responsiven Online-Shop zu erstellen.
Verantwortung
- Leitung der gesamten Konzept- und UX-Arbeit, von Skizzen, Wireframes und Entwürfen bis hin zu funktionsfähigen Prototypen und Styleguides.
- Mitwirkung an der Strategie, Planung der Entwicklung und Testen des Produkts.
Hintergrund
Glaubst du, dass jeder ganz einfach online verkaufen kann? Was braucht es, um einen ansprechenden, modernen Online-Shop zu erstellen? Würde deine Mutter das schaffen?
E-Commerce ist seit Jahren ein wachsender Markt, und derzeit scheint dieser Trend nicht nachzulassen. Da sich das Internet und alles, was damit zusammenhängt, jedoch rasant weiterentwickelt, sind die Erwartungen eines durchschnittlichen Online-Käufers in den letzten Jahren deutlich gestiegen.
Einen erfolgreichen Online-Shop zu betreiben, wird immer schwieriger, vor allem wenn du ein kleines Unternehmen bist und es dir nicht leisten kannst, eine Agentur zu beauftragen, die alles für dich aufbaut. Andererseits verfügst du weder über die erforderlichen Kenntnisse, um dies selbst zu erledigen, noch hast du die Zeit dafür.
ePages ermöglicht es kleinen und mittleren Unternehmen, mit einem benutzerfreundlichen SaaS-Produkt problemlos online zu verkaufen. Das 1983 gegründete Unternehmen zählt mittlerweile mehr als 140.000 Shops in 75 Ländern, die auf ePages betrieben werden. Eines der Hauptziele war es stets, Händlern den Online-Verkauf so einfach wie möglich zu machen.
Ausgangssituation und Ziele
Die Hauptzielgruppe von ePages verfügt über keine technischen Kenntnisse und besteht nicht aus (Web-)Designern. Was sie jedoch haben, ist Leidenschaft für ihre Idee und für das Produkt, das sie verkaufen möchten oder bereits über andere Kanäle verkaufen.
Diese Menschen möchten einen ansprechenden, modernen Online-Shop erstellen, um ihre Produkte bestmöglich zu präsentieren. Angesichts ihrer Kenntnisse benötigen sie dafür eine einfache, intuitive Möglichkeit.
Überprüfung der Annahmen
Der direkte Kontakt zu Nutzern ist bei ePages etwas schwierig, da das Unternehmen nicht direkt verkauft, sondern über Partner (hauptsächlich Hosting-Anbieter wie 1&1 und Strato) als White-Label-Lösung. Das bedeutet, dass die Kunden, die unsere Software nutzen, in der Regel nichts über ePages wissen.
Glücklicherweise verfügen wir über einen Pool an bestehenden Nutzern, mit denen wir sprechen können (einige von ihnen haben uns sogar zu sich eingeladen), und wir haben zudem einen Prozess für schnelle Usability-Tests (intern und extern) eingerichtet, um neue Ideen und Iterationen regelmäßig und zügig testen zu können.
Anhand früherer Usability-Tests sowie von Nutzer-Feedback und weiteren Rückmeldungen konnten wir unsere wichtigsten Annahmen bestätigen: Die Einrichtung eines Online-Shops nimmt einige Zeit in Anspruch, wenn man es richtig machen will. Eine möglichst weitgehende Optimierung dieser Phase bei gleichzeitiger Bereitstellung ausgefeilter Bearbeitungswerkzeuge könnte das Nutzerengagement erheblich steigern und noch mehr Nutzer dazu bewegen, ihren Shop einzurichten und ihre Produkte so schnell wie möglich zu verkaufen.
Die Zielgruppe
Aufgrund der Größe und Vielfalt des KMU-Marktes gibt es bei ePages eine ganze Reihe unterschiedlicher Zielgruppenprofile. Da wir jedoch vorhatten, wesentliche Teile der Software neu zu entwickeln, war uns klar, dass wir uns zunächst auf eine kleinere Zielgruppe konzentrieren mussten, wenn wir frühzeitig auf den Markt kommen wollten.
Wir haben uns entschieden, uns zunächst auf die Nutzer mit den einfachsten Anforderungen zu konzentrieren – Menschen, die ein paar Produkte online verkaufen möchten, und zwar in einem Land, in einer Sprache und in einer Währung. Menschen, die nicht wissen, was ein ERP-System ist oder was HTML und CSS bedeuten. Das ist in der Regel die Ausgangssituation von jemandem, der darüber nachdenkt, online zu verkaufen. Von dort aus kann der Nutzer sein Geschäft weiterentwickeln und ausbauen, indem er mehr Produkte verkauft, zusätzliche Dienstleistungen anbietet oder in mehreren Ländern verkauft. Unsere Lösung war bereits so konzipiert, dass sie mit dem Shop mitwachsen kann; daher war es uns wichtig, bei den geplanten Änderungen bestimmte Anwendungsfälle nicht auszuschließen.
Die Hauptprobleme, die wir lösen wollten, betreffen die Art und Weise, wie Nutzer ihren Shop einrichten und Inhalte wie Produkte, Seiten, Texte und Bilder hinzufügen. Dies sollte so einfach wie möglich sein, insbesondere für Nutzer mit sehr geringen technischen Kenntnissen. Darüber hinaus sollte die Shop-Oberfläche für ihre Kunden von Haus aus ansprechend und responsiv sein, und die von ihnen vorgenommenen Änderungen sollten daran nichts ändern.
Erste Iterationen
Wir begannen mit Skizzen auf Papier und setzten die besten Ideen anschließend in Mockups um. In einigen Fällen konnten wir bereits mit den Mockups Usability-Tests durchführen und so schnelles Feedback zu unseren Ideen erhalten.
In einer der ersten Versionen des Administrationsbereichs haben wir den gesamten Bereich „Kategoriemanagement“ in das Menü „Inhalt“ verschoben. Als wir uns jedoch die Entwürfe ansahen, waren wir uns nicht sicher, ob die Nutzer damit rechnen würden, ihn dort zu finden.
Um unsere Annahmen zu überprüfen, führten wir einen schnellen Usability-Test durch und baten die Teilnehmer, eine Stelle zu finden, an der sie ihrem Shop eine Kategorie hinzufügen konnten. Der Test, der mit Mockups durchgeführt wurde, ergab eine alarmierend niedrige Erfolgsquote von 13 %.
Außerdem gingen die meisten Teilnehmer davon aus, im Bereich „Produkte“ Kategorien anzulegen, was anhand der Heatmaps deutlich zu erkennen war.
Daher haben wir die Menüstruktur geändert und das Kategoriemanagement in den Bereich „Produkte“ verschoben. Dies erscheint auch als logischere Lösung, da wir nun den gesamten Bereich „Inhalte“ ausschließlich für Inhalte nutzen können, die nicht den E-Commerce betreffen.
Die größte Herausforderung bestand darin, einen einheitlichen User-Flow zu entwerfen, da wir technisch gesehen letztendlich eine Art Hybridprodukt erhalten würden: ein neuer Editor, der in die bestehende Verwaltung der Shop-Software integriert ist. Wir mussten einige Kompromisse eingehen, um alles so einheitlich wie möglich zu gestalten.
Tests und Erkenntnisse
Im Laufe des Projekts haben wir zahlreiche Usability-Tests durchgeführt, um Ideen zu validieren und neue Umsetzungen weiterzuentwickeln. Außerdem haben wir unseren Testprozess erweitert: Während wir zuvor ausschließlich unser hauseigenes Usability-Labor genutzt hatten, haben wir nun auch schnelle online Usability-Tests in unseren Prozess integriert.
Zu den Dingen, die wir schon früh getestet haben, gehörten zwei verschiedene Ansätze, wie Nutzer Inhaltselemente wie Text und Bilder zu einer Seite hinzufügen können. Bei dem einen Ansatz wurden auf der Seite „+“-Symbole angezeigt, auf die der Nutzer klicken musste, um eine Auswahl an Inhaltselementen zu sehen. Beim anderen Ansatz wurden die verfügbaren Elemente neben der Seite angezeigt, und der Nutzer konnte sie per Drag & Drop einfügen.
Wir haben die beiden Ansätze gegeneinander getestet und dabei darauf geachtet, dass alle Personas im Test vertreten waren. Letztendlich schnitten die beiden Ansätze fast gleich gut ab. Das Hauptproblem bestand darin, dass es zu diesem Zeitpunkt nur möglich war, in einer Spalte zu arbeiten. Wir hatten jedoch vor, den Editor so zu erweitern, dass mehrspaltige Layouts erstellt werden können, und beim ersten Ansatz hätte dies dazu geführt, dass viel mehr „+“-Symbole auf der Seite angezeigt worden wären, was diese überladen und weniger wie die echte Seite aussehen lassen würde.
Außerdem war es für die Nutzer nicht besonders praktisch, erst auf ein „+“-Symbol klicken zu müssen, um die Auswahl der verfügbaren Elemente anzuzeigen. Alles in allem haben wir uns für den zweiten Ansatz entschieden und zeigen die Elemente nun direkt neben der Seite an, die der Nutzer gerade bearbeitet.
In diesem Fall konnten wir den aktuellen Entwicklungsstand zum Testen nutzen – ein Luxus, den man nicht immer hat. In anderen Fällen habe ich HTML-Prototypen erstellt, um ein Konzept zu testen, zum Beispiel, wie wir Elemente auf der Produktdetailseite im Shop positionieren würden und wie diese Seite responsiv funktionieren würde.
Eine der wichtigsten Erkenntnisse aus diesem Test war, die Reihenfolge bestimmter Elemente (Produktbeschreibung, Bewertungen, Teilen-Funktion) zu ändern, da einige der Teilnehmer Schwierigkeiten hatten, diese auf Anhieb zu finden. Dieser Test hat erneut gezeigt, dass es sich lohnen kann, etwas Zeit in einen funktionierenden Prototyp zu investieren, da es schwierig wäre, mit statischen Mockups zu testen.
Die Zielline
Wie bei den meisten anderen Projekten in der Praxis hängt die „erste richtige Version“ von vielen Faktoren ab. Da wir in einem agilen Umfeld arbeiteten, war ziemlich klar, dass wir versuchen würden, so früh wie möglich eine erste Version zu veröffentlichen.
Außerdem nutzten die Entwickler neue Technologien wie Docker und Node.js, die wir zuvor noch nicht in einer Produktionsumgebung verwendet hatten, weshalb sie auch darauf bedacht waren, so schnell wie möglich technisches Feedback dazu zu erhalten.
Nach einer kurzen Beta-Phase ist ePages Now nun als Teil der ePages-Produktfamilie öffentlich verfügbar.