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.
