/GArdena Digital hub

Onboarding Redesign -
GARDENA smart system

Steigerung der Benutzerzufriedenheit und der Geschäftskennzahlen unter Zeitdruck.

Zwei große Bilder von App-Bildschirmen: Das linke zeigt Anweisungen zum Scannen eines QR-Codes, während das rechte zeigt, wie man ein Firmware-Update initiiert.

Überblick

Das Gardena Smart System besteht aus einer Reihe von intelligenten Gartengeräten, die über ein internetfähiges Gateway miteinander verbunden sind. Der erste Schritt im Einführungsprozess besteht darin, dieses Gateway mit dem Gardena-Server zu verbinden.

Eine umfassende Überprüfung des derzeitigen Prozesses hat erhebliche Probleme aufgedeckt. Als erste Interaktion des Nutzers mit dem System ist das Onboarding-Erlebnis ausschlaggebend dafür, wie der Nutzer das Produkt wahrnimmt.

Meine Rolle

In meiner Rolle als UX-Manager war ich für die Planung, Koordination und Durchführung der UX Expert Review des Systems verantwortlich.

Nachdem ich eine Reihe von Problemen innerhalb des Onboarding-Prozesses identifiziert und überprüft hatte, war ich in enger Zusammenarbeit mit dem Embedded-Entwicklungsteam für das Redesign verantwortlich.

Ergebnisse

Nutzerzufriedenheit

Die Quote der fehlgeschlagenen Erstanschlüsse sank von 70% auf 15% wobei die verbleibenden Fehler hauptsächlich auf ein bekanntes technisches Problem zurückzuführen sind.

Nutzungsfreiheit

Die Benutzer erhalten Anleitungen sowohl für die Ethernet- als auch für die Wi-Fi-Einrichtung, was zu einer 160% Zunahme der Gateways führte, die über Wi-Fi angeschlossen wurden.

Zufriedener Kundenservice

Minimierung von Kundendienstanfagen durch die Implementierung kontextsensitiver Hilfebildschirme, die es den Benutzern ermöglichen, die Probleme selbst zu lösen.

Zufriedener Kundenservice & Nutzer

Die Aufnahme wesentlicher Daten in das Kontaktformular hat den Kundendienstprozess gestrafft und die Antwortzeiten verkürzt.

Aufdeckung
des Problems

Überblick

Um ein gründliches Verständnis der gesamten Produktlinie zu erlangen, die sich im Laufe der Zeit erheblich weiterentwickelt hat, haben mein Team und ich eine umfassende Expertenprüfung vorgenommen. Diese Überprüfung umfasste alle Facetten des Produkts, sowohl digital als auch nicht-digital, sowie das Zusammenspiel zwischen diesen Komponenten.
Dabei stellte sich heraus, dass das Onboarding ein Hauptproblem darstellte.

Um ein genaueres Verständnis zu erlangen, haben wir eine Reihe von Usability-Tests durchgeführt. Diese Tests zeigten, dass eine beträchtliche Anzahl von Teilnehmern auf bestimmte Probleme stiess.

Schliesslich wurden unsere Beobachtungen durch konkrete Daten untermauert: 70% aller Verbindungsversuche zum System schlugen fehl.

Eine Kombination aus zwei Bildern. Das erste zeigt zwei Personen, die eine App und ein Gateway benutzen. Das zweite ist eine Excel-Datei mit allen Ergebnissen.
Expert Review mit Touchpoint Map aller Schritte und involvierter Geräte und Dokumente.

Hauptprobleme

  • Anleitung nur für den Anschluss über Ethernet, komplexerer Prozess für W-Lan fehlt.
  • Schritte im Benutzerhandbuch und in der App stimmen nicht überein.
  • Der Benutzer kann zum nächsten Schritt übergehen, ohne den letzten zu beenden, was zu Fehlern führt.
  • Keine kontextbezogene Hilfe, wenn der Benutzer auf Probleme stösst.
  • Bilder und Texte oft nicht informativ.

Dies führte zu...

Ein trauriger Smiley

Hohe Kundenfrustration

Die Einrichtung der physischen Geräte des Systems erfordert bereits einen erheblichen Aufwand für die Kunden. Wenn dann noch ein komplexer und unübersichtlicher digitaler Anleitungsprozess hinzukommt, nimmt die Frustration deutlich zu.

Ein knocked-out Smiley

Hohe Arbeitsbelastung im Kundendienst

Die Kunden wandten sich häufig an den Kundendienst, um Hilfe bei der Einrichtung zu erhalten, was die Arbeitsbelastung des Teams aufgrund der Komplexität des Prozesses und der Einzigartigkeit jedes einzelnen Gartens erhöhte.

Ein wütender Smiley

Negatives Feedback & Bewertungen

Das Onboarding setzt entscheidende erste Erwartungen an das System, und negative Erfahrungen können zu ungünstigen Bewertungen führen.

Aus diesen Gründen hat die Unternehmensleitung das Redesign eingestuft als:
Höchste Priorität

Unser Ansatz

Einführung

Bei der Neugestaltung des Onboarding-Prozesses verfolgten wir einen schlanken Ansatz, bei dem unsere Entscheidungen auf schnellen Benutzertests, Erkenntnissen aus der Konkurrenzanalyse und offenen Diskussionen mit dem embedded Entwicklern basierten, um die Machbarkeit sicherzustellen.

Zeitliche Einschränkungen

Da die Gartensaison näher rückte, war es von entscheidender Bedeutung, die Neugestaltung vor deren Beginn umzusetzen. Dies bedeutete, dass nicht nur der Entwurf, sondern die Programmierung, die Qualitätssicherung und die Veröffentlichung vor diesem wichtigen Datum abgeschlossen sein musste, was die Entwurfsphase unter erheblichen Zeitdruck setzte.

Konkurrenzanalyse

Unser UX-Team profitierte stark von einer umfassenden Konkurrenzanalyse, die wir zuvor zu vergleichbaren IoT-Produkten durchgeführt hatten.

Diese Analyse, bei der die entscheidenden Schritte mit umfassenden Screenshots und Anmerkungen detailliert dargestellt wurden, ermöglichte es uns, unsere eigenen Prozesse effektiv zu reflektieren. Wir konnten erkennen, welche Strategien wir für unser System übernehmen und welche wir vermeiden sollten, um einen fundierten und strategischen Ansatz zu gewährleisten.

Diese Forschung lieferte uns eine solide Grundlage für die Entwicklung erster Konzepte und die Erkundung möglicher Lösungen.

Eine Excel-Datei mit Screenshots, Fotos und Kommentaren zu einem Wettbewerber.
Beispiel Konkurrenzanalyse mit Anmerkungen.

Grundlegender Lösungsprozess

Unser Grundansatz bestand darin , dass wir verschiedene Ideen ausprobieren und validieren, bevor wir uns mit detaillierten Lösungen beschäftigen. Diese Strategie ermöglichte es uns, schnell ein robustes, übergreifendes Konzept zu entwickeln.

An image depicting the overall process: Phase 1 involves continuous ideation, prototyping, and testing. Phase 2 is focused on Design & Build. The final step is measuring results.An image depicting the overall process: Phase 1 involves continuous ideation, prototyping, and testing. Phase 2 is focused on Design & Build. The final step is measuring results.
Phase 1

Ideen entwickeln & Prototypen erstellen & Ideen testen

Warum und wie testen?

Um ein breites Spektrum an Lösungen zu erforschen und zu testen, einschliesslich Variationen in Struktur, Bildsprache, Text und Hilfesystemen, beschlossen wir, mehrere Runden unmoderierter Remote-Tests zur Usability durchzuführen.

Wir haben uns für die Plattform rapidusertest.com, entschieden, die für uns mehrere entscheidende Vorteile bietet:

  • Effiziente und kostengünstige Durchführung von Tests unter Berücksichtigung unserer begrenzten Ressourcen.
  • Die Plattform übernahm das Screening und die Rekrutierung der Teilnehmer und erleichterte den Prozess.
  • Schnelle Durchlaufzeit: Testaufbauten führen zu Ergebnisvideos in nur 5 Stunden.
Zwei nebeneinander liegende Wirframes, die frühe Konzepte zeigen.
Links: Startpunkt - Indem wir den Nutzern die Wahl der Einbeziehungsmethode überlassen, können wir eine schrittweise Anleitung geben.
Richtig: Kontextbezogene Hilfe: - Die Hilfe-Schaltfläche ist keine primäre Aktion, sondern gibt klar an, wann der Benutzer handeln sollte.

Die Herausforderung von Remote-Tests für IoT

Die Durchführung von Tests in der Frühphase von IoT-Systemen bringt eine Reihe von Herausforderungen mit sich, die in einer unmoderierten Remote-Umgebung noch verstärkt werden.

Bei mehreren unserer Prototypen war es entscheidend, dass die Tester nicht nur mit der zugehörigen Smartphone-App, sondern auch mit dem physischen Gateway-Gerät interagieren konnten.

Wir wollten herausfinden:

  • Ob die Nutzer Fehler erkennen und selbständig beheben können.
  • Wie sie auf LED Signale und Wartezeiten reagieren.
  • Wie gut sie die Anleitung, die das physische Gerät beinhalten, verstehen.

Für diese speziellen Prototypen haben wir uns für ProtoPie.io, entschieden, ein fortschrittliches Prototyping-Tool.
Damit konnten wir ein digitales Gateway simulieren, das mit unserem App-Prototyp interagieren konnte und realistisches Feedback auf der Grundlage von Benutzeraktionen entweder mit der App oder dem Gateway selbst lieferte.

Ein Smartphone, das neben dem Bild eines Gateways einen App-Bildschirm zeigt. Unterhalb des Gateways befinden sich drei Tasten zum Drehen des Geräts.
Beispielbildschirm unseres Prototyps, der die App neben einem drehbaren Gateway anzeigt. Wir waren auch in der Lage, das Blinken der LEDs und Fehler zu simulieren, um ein realistisches Erlebnis zu schaffen, wenn die Nutzer auf Probleme stossen. Die Präsentation des Prototyps wurde von den Teilnehmern sehr positiv aufgenommen.

Hauptentscheidungen nach den Tests

1

Verbesserte Informationen und Feedback

Neben klaren Anweisungen und unterstützenden Bildern haben wir uns für einfache, übersichtliche Animationen entschieden, um das Verständnis des Benutzers für die aktuellen Aktivitäten des Systems zu verbessern.

2

Supportsysteme für die Fehlerbehebung

Kontextbezogene Hilfe-Screens unterstützen den Nutzer Probleme selbstständig zu beheben.
Für den Fall, dass Probleme auftreten, die der Benutzer nicht selbst lösen kann, steht ein einfaches Kontaktformular für den Kundendienst zur Verfügung. Dieses Formular sendet automatisch spezifische Daten, diese helfen dabei, die Ursache des Problems schnell zu identifizieren und zu beheben.

3

Checkpoints & Fallbacks

Wir haben strategisch wichtige Kontrollpunkte gesetzt, um den Abschluss kritischer Einrichtungsphasen zu bestätigen. Diese Kontrollpunkte sind informativ, aber unaufdringlich und geben Sicherheit, ohne den Fluss des Nutzers zu unterbrechen.

Darüber hinaus haben wir "technische Kontrollpunkte" als Fallback eingebaut, um sicherzustellen, dass die Nutzer nicht von vorne anfangen müssen, wenn die App geschlossen wird.

Alle Entscheidungen wurden gemeinsam mit dem Product Owner und dem Entwicklungsteam getroffen, um die Durchführbarkeit in unserem engen Zeitplan zu gewährleisten.
Phase 2

Design & Umsetzen

Allgemeines Vorgehen

Um unseren Termin einzuhalten, haben wir die Entwicklungs- und Designarbeiten so aufeinander abgestimmt, dass sie parallel laufen.

User Flow Optimierung mit Embedded Entwicklern

Während sich die Entwickler an die Backend-Arbeiten für das Support-System machten, konzentrierten wir uns auf die Verfeinerung des allgemeinen User Flows des Onboarding-Prozesses.

In Zusammenarbeit mit dem Entwicklungsteam führten wir mehrere Iterationen durch, um einen umfassenden Ablauf zu erstellen, der alle potenziellen Benutzerszenarien, Herausforderungen und Systemprüfungen berücksichtigte.

Dies ermöglichte uns drei wichtige Dinge:

  • Effiziente Zusammenarbeit mit dem Entwicklungsteam, wobei der Schwerpunkt auf praktikablen und wirkungsvollen Designlösungen liegt.
  • Die Fähigkeit, Schritte im Arbeitsablauf schnell zu reorganisieren, um technischen Einschränkungen zu begegnen.
  • Ein besser verteiltes Arbeitspensum, das es dem Entwicklungsteam ermöglichte, an der Implementierung und Vorbereitung verschiedener Komponenten zu arbeiten, während wir die Bildschirm-Mock-ups fertigstellten.
Ein vollständiges Flow Diagram des Gateway Prozesses
Der Ablauf mag komplex aussehen, aber er umfasst viele Dinge, die im Hintergrund ablaufen und für den Benutzer nicht sichtbar sind. So konnten wir für jede mögliche Situation planen.

Fertigstellung von Screens, Texten und Bildern

Nachdem wir das allgemeine Konzept und den User Flow definiert hatten, konzentrierten wir uns auf die Ausarbeitung der konkreten Screens.

Diese Phase profitierte stark von den Erkenntnissen, die wir während unserer Usability Tests gewonnen hatten, bei denen wir bereits verschiedene Kombinationen von Bildern und Text sowie Interaktions- und Feedbackmuster untersucht hatten.

Unerwartete Herausforderungen

Ursprünglich wollten wir für die finalen Bilder mit einem 3D-Künstler zusammenarbeiten. Dies war nicht nur eine zeitsparende Massnahme, sondern wir wollten qualitativ hochwertige, professionelle Bilder.

Aufgrund von Budgetbeschränkungen, die durch die Ungewissheit der Coronavirus-Pandemie verursacht wurden, mussten wir eine interne Lösung finden, so dass ich die Erstellung übernahm.

Das hat nicht nur meine Fähigkeiten im visuellen Design gefördert, sondern auch dafür gesorgt, dass wir die Bilder so zuschneiden konnten, dass sie genau das vermitteln, was der Nutzer braucht.

Beispielscreens

A high-fidelty image of an app screen, presenting to main options: Connect via Lan Cable or WI-FI.
Orange ist zwar die Hauptfarbe von Gardena und steht für Aktion auf den physischen Geräten, aber es kann schwierig sein, diese Farbe effektiv einzusetzen. Daher haben wir uns für einen gedämpften Ton entschieden.
A high-fidelty image of an app screen with instructions to start a firmware update.
Dieser Schritt ist optional für Benutzer, die sich für eine Verbindung über W-Lan entscheiden. Da die App und das Gateway noch nicht miteinander verknüpft sind, können wir in der App noch keinen Fortschritt anzeigen.. Dieser Umstand wurde heiss diskutiert.
A high-fidelty image of an app screen, showing how to connect the device by scanning one of two QR codes. The wrong code is crossed out, the other one is highlighted.
Die verbleibenden 15 % Verbindungsfehler sind größtenteils auf das Scannen des falschen Codes zurückzuführen. Im Idealfall hätten wir dies technisch gelöst, aber aus Zeitgründen war dies für die aktuelle Version nicht machbar. Daher mussten wir uns vorerst mit einer weniger eleganten Lösung zufrieden geben.

Schlusswort

Dank unseres iterativen und kollaborativen Ansatzes konnten wir die Neugestaltung des Onboarding nicht nur fristgerecht abschliessen, sondern erzielten auch grossartige Ergebnisse.

Dieser Erfolg zeigt sich in der deutlichen Reduzierung der Verbindungsfehler, die von 70% auf 15% gesunken sind. Es ist wichtig zu erwähnen, dass die verbleibenden Fehler hauptsächlich auf ein technisches Problem zurückzuführen sind, das sich unserer unmittelbaren Kontrolle entzieht.

Besonders hilfreich war die auf User Tests ausgerichtete Versuchsphase, die uns schnell ein tiefes Verständnis für unsere Zielsetzungen vermittelte. Diese Erkenntnisse waren entscheidend und flossen in jeden weiteren Schritt unseres Prozesses ein.

Explore another story