MCE Systems
Building MCE a scalable design system & 12 user flows
Problem Statement
MCE lacked a unified design system, resulting in inconsistent components, typography and spacing across products. At the same time, 12 core product flows needed to be delivered with no scalable framework in place, creating inefficiencies, duplication and an uneven user experience.
Goals & Objectives
Establish a scalable design system foundation
Deliver 12 core end-to-end product flows
Improve cross-team efficiency and reduce inconsistencies
Internal insights
Inconsistent UI patterns creates friction for users.
Teams duplicated work due to the absence of shared components.
Lack of standards slowed delivery and introduced errors.
A unified system would improve speed, consistency and scalability.
Design system strategy
To ensure rapid implementation and alignment with the engineering stack, I selected Radix as a foundation due to its seamless integration with Tailwind CSS. I customised it for MCE through updated design tokens and evolved the system over time, introducing new components as needs emerged, with a changelog maintained to support versioning and governance.
Approach for user flows
Using the design system as a foundation, I structured 12 core product flows to create consistent experiences across key customer journeys, including trade-in, troubleshooting, repair, insurance, leasing and warranty.
I worked closely with product managers and stakeholders through workshops to map each journey, translating insights and research into wireframes and progressing them into
high-fidelity designs.
Example user flow (Trade-in)
Testing & Iteration
Product managers conducted usability testing, and the we iterated on the flows based on their findings form usertesting.com
Final Designs
The final output combined a scalable design system with 12 end-to-end product flows, covering key journeys such as trade-in, repair, insurance, leasing and troubleshooting.
Metrics & Outcomes
25%
faster design and development cycle
40%
40% reduction in reported design inconsistencies