UI, Cloud and Retail Solution

Business challenge: optimizing the demand forecasting process

Our client’s merchandising and planning experts use a demand forecasting web application that helps them make estimations of customer demand over a specific period of time. The solution calculates historical data and other analytical information to produce the most accurate predictions. However, all sales-related data was kept in Excel tables and was calculated manually. Hence, the client wanted to take the strain off of their employees by making the process faster and more efficient.

Developing and effective UI for the forecasting solution

TECHPEOPLE has assisted the client with creating a convenient and intuitive UI for the demand forecasting application. First, we have implemented a dynamic sidebar with product parameters, such as product type, location, department, and brand. Users can hide the sidebar to see data and bring it back whenever they need to filter the products. To make it easier to choose product parameters from the drop-down, we have allowed users to start typing product parameters manually so that the system can instantly pull the corresponding options. This eliminates the need to scroll down through numerous product parameters.

Additionally, the system was originally written on the Flask framework and was unable to process multiple requests in parallel. This resulted in an increased data load time. We have migrated the front-end from Flask to Javascript and React to decrease the page load time from 15 seconds to about 3 seconds. We have also added a loading sign during each page load to notify users that the page is loading.

To facilitate work with large amounts of data, we have added multiple filters into each data column. Furthermore, we have implemented the ability to add multiple filters simultaneously to product color, size, order, cost, etc. to greatly accelerate the product search. Also, we have implemented pagination to reduce the page load time.

One of the biggest features that we have implemented is the pivot view, which enables users to adjust the table view according to their needs and choose the rows, columns, and filters that they require. This way, users can create complex data tables with relevant data.

Finally, TECHPEOPLE has implemented the feature to import data from Excel documents. The data is transferred into the back-end system and then rendered in multiple parts of the app. We have also added front-end validation that notifies users with success or error messages. To protect the table from accidental changes, we have enabled the return function in the app. We also enabled export to Excel as a way to transfer a large amount of data at a time.

Support and maintenance: facilitating development, performing UI testing, and enhancing security
TECHPEOPLE has set up Docker to facilitate the process of building, sharing, and running the application. Now, to deploy a new code to production, we connect to the AWS virtual machine, build a front-end image in Docker, and upload it to AWS.

To verify the correct functioning of all visual elements, we perform UI testing using Vitest, as it provides the entire ecosystem for running manual tests and allows running unit tests. We also provide snapshot testing that compares the current version of the application to the previous one and highlights the changes, eliminating the need for regression tests.

Furthermore, we enhanced security and user experience by detecting insecure website protocols and changing the protocol from http to https.

Finally, we have performed a/b testing by granting the client’s merchandising and planning experts access to the solution. They provide feedback on how convenient, fast, and intuitive the solution is. We have carried out our weekly discussions and implemented application improvements based on their feedback.

Value delivered by TECHPEOPLE: fast, accurate, and efficient demand forecasting process
We have implemented a convenient and intuitive UI for the demand forecasting web application, complete with multiple useful features. This has introduced multiple improvements for the client, namely:

  • Reduced operational costs by automating manual processes involved in demand forecasting;
  • Increased employee productivity by providing them with multiple useful features to streamline their work, such as pivot view tables, data import, dynamic sidebars, etc.;
  • Accelerated the forecasting process by migrating from Python-based framework to Javascript and React and reducing page load times from 15 to about 3 seconds;
  • Enhanced the application’s security by changing the protocol from http to https.