Unified Intelligence:
Evolving a Design System for AI & Acquisition Integration
I architected a token-driven design system that seamlessly unified two distinct ad-tech platforms post-acquisition, while creating a scalable, high-velocity foundation for Madhive’s new AI features.
Collision Course: When an Acquisition Meets the AI Boom
Late last year, our company experienced a major shift when Madhive acquired Frequence. Suddenly, we had two AdTech platforms running side-by-side. They had similar functions but completely different looks and feels. A big question emerged for the design team: how do we unify the branding across these products so they feel like one cohesive family?
Around the same time, the AI boom happened. Leadership decided to shift our focus heavily toward AI features and agentic flows. Because of my strong track record on the reporting team, I was appointed as the lead designer for these new AI features. This was a brand-new product line. I knew that to make these new features a strong selling point, I needed to propose a fresh UI look and carefully consider our branding.
However, we faced a major hurdle from the engineering side: the constant push for speed. With our foundation already split between two platforms, I realised that if we didn’t establish strict constraints through a design system, we would create massive UI risks and scaling issues down the road.
Pragmatism Over Perfection: Architecting a System Built for Reality
I firmly believe that a design system is not a temporary endeavor; it is a continuous effort that must adapt to meet the needs of designers, developers, and users. It is never truly “done.” With this mindset, I approached the new AI features with a big-picture plan.
I started by branching out from our existing design system. I audited all the atom-level components, font styles, and colors, standardising them in Figma. To accommodate the new product line without the headache of managing multiple design systems, I expanded our colour palette — covering everything from functional UI to data visualisation, and integrated the company’s marketing messaging.
One of the most critical steps was re-architecting the Kit Design System (v2.0) into a token-driven framework. Instead of following tutorials that teach complex, multi-layered variables, I took a more practical approach. I communicated and negotiated heavily with our engineers, and we aligned on using a single layer of design variables. This made the system much easier to scale into dual themes. The system now enables seamless visual switching between the DSP and MAV platforms using one unified architecture. We also mirrored the entire library in Storybook, complete with comprehensive documentation.
Do we really need to componentize every single new UI element before engineering can start building?
Designing for AI meant introducing a whole new set of components, like “Make it so” buttons, reading cards, and nested lists. For every piece, I asked: Is it following our basic guidelines? Are the use cases and states clearly defined? Is it scalable?
But this revealed a hidden dilemma. If my goal was to strictly control UI quality, the design system could easily become a blocker in our fast-paced development environment. I asked myself: Do we really need to componentize every single new UI element before engineering can start building?
The answer was no. I adapted our workflow to ensure we weren’t slowing the team down. I focused on producing high-quality new UI that adhered to the design system’s standards and documented it thoroughly. We let the product move forward. Then, because we didn’t have a dedicated full-time design system team, I set up bi-weekly syncs (Mondays and Fridays) with my fellow designers. We reviewed new designs, opened tickets, and allowed team members to claim components that were worth adding to the core system.
The New Normal: Coding with Claude and Guiding Non-Designers
To guarantee pixel-perfect execution, I worked closely with engineering on live QA sessions. Sometimes, I even used Claude to generate the code for a component and handed it directly to the engineers for review.
Finally, as we moved into an era where non-designers are increasingly supported to generate UI, I implemented automated design QA at the feature level. This ensured that even components that hadn’t been formalised into the design system yet maintained the same high quality. By establishing these constraints and workflows, I was able to safeguard our design quality while empowering the entire team to build faster and smarter.
More inventive designs, creative solutions, and successful collaborations.
Discover the rest — AI for media sellers, reporting foundations, climate-risk analytics, and the Smithsonian Asian-art collaborations.
