Chroma Experience

tesa FLOW — Digital sales support and pricing

For tesa, a global provider of adhesive solutions, we designed a web-based solution as part of a proof-of-concept project that supports sales staff in performing typical recurring activities with business information and product-specific information.

In this way, tesa was able to robustly evaluate that its specific business goals would be better achieved by using this new, highly successful tool.

Menschen in einem futuristischen Raum


tesa SE – A Beiersdorf Company

Business areas

Leading global manufacturer of self-adhesive product and system solutions for industry, craftsmen and end consumers


Provision of business, product and price information to support employees in typical sales and information situations


Creation of a digital application for communicating customer information, product data and price information; design and implementation of a Progressive Web App (PWA) for mobile devices to provide user-specific information and services; integration of backend services into the IT infrastructure


Consulting, Architecture, Business Intelligence, UX Design, UI Design, Backend Development, PWA Development, PoC Operation


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

Project Summary


On the basis of the objectives formulated by tesa in advance and the resulting hypotheses regarding the benefits of the product to be developed, functionalities were jointly defined which enable sales employees in the various sales forces to be better informed and able to provide information in typical recurring scenarios. The planned functionalities were directly assigned to individual hypotheses in order to be able to objectively evaluate the benefits of the product after the PoC phase had been completed.

Approach, activities and solution

Together with tesa, we planned the individual features and developed the technical basis for the various aspects of the project - such as business areas, economic data, sales structure, and pricing. From the very beginning, we were supported by a representative group of sales employees from the various business areas in order to understand the diverse needs and challenges of the users.

After an extensive research, interview and conceptualization process, the user-centric product design was defined and translated in detail into a UX concept. According to the UX considerations, a user interface was designed taking into account the brand guidelines. This was refined over several iterations, in which technical adjustments were made and feedback from the test group was implemented, to such an extent that a comprehensive set of UI components could be derived.

In parallel, a backend solution was implemented in a rapid prototyping process that is capable of integrating and interpreting data from other systems, such as SAP or MS Dynamics. The authentication and authorization of users was also implemented with the help of a backend service. In this way, it was possible to obtain a database for the individual use cases in a short period of time and make it available on a user-specific basis.

In order to meet the extended requirements - such as availability, performance and offline operation - the front end was designed as a Progressive Web App (PWA) and integrated into the overall architecture using a RESTful API. To persist the immense amounts of data on the client side, a specialized abstraction layer was implemented via IndexedDb.


The proof-of-concept was a great success for tesa as well as for the sales staff. The solution fulfills all key hypotheses and offers measurable advantages over sales activities without this support.

Time to market

3 months


6 weeks

Reduction of the administrative effort

16 %

Referral rate

8,8 out of 10

Mann hält Tablet und hat Tesa FLOW, ein Projekt von Chroma Experience (Chroma X), geöffnet
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

The realized digital sales assistant gives sales staff and managers a super-fast access to all relevant information and main processes – already as a prototype. This is active sales enablement that increases sales.

Challenge of professionalism

Even before we were able to deal with the concrete project challenges, we were confronted with the task of developing the technical background - i.e., the business areas, sales structures and in particular, economic data and pricing models - as a basis for further project activity. In particular, the preparations for the topic of business intelligence - i.e. understanding and interpreting economic data - were extremely relevant in order to be able to analyze the existing database and derive the relevant information. The focus was on both the technical systems and the structure of the data as well as their meaning.

Identification of user requirements

Thanks to tesa's excellent preparatory work, we had a representative user group at our side right from the start, whose members completed our picture with technical details and their own needs and requirements in each case. In several interviews at the start of the project, we examined the initial situation in order to understand the different challenges depending on the business area. The resulting requirements catalog was used to jointly prioritize and define which aspects should become part of the PoC project.

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

Business Goals

We also found tesa's business goals well-prepared: From the beginning, a hypothesis framework existed that defined the hoped-for benefits of the development broken down into several individual aspects. Assumptions were also made as to which product functions appeared suitable for proving the individual hypotheses. This allowed us to analyze in a very targeted manner how the business goals and the user requirements could be brought together. In this way, a clear picture emerged and an objective basis was created for objectively evaluating all decisions over the entire course of the project.

Dual approach

In order to achieve the fastest possible progress in a project, we try to work on different contexts of a product in parallel whenever possible. For example, part of the team worked on creating a mature usage concept. Use cases were defined, interaction design decisions were made, and these were prepared in the form of user flows and Wireframes.

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)

At the same time, the technical foundation was laid to provide the functional and technical basis in a timely manner. On the one hand, the backend foundation was laid and the non-functional services such as authorization and authentication were implemented. A PWA shell was also prepared to such an extent that the individual use cases could later be mapped directly on this basis. The two implementations were then each integrated using a RESTful API implementation.


What the frame – Wireframes

Learn more

Business Intelligence

As part of the data analysis and preparation, the task was to define and implement a technical process that utilizes and persists the inventory data consumed from various sources such as SAP or MS Dynamics in such a way that it yields the information required in the individual use cases. For this purpose, the data was separated by subject - e.g., product data and customer data - and stored in a data lake to avoid silo-like structures. Deviating from the usual procedure - namely the storage of raw data - we were able to persist already prepared data and only the required data due to the limited scope of the project and the limited lifetime of the product. This drastically minimized further efforts in technical data analysis and preparation.

In order to be able to extract the required information from the data in each case, weiche Beziehungen were formed between the data structures - e.g. customer to sales to product - even those from different sources. By avoiding fixed relationships, no further dependencies arise between the data sets that would have limited the processing and enrichment of the information.

tesa Sales Manager Industrial Markets

Relevant data was immediately available, and the customer had an impression of a very efficient way of working at tesa.

Interface Design

In order to take the interaction design considerations into account, a user interface was developed based on the UX design results, which primarily focuses on use on tablets. Of course, the issue of responsiveness was taken into account to ensure high-quality use on larger displays.

In order to be able to evaluate the development with users, we also worked out the user interfaces structured according to use cases and made them available in simple Prototypen. This allowed us to conduct several user tests during the course of the project and incorporate the results directly into the design phase.

Tabletansicht von Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
User interfaces - dashboard and authentication
Kundenansicht in Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
User interfaces - customers and branches
Screenshots aus Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
User interfaces - products and sales analysis

We fed the individual design components created during the design process back into a library after each iteration or after completion of a use case in order to be able to use them as resources in the further steps. On the one hand, this allows us to work in a larger team and, on the other hand, guarantees a konsistentes Design across the board.

Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design components - Resources
Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design components - Components
Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design components - Compositions
Library für Tesa FLOW, ein Projekt von Chroma Experience (Chroma X)
Design components - Application

Progressive Web App

We implemented the frontend as a Progressive Web App (PWA), as the deployment requires handling significant amounts of business data as well as its availability in offline mode.

The entire application was implemented in a type-safe manner based on Web Components (Custom Elements) using StencilJs. By not using a front-end framework such as Angular or React, it was possible to achieve a lean and extremely performant result, which greatly benefits the user experience. The render performance - especially of long lists and extensive data sets - was rated as a real plus point by the user community.

To hold the business data client-side, we implemented and integrated an extensive, strictly typed and asynchronous abstraction layer between the data synchronization based on RESTful JSON and persistence using Indexed Database API (IndexedDb). This allowed us to transfer and store over 25,000 records, some of which were required for initial synchronization, within a few minutes. The retrieval of the held data could then be done in a few milliseconds each by clever indexing and Object-Pooling. The integration of binary data could also be realized smoothly.

Datenmenge JS

< 200 kB

First Contentful Paint

~200 ms

Time to Interactive

< 2 s

Both the view controllers and all the individual frontend UI components defined as part of the UI process were implemented in the web component architecture. This ensured a seamless and stringent transition between interface design and front-end engineering. Each entity in the design component library has a counterpart in the frontend component library.

To be able to handle customizations and extensions in short cycles, a simple integration and deployment automation based on GitLab CI/CD was implemented. In this way, we were able to realize regular coordination with the specialist departments as well as the users in the course of the development.

Usage analysis

To be able to prove some of the business hypotheses, insights into the usage of the application are required, which can be auswerten. For this purpose, approximately 50 usage events were defined, which are tracked pseudonymously together with their event data. These events allow robust conclusions to be drawn about the use of the various product functions.


Can user experience be measured?

Learn more

Accompaniment PoC operation

During the six-week PoC phase, bug fixes and enhancements were also made in short cycles and made available in the shortest possible time in order to obtain the most reliable usage data and feedback possible during this short usage phase. Communication with users was also intensified once again.

Gerrit Begalke
Gerrit Begalke Product Owner, tesa SE

We have realized a digital sales assistant prototype that is groundbreaking. Chroma Experience was the optimal partner at our side with excellent expertise, great agility and very solution-oriented collaboration.


In order to design a product in such a short time and make it available as a solid implementation, as well as to be able to evaluate its use after only six weeks, a lot of things have to fit together. An excellently prepared client and an open-minded and motivated test group made a first-class result possible. The solution optimizes crucial sales processes for tesa, reduces administrative effort, integrates sales staff, and actively contributes to achieving business goals.

Meeting mit Tablets am Tisch
Project Management
Paul Lewandowski
Requirements Engineering, UX-Research
Martin Brecht-Precht, Florian Köppe
Martin Brecht-Precht
Technology Lead, Architecture
Michael Seelisch
Florian Köppe
Andrius Baliutis
Florian Köppe, Martin Brecht-Precht
Michael Seelisch

Next Project

Independent Aircraft Modifier Alliance Consulting ⟶ UX-Design ⟶ UI-Design ⟶ Frontend-Development

Independent Aircraft Modifier Alliance — platform for certified solutions in civil aviation

Show project