Increased ROI and Productivity Through an OEE Solution Modernization

Business Case Story

In a large factory, various challenges are typically encountered. In order to solve these problems, businesses need to be aware of them and measure them. Therefore, our client wanted to replace a legacy OEE solution with a top-notch web application that incorporates latest industry standards and facilitates OEE monitoring, production planning, preventive maintenance planning, optimized user workflow, and effective process flow.

Customer objectives

• Ensure produced components comply with the quality requirements
• Maximize the overall productivity and optimize the UX
• Reduce machine downtimes and idleness due to malfunction
• Avoid shortage of components due to improper logistics

Even the system’s UI redevelopment was the main focus of this particular engagement, our team addressed and improved existing gaps inside the legacy systems by better handling the security and licensing modules of the application.

OEE Solution Story

Our web application development team redesigned the front-end of the system by adopting a responsive UI to provide an attractive and optimized UX. The OEE solution enables business users to seamlessly configure, maintain, and plan production as well as monitor data about the machinery in real-time.

A completely new front-end of the legacy application was developed using React JS and TypeScript to achieve faster response of the web application and provide better user experience. The web application is supported across multiple browsers and with mobile friendly screens.

Using the SCRUM methodology as our main agile tool, we successfully separated the application to multiple functional modules and iteratively and incrementally delivered all functional requirements. Jest was of great help in the test-driven development (TDD) phase.

The web application was written in React JS, using Office Fabric UI components, and MobX for managing the states of the react objects and for separating the UI code from the logic. We preferred TypeScript over JavaScript for its better coding structure and multiple object-oriented programming techniques.

All legacy web API services were redesigned from SOAP to REST for better performance, simplifying the data format moving from XML to JSON notation. For the modules with charting capabilities and real-time data visualization, we used some third-party JS libraries like Wijmo.

Figure : Web Application Architecture

Benefits Story

The OEE solution provides a responsive user experience that is fully aligned with the manufacturing process. It eliminated a couple of time consuming and error-prone tasks while allowing users to easily set up the production equipment and define specific jobs.

The new React front-end improved the performance of the application with faster page loads. By providing a mobile-friendly solution, we enabled the end users to use their mobile devices to manage and monitor the manufacturing process.

The new UX design provided all users with a better experience by organizing the different modules logically, simplifying the user interface, and fixing functionality gaps of the legacy application. As an outcome, the client achieved faster onboarding time for new users and seamless configuration of the administrative tasks and scheduling of all production jobs.

• Faster response time – loading and rendering of the pages especially those modules with real-time graphics for manufacturing process analysis.
• Mobile-friendly UI and effective navigation
• Increased productivity and higher ROI due to optimized manufacturing costs and increased output of the machinery
• Reduced maintenance cost