Chroma Experience

tesa FLOW — Digitale Vertriebsunterstützung und Preisfindung

Für den global agierenden Anbieter von Klebelösungen tesa haben wir im Rahmen eines Proof-of-Concept-Projektes eine webbasierte Lösung entworfen, die die Vertriebsmitarbeiter bei der Durchführung typischer wiederkehrender Tätigkeiten mit geschäftlichen Informationen und produktspezifischen Auskünften unterstützt.

So konnte tesa belastbar evaluieren, dass die spezifischen Geschäftsziele durch den Einsatz dieses neuen, sehr erfolgreichen Werkzeugs besser zu erreichen sein werden.

Menschen in einem futuristischen Raum

Auftraggeber

tesa SE – A Beiersdorf Company

Geschäftsfelder

Weltweit führender Hersteller selbstklebender Produkt- und Systemlösungen für Industrie, Handwerker und Endverbraucher

Herausforderung

Bereitstellung von Geschäfts-, Produkt- und Preisinformationen zur Mitarbeiterunterstützung in typischen Vertriebs- und Auskunftssituationen

Lösung

Erstellung einer digitalen Anwendung zur Vermittlung von Kundeninformationen, Produktdaten und Preisauskünften; Konzeption und Realisierung einer Progressive Web App (PWA) für mobile Endgeräte zur Bereitstellung von nutzerspezifischen Informationen und Diensten; Integration von Backend-Services in die IT-Infrastruktur

Aktivitäten

Beratung, Architektur, Business Intelligence, UX-Design, UI-Design, Backend-Entwicklung, Entwicklung PWA, PoC-Betrieb

Technologien

Propeller Web-Application-Framework, PostgreSQL, StencilJs, IndexedDb, Web Components

Projektzusammenfassung

Herausforderung

Auf Basis der von tesa im Vorfeld erarbeiteten Zielformulierungen und daraus resultierenden Hypothesen in Bezug auf den Nutzen des zu entwickelnden Produktes wurden gemeinsam Funktionalitäten definiert, die die Vertriebsmitarbeiter der verschiedenen Sales Forces in die Lage versetzen, in typischen wiederkehrenden Szenarien besser informiert und auskunftsfähig zu sein. Dabei wurden die geplanten Funktionalitäten direkt einzelnen Hypothesen zugeordnet, um den Nutzen des Produktes nach Abschluss der PoC-Phase objektiv bewerten zu können.

Vorgehen, Aktivitäten und Lösung

Gemeinsam mit tesa haben wir die einzelnen Features geplant und uns dabei die fachlichen Grundlagen der verschiedenen Projektaspekte – wie Geschäftsfelder, Wirtschaftsdaten, Vertriebsstruktur und Preisfindung – erarbeitet. Von Anfang an stand uns eine repräsentative Gruppe von Vertriebsmitarbeitern aus den verschiedenen Geschäftsfeldern zur Seite, um die vielfältigen Bedürfnisse und Herausforderungen der Nutzer verstehen zu können.

Nach einem umfangreichen Recherche-, Interview- und Konzeptionsprozess konnte das nutzerzentrierte Produktdesign definiert und detailliert in ein UX-Konzept überführt werden. Gemäß den UX-Überlegungen wurde unter Berücksichtigung der Brand-Guidelines eine Bedienoberfläche entworfen. Diese wurde über mehrere Iterationen, in denen fachliche Anpassungen vorgenommen sowie Rückmeldungen der Testgruppe umgesetzt wurden, so weit verfeinert, dass sich ein umfangreiches Set von UI-Komponenten ableiten ließ.

Parallel wurde in einem Rapid-Prototyping-Prozess eine Backend-Lösung realisiert, die dazu in der Lage ist, Daten aus den weiteren Systemen, wie SAP oder MS Dynamics, zu integrieren und zu interpretieren. Auch die Authentifizierung und Autorisierung von Anwendern wurde mithilfe eines Backend-Services realisiert. So konnte in kurzer Zeit für die einzelnen Anwendungsfälle eine Datenbasis gewonnen und nutzerspezifisch zur Verfügung gestellt werden.

Um den erweiterten Anforderungen – wie Verfügbarkeit, Performanz und Offline-Betrieb – gerecht zu werden, wurde das Frontend als Progressive Web App (PWA) ausgefertigt und mittels einer RESTful API in die Gesamtarchitektur integriert. Um die immensen Datenmengen clientseitig zu persistieren, wurde eine spezialisierte Abstraktionsschicht über IndexedDb implementiert.

Ergebnis

Der Proof-of-Concept war ein großer Erfolg für tesa wie für die Vertriebsmitarbeiter. Die Lösung erfüllt alle wesentlichen Hypothesen und bietet messbare Vorteile gegenüber der Vertriebstätigkeit ohne diese Unterstützung.

Time to market

3 Monate

PoC-Phase

6 Wochen

Reduktion des administrativen Aufwands

16 %

Weiterempfehlungsrate

8,8 von 10

Mann hält Tablet und hat Tesa FLOW, ein Projekt von Chroma Experience (Chroma X), geöffnet
free-ipad-mockup.jpg
Tesa FLOW, ein Projekt von Chroma Experience (Chroma X), auf dem Tablet
Carousel Wide 1.jpg
Michael vom Sondern
Michael vom Sondern Head of Digital Development Office, tesa SE

Der realisierte digitale Vertriebsassistent gibt Vertriebsmitarbeitern und Führungskräften superschnellen Zugriff auf alle relevanten Informationen und Hauptprozesse – bereits als Prototyp. Das ist aktives Sales Enablement, das den Umsatz steigert.

Herausforderung Fachlichkeit

Noch bevor wir uns mit den konkreten Projektherausforderungen beschäftigen konnten, waren wir damit konfrontiert, uns den fachlichen Hintergrund – also die Geschäftsfelder, Vertriebsstrukturen und insbesondere Wirtschaftsdaten und Preismodelle – als Grundlage für die weitere Projektaktivität zu erarbeiten. Insbesondere die Vorbereitungen auf das Thema Business Intelligence – also das Verstehen und Interpretieren von Wirtschaftsdaten – waren äußerst relevant, um die existierende Datenbasis analysieren und die relevanten Informationen ableiten zu können. Dabei standen sowohl die technischen Systeme als auch die Struktur der Daten sowie deren Bedeutung im Mittelpunkt.

Ermittlung von Nutzeranforderungen

Durch die hervorragende Vorarbeit von tesa stand uns von Beginn an eine repräsentative Anwendergruppe zur Seite, deren Mitglieder unser Bild mit fachlichen Details und den jeweils eigenen Bedürfnissen und Anforderungen vervollständigt haben. In mehreren Interviews haben wir zu Projektbeginn die Ausgangslage beleuchtet, um die je nach Geschäftsbereich unterschiedlichen Herausforderungen zu verstehen. Mit dem so entstandenen Bedarfskatalog wurde gemeinsam priorisiert und definiert, welche Aspekte Teil des PoC-Projektes werden sollten.

User Persona für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
User Persona Industrie
Persona für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
User Persona Retail

Business Goals

Auch die geschäftlichen Ziele von tesa fanden wir bestens vorbereitet: Von Beginn an existierte ein Hypothesen-Framework, das den erhofften Nutzen der Entwicklung auf mehrere Einzelaspekte heruntergebrochen definierte. Auch wurden Annahmen getroffen, welche Produktfunktionen geeignet erschienen, um die einzelnen Hypothesen belegen zu können. So konnten wir sehr zielführend analysieren, wie sich die geschäftlichen Ziele und die Nutzeranforderungen zusammenführen ließen. Auf diese Weise entstanden ein klares Bild und eine objektive Grundlage, um alle Entscheidungen über den gesamten Projektverlauf objektiv bewerten zu können.

Duales Vorgehen

Um schnellstmöglichen Fortschritt in einem Projekt zu erzielen, versuchen wir, wann immer möglich, parallel an verschiedenen Kontexten eines Produktes zu arbeiten. So hat sich ein Teil des Teams damit beschäftigt, ein ausgereiftes Nutzungskonzept zu erstellen. Es wurden Use Cases definiert, Interaction-Design-Entscheidungen getroffen und diese in Form von User Flows und Wireframes aufbereitet.

Userflow für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
User Flow
Wireframe für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Wireframes

Parallel dazu wurde das technische Fundament gelegt, um die funktionale und technische Basis zeitnah zur Verfügung zu stellen. So wurden einerseits das Backend-Fundament gelegt und die nicht-fachlichen Dienste wie Autorisierung und Authentifizierung implementiert. Auch eine PWA-Hülle wurde so weit präpariert, dass sich die einzelnen Anwendungsfälle später direkt auf dieser Basis abbilden lassen. Die beiden Implementierungen wurden im Anschluss mittels jeweils einer RESTful-API-Implementierung integriert.

Wireframes auf Papier gezeichnet
Artikel

What the frame – Wireframes

Mehr erfahren

Business Intelligence

Im Rahmen der Datenanalyse und -aufbereitung galt es einen technischen Prozess zu definieren und zu implementieren, der die Bestandsdaten, die aus verschiedenen Quellen wie SAP oder MS Dynamics konsumiert werden, so verwertet und persistiert, dass sie die Informationen abwerfen, die in den einzelnen Anwendungsfällen benötigt werden. Zu diesem Zweck wurden die Daten fachlich separiert – z.B. Produktdaten und Kundendaten – und in einem Datalake abgelegt, um siloartige Strukturen zu vermeiden. Abweichend vom üblichen Vorgehen – nämlich der Ablage von Rohdaten – konnten wir aufgrund des eingeschränkten Projektumfangs und der begrenzten Lebensdauer des Produktes bereits aufbereitete und nur die benötigten Daten persistieren. So wurden weitere Aufwände in der technischen Datenanalyse und -aufbereitung drastisch minimiert.

Um aus den Daten die jeweils benötigten Informationen gewinnen zu können, wurden weiche Beziehungen zwischen den Datenstrukturen – z.B. Kunde zu Umsatz zu Produkt – auch denen aus unterschiedlichen Quellen gebildet. Durch die Vermeidung von festen Beziehungen entstehen keine weiteren Abhängigkeiten zwischen den Datensätzen, die die Verarbeitung und Anreicherung der Informationen limitiert hätten.

tesa Sales Manager Industrial Markets

Relevante Daten waren sofort verfügbar, der Kunde hatte einen Eindruck von einer sehr effizienten Arbeitsweise bei tesa.

Interface Design

Um den Interaction-Design-Überlegungen Rechnung zu tragen, wurde auf Basis der UX-Design-Ergebnisse eine Bedienoberfläche ausgearbeitet, die sich in erster Linie auf den Einsatz auf Tablets konzentriert. Natürlich wurde das Thema Responsivität berücksichtigt, um eine hochwertige Nutzung auf größeren Displays zu gewährleisten.

Um die Entwicklung mit den Anwendern evaluieren zu können, haben wir die Bedienoberflächen ebenfalls nach Anwendungsfällen strukturiert erarbeitet und in einfachen Prototypen zur Verfügung gestellt. So konnten wir während des Projektverlaufs mehrere Nutzertests durchführen und die Ergebnisse direkt in die Design-Phase einfließen lassen.

Tabletansicht von Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Bedienoberflächen – Dashboard und Authentifizierung
Kundenansicht in Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Bedienoberflächen – Kunden und Niederlassungen
Screenshots aus Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Bedienoberflächen – Produkte und Umsatzauswertung

Die einzelnen Design-Komponenten, die während des Design-Prozesses entstanden, haben wir nach jeder Iteration oder nach der Fertigstellung eines Anwendungsfalls in eine Bibliothek zurückfließen lassen, um diese als Ressourcen in den weiteren Schritten einsetzen zu können. So kann einerseits in einem größeren Team gearbeitet und andererseits kann ein konsistentes Design übergreifend garantiert werden.

Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design-Komponenten – Ressourcen
Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design-Komponenten – Komponenten
Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design-Komponenten – Kompositionen
Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design-Komponenten – Anwendung

Progressive Web App

Das Frontend haben wir als Progressive Web App (PWA) umgesetzt, da der Einsatz sowohl den Umgang mit erheblichen Mengen an Geschäftsdaten als auch deren Verfügbarkeit im Offline-Modus erfordert.

Die gesamte Anwendung wurde auf Basis von Web Components (Custom Elements) mithilfe von StencilJs typsicher realisiert. Durch den Verzicht auf den Einsatz eines Frontend-Frameworks wie Angular oder React konnte ein schlankes und äußerst performantes Ergebnis erzielt werden, was dem Nutzungserlebnis sehr zugutekommt. Die Renderperformance – insbesondere von langen Listen und umfangreichen Datensätzen – wurde seitens der Nutzerschaft als echter Pluspunkt bewertet.

Um die Geschäftsdaten clientseitig vorzuhalten, haben wir eine umfangreiche, streng getypte und asynchrone Abstraktionsschicht zwischen die Datensynchronisierung auf Basis von RESTful JSON und die Persistenz mittels Indexed Database API (IndexedDb) implementiert und integriert. So konnten wir die teilweise zur initialen Synchronisierung benötigten über 25.000 Datensätze innerhalb von wenigen Minuten übertragen und speichern. Die Abfrage der vorgehaltenen Daten konnte dann durch eine geschickte Indexierung und Object-Pooling jeweils in wenigen Millisekunden erfolgen. Auch die Integration von Binärdaten ließ sich reibungslos realisieren.

Datenmenge JS

< 200 kB

First Contentful Paint

~200 ms

Time to Interactive

< 2 s

In der Web-Component-Architektur wurden sowohl die View-Controller als auch alle einzelnen Frontend-UI-Komponenten, die im Rahmen des UI-Prozesses definiert wurden, implementiert. So wurde ein nahtloser und stringenter Übergang zwischen Interface-Design und Frontend-Engineering sichergestellt. Jede Entität der Design-Komponenten-Bibliothek hat eine Entsprechung in der Frontend-Komponenten-Bibliothek.

Um in kurzen Zyklen Anpassungen und Erweiterungen behandeln zu können, wurde ein einfacher Integrations- und Verteilungs-Automatismus auf Basis von GitLab CI/CD umgesetzt. So konnten wir im Zuge der Entwicklung regelmäßige Abstimmungen mit den Fachabteilungen wie den Anwendern realisieren.

Nutzungsanalyse

Um manche der Business-Hypothesen belegen zu können, sind Einblicke in die Nutzung der Anwendung erforderlich, die sich zu einem späteren Zeitpunkt auswerten lassen. Zu diesem Zweck wurden ungefähr 50 Nutzungsereignisse definiert, die zusammen mit deren Ereignisdaten pseudonymisiert getrackt werden. Diese Ereignisse erlauben belastbare Rückschlüsse auf den Umgang mit den verschiedenen Produktfunktionen.

Dashboard mit Metriken zu verschiedenen Kennzahlen
Artikel

Ist User Experience messbar?

Mehr erfahren

Begleitung PoC-Betrieb

Auch im Betrieb während der sechswöchigen PoC-Phase wurden in kurzen Zyklen Fehlerbehebungen und Erweiterungen vorgenommen und jeweils in kürzester Zeit bereitgestellt, um auch in dieser kurzen Nutzungsphase möglichst belastbare Nutzungsdaten und Rückmeldungen zu erhalten. Auch die Kommunikation mit den Anwendern wurde noch einmal intensiviert.

Gerrit Begalke
Gerrit Begalke Product Owner, tesa SE

Wir haben einen digitalen Sales-Assistant-Prototypen realisiert, der wegweisend ist. Chroma Experience war hierbei mit exzellenter Fachkompetenz, großer Agilität und sehr lösungsorientierter Zusammenarbeit der optimale Partner an unserer Seite.

Ergebnis

Um in so kurzer Zeit ein Produkt zu entwerfen und als solide Implementierung zur Verfügung zu stellen sowie nach nur sechs Wochen dessen Nutzung bewerten zu können, muss einiges zusammenpassen. Ein hervorragend vorbereiteter Auftraggeber und eine aufgeschlossene und motivierte Testgruppe haben ein erstklassiges Ergebnis ermöglicht. Die Lösung optimiert für tesa entscheidende Vertriebsprozesse, reduziert administrativen Aufwand, integriert die Vertriebsmitarbeiter und trägt aktiv zur Erreichung der Geschäftsziele bei.

Meeting mit Tablets am Tisch
Projektmanagement
Paul Lewandowski
Requirements Engineering, UX-Research
Martin Brecht-Precht, Florian Köppe
Design-Lead
Martin Brecht-Precht
Technologie-Lead, Architektur
Michael Seelisch
UX-Design
Florian Köppe
Backend-Entwicklung
Andrius Baliutis
UI-Design
Florian Köppe, Martin Brecht-Precht
Frontend-Entwicklung
Michael Seelisch

Nächstes Projekt

Tragfläche eines Lufthansa-Flugzeugs in Chroma Experience (Chroma X) Case Study
Independent Aircraft Modifier Alliance Beratung ⟶ UX-Design ⟶ UI-Design ⟶ Frontend-Entwicklung

Independent Aircraft Modifier Alliance — Plattform für zertifizierte Lösungen in der zivilen Luftfahrt

Projekt ansehen