Das Ziel dieses Projekts war es, eine komplett neue Version der mobilen App von TrustYou zu starten, um den Nutzern eine insgesamt bessere Erfahrung zu bieten, indem das Erscheinungsbild an moderne Standards angepasst und die Geschwindigkeit und Leistung verbessert wurden. Das anfängliche Redesign umfasste eine neue Benutzeroberfläche und Navigation, wobei berücksichtigt wurde, dass die Produkt-Roadmap wahrscheinlich skaliert und in Zukunft zusätzliche Funktionen enthalten würde. Außerdem haben wir daran gearbeitet, ein besseres Event-Tracking zu implementieren, um Nutzungsdaten zu sammeln, mit denen wir das Produkt validieren und entscheiden können, wie es weiterentwickelt werden soll.
Aufgrund unserer bisherigen Erfahrung mit der Pflege von zwei nativen Apps und der Möglichkeit, alles von Grund auf neu zu gestalten und zu schreiben, hat sich das Entwicklerteam dafür entschieden, unsere neue mobile App mit React Native. Dadurch konnten wir schneller entwickeln, aber es gab auch ein paar Herausforderungen beim Design einer einzigen App, die mit den Standards und Mustern von Android und iOS kompatibel ist.
Phase 1: Den aktuellen Stand checken
Usability-Probleme erkennen und Feedback der Nutzer analysieren, um erste Produktspezifikationen festzulegen.
Identifizieren von Usability-Problemen
Bevor wir mit dem Redesign angefangen haben, haben wir die aktuelle Version der mobilen App getestet und analysiert, um zu sehen, wo es Probleme mit der Benutzerfreundlichkeit gibt, und erste Verbesserungsvorschläge zu machen. Die Probleme, die wir gefunden haben, haben die Nutzererfahrung und das Gesamtbild der App beeinträchtigt. Die kritischsten Probleme betrafen Zielgrößen, Navigationsmuster und visuelle Designelemente wie Layout, Lesbarkeit und Konsistenz. Bei dieser Analyse haben wir auch die Material Design Guidelines für Android, die Human Interaction Guidelines für iOS und Barrierefreiheitsmuster wie Zielbereiche und Daumenbereiche berücksichtigt.
Analyse des Feedback der Nutzer
Kurz bevor wir mit dem Projekt losgelegt haben, hat unser Customer Success Team eine Umfrage unter unseren Nutzern gemacht, um zu sehen, wie das Produkt gerade genutzt wird, wo es Probleme gibt und was man verbessern könnte oder welche wichtigen Funktionen noch fehlen. Die meisten Probleme, die die Umfrageteilnehmer angesprochen haben, waren die Leistung, irrelevante Daten und schlechte Benutzerfreundlichkeit. Dieses Feedback haben wir genutzt, um einige unserer ersten Produktspezifikationen zu verbessern und als Ausgangspunkt für eine gründlichere Nutzerforschung zu nehmen.
Phase 2: Ideen entwickeln & Prototypen bauen
Die ersten Ideen mit den Produkt- und Designteams checken, um einen Prototyp zu bauen, den man testen kann.
Skizzieren & Wireframing
Das Produktteam hat die gesammelten Daten und die bekannten Probleme bei der Benutzerfreundlichkeit angeschaut, um eine erste Reihe von Funktionen und Verbesserungen zu bestimmen, die angegangen werden mussten. Das war der erste Schritt, der dem Designteam geholfen hat, eine Hierarchie von Interaktionen und Navigationsmustern für die ganze Anwendung festzulegen.
Testbarer Prototyp
Nachdem wir ein paar Ideen durchgespielt und mit den Produkt- und Designteams besprochen hatten, haben wir einen Prototyp mit hoher Genauigkeit und Interaktionen mit niedriger Genauigkeit gemacht. Dafür haben wir Invision, weil wir die mobile App damit direkt auf Handys testen können. Mit dem Prototyp wollten wir sehen, ob die neue Version der mobilen App wirklich den Bedürfnissen und Erwartungen der Kunden entspricht. Durch das Testen des Prototyps konnten wir auch mehr Infos über andere Funktionen und Anwendungsfälle sammeln, die wir vielleicht übersehen hatten.
Phase 3: Testen der Benutzerfreundlichkeit und Interviews
Wir checken, wie benutzerfreundlich die neue App ist und wie sie aussieht, und schauen dabei auch auf Sachen wie Datenvisualisierung und Datenrelevanz.
Plan der Recherchekommunikation
Um Leute zu finden, die unsere Designs testen, haben wir uns mit dem Forschungsteam und anderen Abteilungen wie Customer Success und Key Account Management zusammengetan, um ein Mailchimp Kampagne, die wir an alle relevanten Accounts und Nutzer verteilt haben, die Teil unseres Nutzerforschungspools waren. Diese Kampagne enthielt eine kurze Erklärung der Recherche-Initiative und einen Calendly-Link mit verfügbaren Terminen zur Planung einer Sitzung. Unser Plan war es, mindestens fünf Kunden über die vordefinierten Zeitfenster in Calendly zu rekrutieren, da Studien zeigen Tests mit fünf Leuten decken normalerweise 85% der Probleme bei der Benutzerfreundlichkeit auf.
Methodik
Die Recherche hat Folgendes gemacht: Kontextuelle Untersuchung und Usability-Tests von etwa 40 Minuten Dauer, die aus der Ferne mit der sogenannten “Hug The Laptop”-Methode durchgeführt wurden. Diese Methode hat unser Designteam von Hannah Pileggi, Leiter der Recherche bei Duolingo, bei einem der Smashing-Konferenzen, Dabei muss der Testnutzer seinen Laptop drehen, um den Bildschirm seines Handys über die Webcam des Laptops zu übertragen.
Fotos und Video von einer Demo-Session zum Thema „Hug the Laptop“ (Umarm den Laptop).
Wir haben ein erstes Interviewskript und eine Reihe von Aufgaben festgelegt, die wir mit unseren Nutzern testen wollten. Das Ganze wurde dann mit Hilfe des Forschungsteams weiter verbessert. Das Skript und die Aufgaben wurden in verschiedene Kategorien eingeteilt, damit wir später mit den gesammelten Daten eine thematische Analyse machen konnten. Außerdem haben wir eine Reihe von Hypothesen und Annahmen aufgestellt, die wir überprüfen wollten.
Phase 4: Ergebnisse analysieren und teilen
Die wichtigsten Ergebnisse und Einblicke aus der Recherche analysieren, dokumentieren und mit den relevanten Interessengruppen teilen.
Thematische Analyse
Die Analyse der qualitativen Daten wurde mit einem Thematische Analysemethode um die wichtigsten Themen und Muster aus den Interviews herauszufinden. So konnten wir die wichtigsten Einblicke und Ergebnisse der Recherche einordnen und bestimmen und unsere Hypothesen bestätigen oder widerlegen.
Die Hypothesen waren Annahmen zu visuellem Design, Benutzerfreundlichkeit und Datenvisualisierung, die im Interviewskript enthalten waren. Hier sind die wichtigsten davon, zusammen mit den Schlussfolgerungen, die es uns ermöglichten, sie entweder zu bestätigen oder zu widerlegen:
✅ Bestätigt: Die Verwendung von Kacheln in voller Breite im Dashboard sorgt für Einheitlichkeit und ermöglicht die Anzeige von mehr Infos, wodurch die Lesbarkeit für verschiedene Sprachen gewährleistet ist.
Alle Teilnehmer fanden das neue Layout super und meinten, dass die Infos jetzt viel klarer zu verstehen und zu lesen sind.
❌ Widerlegt: Nutzer könnten sich dafür interessieren, welche Änderungen in der neuen Version gemacht wurden, indem sie nach dem Einloggen den Bildschirm ”Was ist neu?” lesen:
Die meisten Teilnehmer haben den Intro-Bildschirm, auf dem die Updates erklärt wurden, einfach übersprungen oder ignoriert. Nur ein kleiner Teil von ihnen hat Interesse gezeigt, aber nur die Titel überflogen.
✅ Bestätigt: Ein anderer Hintergrund und eine andere Schriftstärke reichen aus, um neue Bewertungen von bereits gelesenen zu unterscheiden.
Die meisten Teilnehmer haben den Unterschied zwischen gelesenen und ungelesenen Bewertungen verstanden und gesagt, dass sie damit schon vertraut sind, weil sie ähnliche Muster von ihren E-Mail-Anbietern kennen.
❌ Widerlegt: Das Ein- und Ausschalten der Hervorhebung der Zufriedenheit macht die Details einer Bewertung besser lesbar und übersichtlicher.
Alle Teilnehmer sagten, dass sie diese Funktion nicht so toll fanden, weil sie ihrer Meinung nach keinen Mehrwert für ihre Erfahrung brachte und keine weiteren Interaktionen ermöglichte.
➖ Mehr Infos gebraucht: Unternehmensnutzer können ganz einfach im Menü auf das Caret neben dem Namen ihres Standardhotels tippen, um Hotels zu wechseln und zu suchen.
Für diese spezielle Annahme konnten wir nicht genug Infos sammeln, um sie zu überprüfen. Trotzdem haben wir uns entschieden, die App mit dem vorgeschlagenen Design zu starten, die Nutzungsdaten zu analysieren und mehr Feedback zu sammeln, um eine bessere Entscheidung zu treffen.
Erfolgsraten bei Aufgaben & Analyse der Zufriedenheit
Obwohl der Fokus der Recherche auf der Sammlung qualitativer Infos lag, konnten auch Messgrößen festgelegt werden, um die Erfolgsquote der Aufgaben sowie die wahrgenommene Benutzerfreundlichkeit und Zufriedenheit zu messen. Dank eines automatisierten Prozesses zur Zufriedenheit, den unsere Recherche bietet, Schwalbenschwanz, Da wir das machen durften, konnten wir anhand des Feedbacks unserer Nutzer auch eine allgemeine Bilanz zwischen positiven und negativen Zufriedenheiten ziehen.
Phase 5: Umsetzung der Ergebnisse
Die Forschungsergebnisse nutzen, um die aktuellen Designs zu verbessern, und die wichtigsten Einblicke in die Produktentwicklung einfließen lassen.
Produkt-Roadmap und Entwicklung
Die Ergebnisse der Nutzer-Recherche haben uns nützliche Einblicke gegeben, die wir für die Priorisierung unserer Roadmap genutzt haben, weil der am häufigsten genannte Schmerzpunkt auf fehlende Funktionen zurückging.
Die Genauigkeit und Konsistenz der Daten war das zweite Thema auf der Liste, weil es bei der alten Version oft Probleme gab und die meisten unserer Nutzer sich darüber Gedanken machten. Unsere Teilnehmer fanden es wichtig, dass die Infos und das Design auf dem Desktop und auf Mobilgeräten gleich sind. Diese Erkenntnis hat uns geholfen, uns bei der Entwicklung darauf zu konzentrieren, dass unsere Daten immer genau und transparent sind und dass das Design und die Erfahrung auf allen unseren Plattformen einheitlicher werden.
Verbesserungen der Benutzerfreundlichkeit
Nachdem wir unsere ersten Entwürfe getestet hatten, haben wir ein paar wichtige Probleme bei der Benutzerfreundlichkeit entdeckt, die hauptsächlich mit den Navigationsmustern und unnatürlichen Gesten zu tun hatten. Eine der wichtigsten Erkenntnisse aus dieser Phase war aber, dass wir verstanden haben, wie die Komplexität unserer Daten und die Art und Weise, wie wir sie angezeigt haben, sich auf die kognitive Belastung unserer Nutzer. Seitdem ist es eines unserer Hauptziele, die Art und Weise zu verbessern, wie unsere Daten dargestellt und visualisiert werden.
Wiederholen und verbessern
Wir haben die Erfahrung der Nutzer durch regelmäßige Tests und die Überprüfung mit quantitativen Daten immer weiter verbessert.
Unmoderierte Tests & quantitative Daten
Seit wir die erste Version dieses Redesigns gestartet haben, probieren wir verschiedene Methoden der Recherche und -kanäle aus, um Einblicke zu gewinnen, die wir mit den Nutzungsdaten aus den Events, die wir jetzt verfolgen, abgleichen können. Wir machen oft schnelle und kurze Tests über UsabilityHub, wodurch wir viel schneller und kostengünstiger Feedback bekommen und unsere Ideen überprüfen können.
Designsystem
Nachdem wir die neue Version der mobilen App mit neuen Features, Navigationsmustern und Interaktionen erfolgreich gestartet haben, haben wir beschlossen, diese in unser Designsystem zu integrieren, damit wir auf allen unseren Plattformen einheitlich bleiben. Zusammen mit den Design- und Entwicklerteams arbeiten wir daran, TrustYou Brew ein einheitliches Designsystem für alle unsere Produkte und Erfahrungen.
Schlussfolgerungen
Nachdem wir die neue Version der mobilen App rausgebracht haben, haben wir uns überlegt, unseren Prozess und unsere Erkenntnisse zu reflektieren und unsere Erfahrung beim Design mobiler Produkte zu dokumentieren.
Das Design einer mobilen Erfahrung war ein Prozess des ständigen Lernens, Testens und Iterierens. Es ist ein schnelllebiges Umfeld, in dem oft neue Muster und Interaktionen auftauchen. Seit Beginn des Projekts haben wir versucht, Veränderungen während des gesamten Prozesses anzunehmen, unsere Ideen ständig zu hinterfragen und zu überprüfen, was im Gegenzug die Lieferzeit für Verbesserungen und neue Funktionen verkürzt und die Nutzererfahrung auf der gesamten Plattform einheitlicher gemacht hat. Dieser schnelle und agile Rhythmus hat es uns ermöglicht, neue Konzepte einfach zu testen, die wir dann auch in unsere Desktop-Produkte einfließen lassen können.
Wie schon gesagt, war es echt schwierig, einen gemeinsamen Nenner für Muster, Gesten und sogar Komponenten zu finden, die sowohl für iOS- als auch für Android-Geräte passen. Normalerweise versuchen wir, keine bestimmte Lösung von einer Plattform zu nehmen, es sei denn, es ist der beste Weg, um eine optimale Nutzererfahrung zu bieten.
Wenn wir was für viele Plattformen machen, die meistens ziemlich unterschiedlich sind, ist es für uns echt wichtig, die Navigationsmuster festzulegen. Wie können meine Nutzer zwischen Inhalten und Aktivitäten hin und her springen? Welche Elemente und Komponenten nutzen wir, um die Hierarchie und Navigation zu zeigen? Unserer Erfahrung nach sind das einige der Grundprinzipien, die du verstehen und im Team teilen solltest, um ein einfaches, aber einheitliches mobiles Erlebnis zu schaffen, das nicht an ein bestimmtes System gebunden ist, sondern den Best Practices folgt.
