Wheels Unified Design System
Shared components and guidance after Wheels, Donlen, and LeasePlan USA came together
2023 - Present
Shared design system patterns for Wheels products across web and mobile
Problem
When Wheels, Donlen, and LeasePlan USA came together, they brought different UI histories and ways of working. Teams were making the same component decisions more than once, and Figma, ThemeBuilder, and Storybook did not always line up. I worked on shared patterns and contribution guidance, while leaving room for product-specific needs.
What I did
- Moved the design team to Figma and wrote down how shared components could change
- Built KendoReact patterns and worked to keep them aligned with Figma, ThemeBuilder, and Storybook
- Adapted React Native Paper patterns for our mobile products and accessibility needs
- Documented the system in Frontify and worked with teams as they started using it
- Prepared reviewed theme output for Figma Make as the scoped, versioned @w-figma/w-kendo-theme package, with styles and component examples
- Wrote Make kit guidance that maps Figma patterns to the installed KendoReact packages and their real APIs
Result
- Gave teams shared components and contribution guidance after the merger
- Connected design decisions in Figma to the implemented theme and Storybook
- Worked accessibility needs into tokens and core component patterns
- Added token mappings, Kendo overrides, and custom examples for patterns including taskboard cards, headers, and footers
- Made the package boundary explicit: it provides theme styles and examples, not React component exports
Process
Shared component system across the frameworks used by the teams
ThemeBuilder patterns checked against the Figma library
Frontify guidance for teams using the shared system
Tools
Figma · KendoReact · React Native Paper · Kendo ThemeBuilder · Storybook · Frontify · Figma Make · SCSS · npm package distribution