Web Development / Product Design

Increasing data accessibility through its smart visualization

Industry
Automotive, Manufacturing
Time
5 weeks
Services
Diagramming Solutions, Product Design
Team
5 engineers

ZF Group

ZF Group is a global technology company that supplies systems for passenger cars, commercial vehicles, and industrial technology. The ZF’s products include driveline and chassis technology for cars and commercial vehicles, along with specialist plant equipment such as construction equipment. The company has 168 production locations in 32 countries with approximately 165,000 employees.

About the project

In this project, we’ve been working with one of the ZF’s divisions. Our goal was to design and implement a data visualization module that would enable the analysis of production data from 36 plants operating under this division.

The project was initiated a few years earlier, and the digitalization department has already done a tremendous job clarifying and unifying data from different plants. But despite that effort, it was still difficult to analyze the collected data. Our goal was to change it.

Our tasks

Design and develop a data visualization app

The app was supposed to present production data in a visually compelling and easy-to-interpret way.

Connect data from different sources

The app aimed to gather data from different plants and enable data analysis on a global level.

Prove the feasibility of the solution

At this stage, it was crucial to prove that we were able to connect the app with real data from the plants.

01

Challenges

Difficult access to data

Before the project, there was no common tool that would enable verification of the production data, such as productivity, availability, scrap, downtime, etc. The data was distributed across different systems and presented in different formats.

Many tools and systems to check on a daily basis

As data was distributed across different systems, tools, and several Excel files, it took quite an effort to monitor it on a daily basis. Moreover, the systems were unreliable, and if they didn’t work, it would take hours to get technical support.

Tight deadlines

The struggle was real, and we needed to act fast to present the working solution to stakeholders and prove its value ASAP. Otherwise, the project might have been canceled.

02

Our Approach

Understanding the specifics of the company through custom workshops

At the very beginning of the project, we visited two local plants to understand the nature of work in such an environment and the challenges faced by the employees. Right after these visits, we met for the Discovery Workshop. The main objective of the workshop was to plan the development of a visual layer for production data.

Proof of concept instead of mockups

As we needed to act fast, we decided to start the projects with a proof of concept that would validate the feasibility of the designed solution. For that, we connected with one of the plants and developed the frontend part of the app. Instead of building a fully functional backend, we implemented a temporary “backend adapter” — knowing that it would need a refactor if the client decided to continue the project — which helped us significantly reduce the time of the project.

Incorporating real data

From the beginning, it was clear that we didn’t want to create another set of mockups that would look great but bring no value. Even if it was only data from one plant — and that’s what we needed for the PoC — it needed to be real data from that plant. No substitutes, no random numbers. Our goal was to prove that we are able to use the existing data and present it in a visually compelling and easy-to-interpret way.

Different teams working paralelly

Because of the tight deadlines, the two teams worked simultaneously on data collection & cleaning (on the client side), and on the design & development (on our side). Such an approach required close collaboration with the client and all teams, gathering feedback on a daily basis and acting on it.

Technology we used

Angular

Nest JS

Typescript

Adobe XD

03

Results and Next Steps

Positive feedback from the stakeholders

As we managed to connect with real data from one of the plants and present it on clear dashboards in the app, the stakeholders were able to analyze the key performance metrics without clicking through multiple tools and complex spreadsheets. Even though the app was only a proof of concept and everyone was aware of its limitations, it received positive feedback.

Plans to continue the project

Before implementing the tool on a larger scale, it will be necessary to get unified data from other plants of the division and refactor some parts of the app so they can replace the temporary solution and enable adding new modules and features. Once in use, the app will help ZF monitor data from the plants on a global scale and improve their processes.

Thinking of GPT implementation?

Let's talk about it!

Discover our
other projects