Neugestaltung der UX der mobilen App für Quotatis-Handwerker

Von Januar bis Dezember 2023 habe ich die vollständige Neugestaltung der Artisans Quotatis-Anwendung durchgeführt, in enger Zusammenarbeit mit den Teams Produkt, Technik, Daten und Business von Adeo. Als Senior Product Designer (UX/UI) habe ich die Leitung des Designsystems, die Benutzerforschung sichergestellt und am Produktmanagement teilgenommen.

Das Ziel: die Erfahrung der Partnerhandwerker von Quotatis zu vereinfachen, zu modernisieren und zu bereichern, innerhalb eines Adeo-Ökosystems (Leroy Merlin), das jede Woche von über 5000 Fachleuten in Frankreich genutzt wird.

Auswirkungen: -50 % der Einsatzzeit, +23 Punkte beim NPS, 82 % Adoptionsrate in drei Wochen.

Problem:

Zu Beginn des Jahres 2023 bot mir die Produktleiterin von Quotatis an, die Führung bei der Neugestaltung der mobilen Anwendung Artisans zu übernehmen.

Gemeinsam haben wir schnell das zentrale Problem des Projekts formuliert:

„Wie können wir Handwerkern Vertrauen und Effizienz bei der Nutzung der Quotatis-App zurückgeben, die schwerfällig, veraltet und visuell inkohärent geworden ist?“

Die Anwendung, die täglich von Tausenden von Handwerkern genutzt wird, um ihre Baustellen, Angebote und den Austausch mit Leroy Merlin-Kunden zu verwalten, spielte eine Schlüsselrolle im Adeo-Ökosystem, litt jedoch unter zahlreichen Nutzungshindernissen.

Die ersten Feststellungen, die aus Benutzerfeedback und internen Analysen hervorgingen, waren eindeutig:

• Ein fragmentierter Verlauf, der nie wirklich mobil-first gedacht wurde.

• Eine Vervielfachung der Bildschirme und redundante Interaktionen, die Verwirrung und Zeitverlust verursachen.

• Ein Produktivitätsverlust vor Ort, insbesondere bei den Reisen zwischen Baustellen.

• Wiederkehrendes Feedback, das langsame Reaktionen, mangelnde Klarheit in der Navigation und eine veraltete Benutzeroberfläche erwähnt hat.

• Eine signifikante Designverschuldung, die aus mehreren Jahren isolierter Iterationen und fortlaufender Anpassungen resultiert.

Über die Erfahrung hinaus stellte die Situation ein greifbares Geschäftsproblem dar: ein Rückgang der Zufriedenheit der Handwerker und eine Verringerung der Nutzung wichtiger Funktionen wie des Chats, der Erinnerungen oder der Angebotsverwaltung.

Diese Neugestaltung wurde somit zu einer strategischen Gelegenheit: neu über die Handwerkserfahrung nachzudenken, das Produkt zu modernisieren und eine Vertrauensbeziehung zu seinen Nutzern wiederherzustellen.

Bestandsaufnahme vor der Neugestaltung

1. Unvollständige digitale Verläufe: funktionale Mängel, die oft zu Sackgassen führen

2. Unstrukturierten Informationen

3. Kaum oder keine Hierarchie in den Aktionsbuttons

4. Veraltete grafische Richtlinien werden noch verwendet

5. Viele verschiedene Navigationskomponenten werden gleichzeitig verwendet

6. Keine industriell oder durchdacht organisierten Muster zur Gruppierung kontextueller Aktionen

7. Eine UX-Strategie, die schichtweise wie Bausteine aufgebaut wurde, bei der funktionale Elemente hinzugefügt wurden, ohne die Form in Frage zu stellen

8. Verwirrte Nutzung der App; Nutzer gehen in langen Transaktionen, großen Datenseiten und Fehlern bei der Verarbeitung von Informationen verloren

Hypothese

Wir haben die Hypothese aufgestellt, dass die Neugestaltung der Anwendung von den tatsächlichen Anwendungen der Handwerker vor Ort ausgehen sollte: eine mobile, schnelle Nutzung, oft in eingeschränkten Kontexten (Baustelle, Fahrt, Kundeninteraktionen). Durch die Fokussierung der Erfahrung auf diese Schlüsselsituationen und die Einführung einer visuellen und funktionalen Kohärenz durch ein modulares Designsystem konnten wir ihre Effizienz steigern und das Vertrauen in das Werkzeug wiederherstellen.

Aus UX-Perspektive bedeutete dies, das Produkt um drei wesentliche Nutzungskontexte zu strukturieren – das Management von Einsätzen, die Erstellung von Dokumenten wie dem Abschlussbericht und die Kundenverfolgung – und die kognitive Belastung durch eine bessere visuelle Hierarchie und einheitliche Muster zu reduzieren.

Aus Produkt-Perspektive vermuteten wir, dass eine flüssigere, vorhersehbare und besser organisierte Benutzeroberfläche zwangsläufig zu einem Anstieg des NPS, einer Reduzierung der Friktionen, die beim Support gemeldet werden, und einer regelmäßigerer Nutzung der Schlüssel-Funktionen führen würde.

Schließlich glauben wir aus der geschäftlichen Perspektive, dass die Vereinfachung kritischer Verläufe den Handwerkern zu schnellerer Ausführung und größerer Sicherheit bei der Nutzung verhelfen würde, was direkt dazu beitragen würde, ihre Zufriedenheit zu verbessern und ihre Bindung an das Quotatis-Netzwerk zu stärken.

Roadmap

Hier ist eine zusammenfassende Übersicht darüber, wie das Projekt im Laufe des Jahres verlief. Klicken Sie auf das Bild, um es zu vergrößern.

Lösung

Eine vollständige UX/UI-Neugestaltung basierend auf Feldforschung, schnellem Prototyping und enger Zusammenarbeit zwischen Design, Technik und Gewerbe.

Schlüsselphasen und -lieferobjekte:

a) Forschung & Benutzerverständnis

• Feldstudien mit Handwerkern durchgeführt (Île-de-France, Nord, Rhône). Studie über Handwerker und Digitales ansehen

• 6 Typ-Personas erstellt: „Der nomadische Handwerker“, „der Teammanager“, „der neue Teilnehmer“.

• Vollständige Kartierung des aktuellen Verlaufs (Service Blueprint).

• Identifizierung der "Pain Points" im Tunnel.

b) UI Design & Design System

• Erstellung eines modularen Designsystems basierend auf Tokens Montserrat + Quotatis-Paletten.

• Definition der Hauptkomponenten: Tasten, Karten, Formulare, Listen, Feedback.

• Visuelle Harmonisierung von mobil / web über eine zentrale Figma-Bibliothek.

• Dokumentation + Transfer an das Frontend (React + React Native).

c) Strukturierung & UX-Strategie

• Neugestaltung des Flows „Baustellenmanagement“ und „Kundenkommunikation“.

• Priorisierung nach Einfluss/Aufwand und Produktabstimmung durch Workshops (Design Studio + Crazy 8s).

• Definition eines einheitlichen Navigationsrahmens (unten anhaltende Navigation).

d) Technische Zusammenarbeit

• Wöchentliche Design-Entwicklungs-Workshops.

• Lieferung über Jira / Figma Inspect.

• POC Front auf den Modulen „Dashboard-Handwerker“ und „Benachrichtigungen“.

e) Prototyping & Validierung

• Interaktive Wireframes (Figma + Framer), die in 2 Zyklen mit echten Benutzern getestet wurden.

• Integration eines Offline-Modus + schneller Zugriff auf Kundenkarten.

• A/B-Tests zu den kontextuellen CTAs („Kunde kontaktieren“ / „Angebot hinzufügen“).

• Validierung über interne Berufssitzungen (Support, Produkt Ops, Technik).

UX-Workshops - Ideen- und Erfahrungsmapping mit dem Produkt-Team

Phase des frühen Prototyping

Design-Sprint von einer Woche, verwendetes Werkzeug: Framer für die Details der Interaktivität (damals bot Figma weniger Möglichkeiten, das ist jetzt nicht mehr der Fall).

Benutzertests, die intern für die erste Analyse der Auswirkungen der Neugestaltung der Navigation, Struktur, intelligente Auflistung der Einsätze, Neugestaltung von Einsatztagen durchgeführt wurden.

1 - Komplexität des Prototyps: vollständiger Benutzerverlauf der Handwerkerfahrung

2 - Interaktive Prototyp vollständig testbar

Elemente des Designsystems

1 - Variables Tokens für Branding-Farben und UI-System für SaaS

2 - Typografisches System: Größen, Abstände und Tokens

3 - Grundsystemkomponenten (Formulareingaben, Auswahlknöpfe, Kontrollkästchen, Mehrfachauswahl…)

4 - Typografisches System, SVG-Raster, Export optimierter Assets für Web und native Mobile

5 - Beispiele für Systemkomponenten (Benachrichtigungshinweise), Variabilisierung und Statusindikatoren für Einsätze

6 - Weitere Systemkomponenten, wiederverwendbare Muster (Desktop-Navigation, Mobil, Steppers…)

Bildschirme nach der Neugestaltung

1 - Nominaler Verlauf des Handwerkers vom Beginn bis zum Ende des Einsatzes (Erstellung des Abschlussberichts)

2 - Benachrichtigungszentrale, Hinzufügen von Granularität für die Präferenzen nach Art der Informationen, die dem Handwerker mitgeteilt werden

3 - Präsentation der Bildschirme nach der Neugestaltung

Ergebnisse und Erkenntnisse

Messbare Ergebnisse:

Wichtige Erkenntnisse:

• Die Bedeutung eines dauerhaften Designsystems in einem Multi-App-Kontext.

• Die Notwendigkeit einer Erfahrungs-Symmetrie zwischen Handwerkern und internen Beratern.

• Das Interesse, die UX-Schuld zu dokumentieren, um zukünftige Neugestaltungen zu priorisieren.

• Die positive Auswirkung einer Integration von Design + Technik + Gewerbe bereits in den frühen Phasen.

Fazit

Dieses Projekt stellte einen Wendepunkt in der UX-Reife der Quotatis-App dar: Wir sind von einem funktionalen, aber fragmentierten Produkt zu einer konsistenten, flüssigen und wertschätzenden mobilen Erfahrung für Handwerker übergegangen. Das technische Fundament der App wurde vollständig überarbeitet, um die Leistung zu verbessern, ohne jedoch die Logik der App zu ändern, um die bereits aktiven Benutzer auf der Plattform nicht zu verlieren, während wir den gewohnten Lieferzyklus der Entwickler beibehielten.

Die Struktur wurde optimiert und die Erfahrung verbessert, bis hin zu den Details von UI-Kit-Komponentenstatus und signalisieren neue Mikrointeraktionen jetzt die Qualität der App.

Ich habe meine Position als Designer-Builder gefestigt, die in der Lage ist, um eine Vision zu vereinen, mit Genauigkeit auszuführen und das Design im Geschäftswert zu verankern. Die Produktpräsentationen vor den Stakeholdern des Unternehmens alle gingen in die richtige Richtung. Der iterative Ansatz ermöglichte es mir, so viele konstruktive Rückmeldungen wie möglich zu sammeln. Es war eine bereichernde Produkterfahrung. Ich würde es wieder tun!