Scaling Datamaran's Design System
Scaling Datamaran's Design System
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.
Design solution
Next steps
Continue expanding the Design System while increasing adoption across the product.
- Measure Design System adoption.
- Reduce legacy component usage.
- Improve component documentation.
- Expand design tokens.
- Increase accessibility compliance.
- Leverage AI to automate Design System maintenance.
Learnings
User experience
Consistency isn't achieved by replacing components, it comes from defining reusable patterns that users can recognise across the product.
Business impact
A shared Design System significantly reduced design debt and improved collaboration between Design and Engineering.
Value increment
Treating the Design System as a product, rather than a library of components, created a scalable foundation for future development.
Outcomes
Efficiency
The new Design System streamlined design and development: • 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 that was easier for users to learn and for teams to maintain.
Scalability
A scalable component library and shared templates established a solid foundation for future growth, accelerating feature development while improving consistency and reducing long-term maintenance across the product.