Client in numbers
Problem statement
- Incrementally refactor the code base and release new features according to new standards without collapsing the legacy code base
- Extend the existing product with new features and improve UX by enhancing user interfaces
Approach and solution
- Developed a new customized UI component system and redesigned the whole UI of the app
- Enhanced user engagement through detailed weekly analytics and reports
- Profound visualization of the data & ML predictions
Impact achieved
- Custom UI Component System: Created a new, customized UI component system and redesigned the entire UI of the app.
- Enhanced Data Visualization: Implemented profound data visualization tools.
- Customizable Email Templates: Developed highly customizable email templates for effective user engagement.
- Improved UX Satisfaction: Enhanced user experience with new UI tools.
- Smooth Transition: Achieved a smooth transition from the legacy codebase without breaking functionality.
Expertise and scope
- Tech Stack: React.js, Redux, Go, Python, Google Cloud Platform, SQL
Overview
MachineMax is an award-winning global company based in London UK that provides an equipment management platform for off-highway heavy machinery users to maximize the profitability of every machine in their fleet… any make, any model, anywhere!
20-30 Million Heavy Machines worldwide are unable to provide meaningful insights to industries such as Construction, Mining, Manufacturing (material handling), Agriculture, Forestry, Waste recycling, and Infrastructure (e.g., ports).
Leveraging Internet of Things (IoT) technology, MachineMax is a breakthrough machine analytics service that helps construction and mining companies maximize profitability by increasing machine utilization and reducing fuel consumption and CO2 footprint.
Challenges
The company has an MVP that worked well and was developed three years ago. After gaining a pool of constant customers and attracting new investors the company decided to extend the product with new features and improve UX by enhancing user interfaces. The old codebase didn’t fit well with new requirements so the company decided to incrementally refactor the code base and release new features according to new standards. That created an issue of properly processing legacy code and incorporating new functionality with the old one.
The Machine Learning module was added to the product to be able to give predictive analytics based on the deep learning of existing data and analysing trends. Therefore, predictive analytics results should be well represented in the front end.
Additionally experienced UX designer joined the team and worked closely with the existing UI designer. As a result, new flows of usual processes have been developed and implemented in the front end.
Also, the company decided to enhance user engagement and start sending detailed weekly analytics email reports for the users with key indicators.
Solution
All the new and refactored code has been stored in a separate Portal folder to avoid collapsing with the legacy code base.
There was developed a new Design Component system based on Material UI but customised for its own purposes including supporting several coloured themes.
Main flows were implemented as multistep forms with a focus only on grouped data with the ability to check selected information in the final step. All main user actions were gathered in the user panel right under the main navigation bar. This user panel contains an icon button for applying filters, searching, downloading reports and adding new machines/groups/geofence etc.
All table pages with aggregate data and dashboard were enriched with sticky horizontal and vertical headers, the ability to scroll by many means (scrollbar, mouse dragging, special button indicators) and a predefined filter and date range. Additionally, new metrics have been added like shifts and off-hours.
Data analytics including ML predictions were implemented with the D3 library for profound visualisation and the ability to see all data segments. The general stats were represented with popular graphs in the Chart.js library.
New email templates have been developed to support images of graphs with data analytics for a week. Also, these templates were optimized to render conditionally supported/unsupported pieces of analytic data with the support of all popular email agents including Outlook Windows. We use a combination of tools such as MJML email framework, Handlebars template engine and integration with Quickcharts.io based on Chart.js.