Chameleon DS: Scaling Design for mx51’s Multi-Branded Products
Summary
Chameleon is a multi-branded design system developed by mx51 to design, build, and test dashboards and payment applications for some of Australia’s major banks, POS partners, and payment providers. The design system was critical in scaling mx51’s product offerings, enabling the team to meet the demands of a growing customer base while maintaining high standards of consistency, accessibility, and speed.
Case study snapshot.
Start date:
Duration:
Squad:
2 UX Designers, 3 Front end engineers, 1 Delivery manager
My role in the Chameleon project was comprehensive: I planned, created, implemented, and provided ongoing support to mx51’s design and engineering teams, which comprised over 20 members. This project was an additional effort outside our main squad duties and involved a collaborative team of UX designers, front-end engineers, and a delivery manager.
Impact
80% faster onboarding process, streamlining client adoption and setup.
Accelerated feature rollouts through a scalable design system, reducing development time and improving efficiency.
Increased sales effectiveness by delivering prototypes that helped close new deals with prospective clients
Enhanced cross-team collaboration with the Weekly Design Digest, leading to better alignment and faster decision-making.
Improved brand consistency and accessibility, strengthening XODA’s market position and appeal to a broader audience.
The Challenge: Scaling for Growth and Consistency
As mx51 expanded its customer base, including major Australian banks and over 100 POS partners, the need for a scalable, multi-branded design system became increasingly evident. The existing infrastructure struggled to keep up with the rapid growth, leading to inconsistent UI/UX patterns and inefficiencies in the design and development process. Fun Fact! Chameleon was the name we decided to call our design system because as chameleons adapt and change colours, our design system also does the same thing for our tenant brands as a white labeled product.
The approach behind this was two-fold:
Design in our generic brand (Gecko Bank)
Swap design using Chameleon DS to any brand (eg. the yellow bank, the blue bank, the red bank)
Key Issues:
Inconsistent designs across products
High effort in onboarding new tenants
Accessibility challenges for bank-grade products
Inefficient processes in design and development
Below is a video of the beginning stages of colour mapping. Atomic elements were addressed at the very beginning to ensure consistency across all products.
The Solution: Chameleon Design System
The Chameleon design system was developed to address these challenges by providing a single source of truth for all design and development activities at mx51. The system included design tokens, a UI component library, and comprehensive documentation to ensure consistent, accessible, and high-quality outputs across all products.
As we started working towards a solution, we played with different structures and formats starting with colour.
Below are the steps of creating a new brand in Chameleon.
Key Benefits:
Consistency: Unified components across all brands, ensuring a consistent user experience.
Efficiency: Reduced time spent on design and development, enabling faster deployment of new features and onboarding of tenants.
Accessibility: 100% confidence in meeting WCAG 2.1 accessibility standards, ensuring inclusivity across all products.
Scalability: The ability to generate new tenant-specific branding in minutes, supporting mx51’s rapid growth.
Impact:
Onboarding Time: Reduced from 2 weeks to half a day for new tenants.
Speed to Market: Significant reduction in development time, allowing for faster updates and releases.
Design-Dev Collaboration: Streamlined processes, eliminating back-and-forth between design and development teams.
Below is a short explainer video that was made to mx51 staff.
Conclusion
The Chameleon design system has been a game-changer for mx51, enabling the company to meet the demands of a rapidly growing and diverse customer base. By standardizing design and development practices, mx51 has improved its product quality, speed to market, and overall user experience, making Chameleon an integral part of its ongoing success.
Keep Reading
Feel free to look at other things that I have written.