MST Helix UI
Standardization of microfrontends development — Success story
About the Company
MST Global (MST) is an Australian company specializing in the development of safety, communication, and production management systems for the mining and tunneling industries. Founded in 1990, MST has grown to serve over 300 customers worldwide. Initially, MST's business model focused on hardware sales, but in 2017, the company shifted to offering comprehensive hardware and software solutions to better meet its clients' needs. Their product line includes a range of IoT sensors and advanced safety and communication equipment, all controlled by sophisticated real-time software systems. MST’s latest generation of products, branded as Helix, leverages cutting-edge technologies like microservices and microfrontend architectures to deliver modern, scalable solutions.
Challenges
In the first year of developing the Helix MVP, MST Global’s development team focused on the backend and edge architecture, laying a strong foundation for the platform. However, as the release date approached, they realized they needed to quickly catch up on frontend development. The team lacked the necessary skills and resources to complete the frontend implementation on time. To address this, MST decided to split the frontend development work across internal teams and subcontracted developers working independently.
Another major challenge arose from the complexity of the Helix platform, which consisted of multiple products and modules that clients could purchase in various configurations. Regardless of the installed modules, the Helix frontend needed to deliver a consistent and well-integrated user interface (UI).
To overcome these challenges, MST engaged Enterprise Innovation Consulting (EIC) and its Better Microfrontends program, seeking a microfrontend development accelerator to jumpstart the frontend implementation as quickly as possible.
The Solution We Proposed
To provide additional support for the Helix team, EIC recommended the Premium Package of the Better Microfrontends program, which included several months of coaching, mentoring, and co-development. This approach ensured continuous guidance and expertise throughout the project, enabling MST to accelerate their frontend implementation.
The solution focused on adopting a microapplications architecture, initially implemented using Angular 4, with a built-in capacity for incremental upgrades to the latest Angular versions. This allowed the development teams to work with modern, scalable technologies while maintaining the flexibility for future updates.
Additionally, MST requested the creation of a unique Look & Feel for the Helix UI to deliver a premium user experience.
EIC helped design a consistent, high-quality interface that aligned with the modular nature of the Helix platform while ensuring a seamless and integrated user experience across all its components.
What We Did
EIC began with a rapid discovery phase, during which we gathered detailed requirements and designed a reference architecture tailored to MST's needs. Following this, we developed several templates for microapplications and built a vertical slice, which included key components such as login, home, and several functional pages to serve as a foundation for the Helix frontend.
Given that the Helix backend lacked the necessary public interfaces and capabilities to support the frontend, EIC also delivered a Node.js-based microservices accelerator as part of a Backend for Frontend solution (further detailed in a separate success story). This allowed the frontend and backend to work together efficiently.
By the second month of the project, EIC had successfully trained MST’s internal team and subcontractors on how to use the microapplications accelerator, enabling them to begin frontend development in earnest. Throughout the process, EIC continued to co-develop the Helix UI alongside these teams, ensuring a collaborative and seamless workflow.
A custom Look & Feel for the Helix UI was later introduced to create a premium user experience, and this design was integrated into the project without disrupting ongoing development efforts.
The Result
Within two months, the Helix team received a fully established microapplications architecture along with templates featuring design patterns that enabled smooth and efficient frontend development.
By splitting the work across multiple development teams, and using a highly productive development model, MST was able to release the Helix MVP on time.
The microapplications architecture allowed for incremental delivery of new features and seamless upgrades to the latest technologies at record speed and minimal cost. Despite the involvement of independent teams, the implementation consistently maintained high quality and a unified interface. MST was pleasantly surprised by how easy and fast frontend development became, with productivity more than doubling compared to the bespoke approach they had used in the past.
Performance Improvements:
● Less than 3 months to kick off large-scale frontend implementation
● 2x+ increase in development productivity compared to expected bespoke implementation
● 50% faster innovation, enabling quicker delivery of new features and updates.
Testimonial
Vadim Parfenov
Chief Technology Officer
MST Global
We faced a tough challenge when it came to delivering the frontend for our Helix platform.
We had a solid backend in place, but with the release date approaching, we simply didn't have the frontend skills or capacity to complete the work in time. On top of that, we needed a consistent UI across a range of products that could be sold in different configurations. That's when we brought in the team at Enterprise Innovation Consulting (EIC) and their Better Microfrontends program.
They quickly helped us define a microapplications architecture, provided ready-to-use templates, and even trained our internal teams and external contractors. EIC’s support didn’t stop there – they helped us implement a custom Look & Feel for Helix without disrupting development. In less than three months, we were able to start large-scale frontend development, and the modular architecture they put in place has allowed us to easily roll out new features and upgrades.
The results speak for themselves: we doubled our development productivity and significantly sped up our time to market. EIC's expertise made all the difference.
Subscribe to Our Newsletter
