Multi-platform Design System
A design system that serves across different products, enabling teams to build high-quality products efficiently.
Project: Multi-platform Design System, Design from scratch
Role: Product designer
Client: CRIF AG
Start: 2023
Duration: 8 months
Scope: UX design (40%), UI design (30%), Documentation (30%)
Style guidance
UI component assets
Read me
How I planned
I was responsible for 9 applications within a product ecosystem. This initiative was driven by my own efforts while working across multiple projects.
The circumstance was that, within a limited timeframe, design team didn’t have enough resources to support different app platforms. We had to rebuild the UI library for each app individually, and dev team found it challenging to integrate new design style every time they worked on a different product.
To manage this efficiently, I organized the design system into 2 dedicated hubs:
Hub 1 (ABER Resource): Anti-Money Laundering Guard, Base Services, ERP & ERP Customer - built on Vue.js framework and designed for desktop web-based experiences.
Hub 2 (Teledata legacy): Teledata Online, CRO, File Exchange, Job Server & OMS - built on Angular with a focus on responsive design
Strategy planning for design system management
This separation enabled more consistent, scalable, maintainable design management and alignment across platforms with differing technical stacks and UX requirements.
Each hub here stood for a design system that served as a single source of truth documentation. However, it was not intended for one-size-fits-all; instead, it was customizable based on:
Brand experience & uniqueness
App market position
Customer base or revenue-driven priorities (project budget)
Visual complexity
In the end, Hub 1 came into operation and service. And Hub 2, the legacy UI library originally built for Teledata Online app before was later inherited and adapted for it.