Challenge
To increase internal acceptance of a data-driven approach to portfolio planning, a user-friendly and visually appealing frontend for an optimization algorithm developed by us had to be built. This frontend should process complex and interrelated data inputs for scenario planning and visually display and compare the results of different scenarios. Another important aspect was the ability to use the application even while optimization processes were running in the background. Additionally, the frontend needed to be flexible enough to adapt to new planning approaches.
Approach
We developed the design iteratively with the client using the tool Figma to ensure that the design met the requirements and expectations of the stakeholders. Through regular feedback loops, we were able to continuously involve the stakeholders and ensure that the final product met their needs.
For the development of the frontend, we used a Single Page Application (SPA) with TypeScript and React. The choice of TypeScript was crucial to facilitate the handling of numerous and complex data and to make the application flexible enough to support changes in the data model. We implemented the interactive visual representation of the results using Apache Echarts.
Results
Through close collaboration with the client and the iterative design phase, we were able to ensure that the developed frontend fully met the stakeholders’ requirements. This led to high satisfaction and broader acceptance of the data-driven approach to fleet planning.
The ability to process complex data inputs and visually represent the results clearly enabled users to make informed decisions faster. Additionally, our client was able to significantly improve the efficiency in planning and optimizing the vehicle fleet through the new frontend and is now better equipped for future challenges and new approaches in planning.
Value for the Customer
- Increased Acceptance of the Data-Driven Approach: The user-friendly and visually appealing design of the frontend significantly increased acceptance within the company.
- Informed and Faster Decisions: The ability to visually display and compare complex scenarios enabled users to make informed decisions more quickly.
- Flexibility and Adaptability: Thanks to the use of TypeScript and React, the frontend is flexible and can be easily adapted to new planning approaches.
- Efficiency Increase: The optimized planning and visualization of vehicle fleets led to a significant increase in operational efficiency.