15gifts' Design Framework
My Role
Product Designer
My Team
Product Manager
Product Designer
Frontend Developer
Tools
Figma
Storybook
Supernova
Timeline
2023
Context
A multi-brand design system powering 15gifts' Guided Selling Engine for all the customers
Description
15gifts builds intelligent recommendation engines for major telecom and media brands like Vodafone, O2, T-Mobile and Verizon. Its Guided Selling Engine helps millions of customers find the right products through personalised recommendations. The challenge lies in balancing consistency with the need for heavy customisation for each brand.
When I joined, the design system reflected the challenges of scaling fast. Components existed, but they weren’t flexible enough for a product that served so many different customers. After a few months of designing for multiple implementations, the cracks started to show. Simple changes like adding icons to buttons or adjusting step counts in a calculator required detaching and rebuilding components from scratch. It slowed teams down, made iteration harder and created inconsistencies across customer experiences.
Scaling
Rebuilding the foundations
Instead of pushing for a full overhaul, I used quieter periods to gradually strengthen the foundation. Drawing inspiration from established design systems and industry standards, I reorganised our setup into three clear categories:
Journey Components (molecules and smaller elements)
Template Components (larger, reusable organisms)
Templates (complete, page-level layouts)
This structure wasn’t just about tidiness. It created a clearer hierarchy that made the system easier to scale and adapt as new partner needs emerged.
Component design
Making meaningful changes
Redesigning the answer component showed the impact of small, thoughtful updates. The original version had a single vague property and multiple variants for similar scenarios. I added clear options for variant, state, and selection visibility, making it obvious how the component should behave.
The improvements carried over to other molecules, giving us reliable building blocks for larger organisms like accordions and plan cards. This meant less time wrestling with limitations and more time focused on creating better experiences.
Implementation
Making it work in practice
Since there wasn’t much support for big changes, I kept things simple. I set up a separate space in our base file to build and test improved components, making sure everything worked properly before adding them to live builds. This let us keep improving things without disrupting ongoing work.
It paid off quickly. Designers could tweak components without breaking things, developers got clearer answers when questions came up, and builds became faster and more consistent.
