Building ERP Design System for +100 Apps - Part II

Scaling the Design System for Efficiency and Adaptability

As the foundation of the design system took shape, the next challenge was ensuring its scalability, efficiency, and seamless integration into daily workflows. A robust design system is more than a collection of UI elements. It must evolve to meet the demands of growing teams, diverse applications, and an ever-changing digital landscape. In this next phase, we focused on refining key components such as icon management, atomic design, reusable layouts, and dynamic theming, all while maintaining a strong emphasis on flexibility and collaboration. By optimizing these elements, we aimed to create a system that not only ensures visual consistency but also enhances productivity for designers and developers alike.

Icon Management

Font-based icons

Primary choice: Fast and easy to implement
Legacy implementation: Font icons were integrated before the establishment of a comprehensive design system, making them a quick solution for early stages. (FontAwesome)

SVG Icons

Customization needs: As the system evolved, an SVG icon library was introduced to accommodate the need for customized icons specific to certain applications. (Design by me)

Consistency

Customized icons need to be based on FontAwesome and Material Design to ensure icon consistency across the system.

Flexible Integration

The component and icons library allow for seamless switching between font and SVG icons, ensuring flexibility and adaptability in the design system.

Atomic Design

To create a flexible and maintainable design system, we adopted the Atomic Design methodology. By structuring components into atoms, molecules, organisms, and templates, we ensured that every element was reusable, scalable, and adaptable across different interfaces. This modular approach allowed designers to build complex UI structures from smaller, standardized components, reducing redundancy and enhancing design efficiency. With a well-defined hierarchy, teams could maintain consistency while still having the flexibility to customize elements as needed.

Reusable Layouts and Composite Components

Reusable layouts

Reusable layouts standardize structures across different pages, ensuring consistency and efficiency in design. Providing a framework that saves time by reducing the need to create new layouts from scratch.

Composite components

Composite components combine simpler UI elements to create complex structures, enhancing reusability and consistency. By assembling atomic components into flexible and customizable designs, we ensure cohesive functionality and styling.

Check out some of our components

These are responsive components, easily dragged and dropped into the design. Saving tons of time for our designers, maintain consistency, and deliver quick wireframes or even final solutions in a short amount of time.

Easily switching between light and dark mode

With everything set up beforehand, switching from light to dark mode is as simple as a switch. Designers don't need to adjust each element for dark mode, as all components have been pre-calculated to look intuitive and perfect in both modes. This allows UX designers to focus on solving problems, streamlining the design process and ensuring a consistent user experience.

Efficiency

Flexibility and Adaptability

Indigo components are crafted for different use cases, enhancing the system’s versatility across different applications while ensuring that our UX and DS standards are respected.

Indigo Version 2 allows designers from various domains to seamlessly adapt it to their specific needs with minimal changes.

Scalability

Indigo Version 2 is designed to support growth, ensuring easy management of future updates and expansions. The integration of variables and atomic design facilitates widespread updates with minimal effort, enhancing performance and streamlining maintenance.

Centralized change management

The design system is structured with the principle 'one change for all' to minimise the need for detaching instances, enabling easier updates. Changes to the library automatically propagate to all associated ERP designs, ensuring uniformity and simplifying maintenance.

Streamline collaboration

By streamlining design processes and reducing the need for extensive customisations, the system significantly cuts down development time for both designers and developers, leading to faster project completion.

With a scalable and adaptable design system in place, Mantu Group has streamlined workflows, enhanced collaboration, and ensured long-term consistency. By implementing Atomic Design, refining icon management, leveraging reusable layouts, and enabling seamless theming, we’ve built a foundation that balances structure with flexibility.

More than just a UI library, this system is a living framework, evolving with business needs and technology. By prioritizing efficiency, scalability, and collaboration, Mantu Group is equipped to deliver cohesive digital experiences well into the future.