Scaling Datamaran's Design System

Product design20261 yearDesktop

The challenge

As Datamaran's product evolved, our custom Design System became really difficult to maintain and scale. The migration to PrimeVue required a real scalable component strategy around design and engineering.

  • Audit the existing component library and instances in the app.
  • Map custom components to PrimeVue equivalents.
  • Identify gaps and inconsistent patterns.
  • Deliver a scalable Design System without disrupting development.

The solution

We established a collaborative workflow to evolve the Design System through audits, component mapping and cross-functional collaboration, ensuring every implementation was validated before development.

  • Audited and mapped legacy components.
  • Proposed reusable solutions for missing patterns.
  • Validated decisions with Design and Engineering.
  • Created implementation-ready Jira tasks for developers.

Project Goals

User experience

Create a more consistent, intuitive and accessible experience across the platform.

Business impact

Reduce design and development effort by increasing component reuse and standardisation.

Value increment

Scalable Design System capable of supporting future product growth.

Process

The migration was approached as an iterative Design System evolution rather than a one-off redesign.

  • Audited existing Damaran app views.
  • Mapped custom components to PrimeVue.
  • Identified component gaps and inconsistencies.
  • Proposed solutions during Design critiques.
  • Collaborated with developers during Design System meetings.
  • Created implementation-ready Jira tasks with design detailed specifications.
  • Supported rollout across multiple product teams.

Strategy examples

We started with the default Primary palette to accelerate implementation, but later refined it to better align with our brand identity and overall color system.
A custom palette was built from our brand primary color, preserving PrimeVue's tonal scale to minimize PrimeVue token changes while maintaining contrast and accessibility. In Figma we updated token through variables. The Dev team did it through JSON files.

Next steps

Continue expanding the Design System while increasing adoption across the product.

  • Measure Design System adoption.
  • Reduce legacy component usage.
  • Expand design tokens.
  • Leverage AI to automate Design System maintenance.
  • Created a .md specification file to provide AI design tools with both the PrimeVue MCP and our custom Design System guidelines and component customizations.

Learnings

User experience

Consistency isn't achieved by replacing components, it comes from defining reusable patterns within a strategic process.

Business impact

A shared Design System significantly reduced design debt and improved collaboration between Design and Engineering.

Value increment

Legacy components required a gradual migration, accepting temporary UI inconsistencies to achieve long-term consistency.

Outcomes

Efficiency

• 75% fewer custom components. • 40% increase in component reuse. • 65% faster UI implementation. • 100% of new features being built using the new Design System.

User experience

PrimeVue introduced more accessible, consistent and flexible components than our previous custom library, replacing rigid patterns with a more intuitive experience for users.

Scalability

 We established a solid foundation for future growth, accelerating feature development while improving consistency and reducing long-term maintenance across the product.