Modernizing Magni Group’s Quality Assurance Platform (Phase 1 & 2)
Magni Group Inc. is a global leader in coating and corrosion protection systems, serving the automotive and industrial sectors.
Its Quality Assurance (QA) department ensures product consistency, compliance, and process reliability. Over time, Magni’s legacy system—developed in Microsoft Access with Visual Basic—became outdated and limited in functionality.
It lacked scalability, mobile accessibility, and modern user experience, leading to operational inefficiencies. To address this, Magni partnered with M RANK to modernize its QA platform through a structured, multi-phase digital transformation initiative.
Project Overview
The modernization effort was divided into two phases
- Phase 1 – Frontend Modernization & UI/UX Redesign: Establish the foundation of a web-based, cloud-ready QA application with a focus on navigation design (Switchboard & Sub-Switchboard), responsive layouts, and user experience.
- Phase 2 – Backend Development, API Integration & Cloud Migration: Extend the application with backend logic, secure APIs, database migration to cloud infrastructure, and user role management to complete the functional system.
Phase 1 – UI/UX Modernization
Objective
To create a responsive, modular, and intuitive Switchboard navigation system that replaces the legacy Access interface and sets the base for backend integrations.
Challenges
Non-responsive, table-based UI not suited for modern web or mobile.
Limited scalability due to tightly coupled Visual Basic code.
No centralized login or user control.
Complex navigation causing inefficiencies in QA workflows.
Our approach
M RANK adopted a React-based modular frontend strategy supported by Figma for UX prototyping.
A responsive Switchboard / Sub-Switchboard design was developed with reusable components and seamless navigation flow.
UI/UX prototypes in Figma
Switchboard & Sub-Switchboard design and development
Login/Logout authentication flow
Component-based React architecture
Placeholder API setup for future backend
Manual QA testing for UX validation
Technology Stack
Frontend
HTML5, CSS3, React
Backend
API integration (Phase 2)
Database
MS SQL (planned migration)
Methodology
Agile / Weekly Sprints
Environment
Magni Server / AWS Cloud
Version Control
Great Lakes Digital Partners Git Repository
Results
- Delivered a responsive and intuitive UI/UX for QA operations.
- Simplified user navigation through the Switchboard model.
- Improved cross-browser and mobile accessibility.
- Established a scalable, maintainable frontend ready for backend integration.
Phase 2 – Backend Development & Cloud Integration
Objective
To transform the Phase 1 frontend into a fully operational web application by integrating backend APIs, migrating the database to the cloud, and implementing role-based access control for secure QA operations.
Challenges
Migrating legacy MS Access data to MS SQL without downtime.
Building secure, high-performance APIs for all QA modules.
Designing a robust authentication and authorization system.
Ensuring synchronization between on-premise and cloud data during transition.
Our approach
M RANK extended the Phase 1 architecture into a complete full-stack solution, integrating backend services while maintaining performance, data integrity, and user experience.
API Development: RESTful APIs built with Node.js and Express for all QA workflows (Batch Info, Raw Materials, QC Reports, etc.)
Database Migration: MS SQL schema modernization and migration to AWS RDS Cloud.
Authentication & Authorization: Role-based access control for Admin, QA Manager, and Operator levels using JWT.
Data Sync Services: Scheduled synchronization between on-prem and cloud databases to ensure real-time accuracy.
Testing & Validation: Integrated testing pipeline for API endpoints and system-wide UAT.
Technology Stack
Frontend
React (Phase 1 enhanced)
Backend
Node.js, Express.js, RESTful APIs
Database
MS SQL on AWS RDS
Authentication
JWT / OAuth2
Deployment
AWS EC2 / Elastic Beanstalk
QA & Monitoring
Postman Tests, AWS CloudWatch
Methodology
Agile – Biweekly Releases
System Modules
Batch Management: Create, track, and update batch data in real time.
Raw Material Editor: Secure editing of raw material inputs and validation.
QC Reports & Charts: Dynamic data visualization and report generation.
Product Specifications: Integrated data retrieval via API services.
Failed QC Transmission: Error tracking and alert system for QA follow-up.
Results & Impact
- Seamless migration from legacy Access system to modern web architecture.
- End-to-end automation of QA data processing and reporting.
- Enhanced security through role-based authentication and controlled access.
- 99% reduction in manual data handling and report generation time.
- Real-time visibility and traceability across QA operations.
- Improved system performance and cloud scalability.
Overall Outcomes
System Performance
Improved from slow, local Access files to cloud-based real-time processing.
Accessibility
Enhanced to web and mobile responsive design.
Data Integrity
Automated API sync replaced manual errors.
Scalability
Enabled elastic cloud scaling.
User Management
Introduced role-based control system.
Reporting
Automated charts replaced manual exports.
Conclusion
Through close collaboration with Magni Group’s QA team, M RANK successfully delivered Phase 1 and Phase 2 of the modernization program, evolving the legacy MS Access application into a fully functional, cloud-based QA platform.
The solution improved operational efficiency, data reliability, and user experience while laying a scalable foundation for future automation and analytics capabilities.
This project exemplifies M RANK's expertise in enterprise application modernization, combining technical precision with user-focused design to deliver measurable business impact.
Have a similar problem?
Tell us what's slowing your business down. We'll reply with an approach, a timeline and an estimate.
More case studies
Refloor
Salesforce-integrated customer self-service portal.
100% visibility of service and payments; 40% fewer support callsRead case study →Flooring installation · USARefloor
Booking and estimation scheduler synced with Salesforce.
Full lead-source tracking and faster lead responseRead case study →Physical therapy · USASynergy Rehab
New WordPress website and digital marketing.
160% more traffic, 45% more appointment requests, 4.2x Google Ads ROIRead case study →