KMLAU - Portfolio

15gifts' Design Framework

A multi-brand design system powering our Guided Selling Engine for all our customers

What is 15gifts?

15gifts specialises in intelligent recommendation engines for major telecom and media brands like Vodafone, O2, T-Mobile and Verizon. The Guided Selling Engine helps millions of customers find the right products through personalised recommendations. This creates unique design challenges - each partner needs a customised experience while maintaining the core functionality of the recommendation engine.

Every month, the platform processes millions of interactions and generates over 2 million product recommendations. Each partner implementation needs to reflect their brand while delivering a consistent, high-quality recommendation experience. This makes having a flexible, efficient design system not just beneficial, but crucial for the company's success.

A good start but…

When I joined 15gifts, I encountered a design system that reflected the challenges of rapid growth. While components existed, they lacked the flexibility needed for a scaling product. After several months of building experiences for different partners, the limitations became increasingly apparent – components that should have been adaptable were rigid, often requiring us to detach them from the main system for even minor modifications.

The implications went beyond small inconvenience. When we needed to adjust something as fundamental as the number of steppers in a pricing calculator or add an icon to a button, we couldn't simply modify properties. Instead, we had to detach entire components and rebuild them manually. This approach not only slowed down our ability to iterate quickly but also led to growing inconsistencies across our partner implementations.

Finding the Path Forward

Rather than attempting a complete overhaul, I took advantage of quieter periods to systematically improve our foundation. Drawing inspiration from industry standards and other design systems,

I started breaking our journey into three distinct categories
Journey Components (Molecules elements)
Template Components (Organisms)
Templates

This structure wasn't just about organisation – it was about creating a system that could grow and adapt with our needs.

Making Meaningful Changes

The transformation of our answer component illustrates the impact of this approach, a simple component but needed to be adaptable. The original version had a single, ambiguously named property that only controlled basic states and also several different variants to accommodate for multiple scenarios. The reimagined version offered clear, purposeful options – from variant selection to state and selection visibility. Every property name was chosen with intention, making it immediately clear to both designers and developers how components should behave.

Similar improvements across our molecule elements had a cascading effect. When building larger organisms like accordions and plan cards, we now had flexible, reliable building blocks to work with. This meant spending less time wrestling with component limitations and more time focusing on creating better user experiences.

A Pragmatic Approach to Change

With limited buy-in for large-scale changes, I adopted a practical strategy. I created a separate area in our base file for building and testing improved components, validating them thoroughly before rolling them out in new builds. This approach meant we could gradually introduce better practices without disrupting ongoing work.

The benefits became evident quickly. Designers could adapt components more freely, spending less time on technical fixes and more on user-focused improvements. When developers had questions, we could provide clear, confident answers about component behavior. Most importantly, we reduced build times while increasing consistency – a win that resonated with both the design team and leadership.

Example of the system in action

Under the hood for the result screen template

Looking Ahead

While a business pivot has shifted focus to new the new product, the lessons from this experience are shaping our future approach. We learned that effective design systems need both technical excellence and practical flexibility. They should reduce cognitive load for designers while maintaining the adaptability needed for diverse customer requirements.

Most importantly, we discovered that meaningful improvements don't always require complete overhauls – sometimes, they come from understanding your constraints and finding smart ways to work within them.

© KMLAU.

© KMLAU.

© KMLAU.