Modernizing Magni Group’s Task & Sample Management Platform

Magni Group Inc. is a global coatings and chemical solutions provider known for its advanced surface protection technologies. With operations spanning multiple regions, Magni relies heavily on internal digital tools to manage projects, customer requests, and laboratory samples.

Over time, the existing web application—built using legacy ASP.Net (VB) technology—became difficult to maintain, lacked responsiveness for mobile devices, and offered limited scalability for future needs. To ensure long-term reliability and usability, Magni partnered with MRANK to design and develop a modern, responsive, and efficient web-based platform.

The primary objective was to modernize and enhance the user experience of Magni’s existing web application, focusing on key features such as:
- User authentication and role-based access (Active Directory integration)
- Task management (creation, tracking, and reporting)
- Sample request management (customer samples, approvals, and Deacom order visibility)
- Unified dashboard for real-time visibility
- Compatibility across desktop and mobile browsers
- Improved maintainability and long-term scalability

- Outdated frontend architecture limited responsive design capabilities.
- Inconsistent user experience across devices.
- Legacy code dependencies made extension difficult.
- Limited API optimization for modern workflows.

MRANK proposed a complete UI/UX redesign and frontend redevelopment while retaining Magni’s existing MS SQL database and backend API structure to minimize migration risks.

Technology Stack:
Frontend: React, HTML5, CSS3 (component-driven, responsive UI)
Backend: Existing .NET APIs retained and integrated
Database: MS SQL (existing database maintained)
Version Control: Git (GLDP Repository)
Testing: Manual QA
Methodology: Agile (2-week sprint cycles)

The application was structured into modular components to ensure flexibility and maintainability.

Core Modules:
1. Authentication & Authorization – Secure login/logout integrated with Active Directory
2. Dashboard – Unified view of tasks, complaints, and sample requests
3. Tasks Management – Add/edit/close tasks, attach files, add comments, track by customer/project/department
4. Sample Request Management – Add customers, initiate requests, track approvals, view Deacom orders, generate reports

MRANK’s design team created a clean, intuitive, and device-responsive interface using Figma. The design emphasized consistency, accessibility, and mobile-first usability.

- Modern, responsive interface improving user satisfaction and productivity
- Seamless integration with existing systems and databases
- Reduced maintenance overhead due to modular React architecture
- Improved visibility across departments
- Enhanced performance and reliability

- Migration to grid/flex design for adaptive responsiveness
- Component-based architecture for faster updates
- Integrated notifications for task and sample updates
- Support for Microsoft Edge and Google Chrome
- Scalable for future API and module additions

Through close collaboration with Magni Group, MRANK successfully delivered a future-ready web application that transformed internal task and sample management. The new solution enhanced efficiency, visibility, and user engagement while ensuring scalability for future growth. This project stands as a strong example of MRANK’s excellence in UI/UX modernization and enterprise application transformation.