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.

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.

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.

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.

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.

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.

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.

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.

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.

Result

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.

Next Project