As a designer passionate about UI, I specialise in the creation of Figma component libraries that seamlessly integrate system thinking with beautifully designed user interfaces. I focus on leveraging semantic tokens as the foundational elements to all design systems. With a eye for detail and a strong commitment to user-centric design principles, I actively promote the adoption and of design systems across the group. I worked in partnership with a top agency on the initial creation of the Staysure design system, and from that I created the Avanti, and Paying Too Much design systems. Working to maintain the systems that can adapt to the evolving needs of users and technological advancements. Recognising design systems as products, I advocate for their holistic use by designers, developers, QAs etc.
Becoming The ds guru
When I joined Staysure, the design department was chaotic – no real handovers, inconsistent UI elements, and each brand doing its own thing. I advocated for creating a design system and started with the atomic design methodology.
I created the initial system for Staysure 1.1, which was a big step forward for the group. The success of Staysure 1.1 was evident when we used the same strategy and structure for the Avanti 1.1 redesign, showing its flexibility. But the real challenge came with Staysure's rebranding. This led to creating a new token-based design system.
The business teamed up with a design consultancy for the brand evolution, and I took the lead as the design system designer. I worked closely with them in partnership to build the new system, leveraging the latest Figma release, integrating Figma variables and semantic tokens. Just nine months after starting the first design system, we had evolved our process once again.
Why Design Systems?
Design systems are extremely valuable for organisations like Staysure Group, offering consistency, efficiency, scalability, and alignment across all digital platforms and brands. They ensure adherence to brand guidelines, streamline workflows, create a single source of truth. Design systems enable Staysure to deliver exceptional digital experiences.
Atomic Design
After extensive research and watching many videos, I utilised Brad Frost's Atomic Design framework. This methodology builds interfaces from atoms, which cascade through every UI component, creating a more structured and scalable system.
Design Tokens
Design tokens are the core building blocks of a mature design system. They serve as a bridge between design and code, ensuring that visual consistency is maintained across all platforms and devices. These tokens are essentially named entities that store visual design attributes such as colours, fonts, spacing, and more. Design token give the designer or developer a fixed set of options to use when building user interfaces.
Figma Variables
Figma variables allow designers to create reusable tokens that can be updated across multiple design files. This functionality is particularly useful for maintaining consistency and making bulk updates. We used this to manage our design tokens directly within the design tool. This integration meant developers could extract the tokens as a .JSON and mirror the token used when building components.
Design System First
Adopting a "Design Systems First" mindset is crucial for the success of creating scalable design systems. This approach emphasises the importance of creating and maintaining a robust design system before diving into individual product designs. By prioritising the design system, this addresses consistency challenges early on.
Ways of Working
Implementing and maintaining a design system is as much about the processes and governance as it is about the design assets and tools themselves. A well-structured approach to governance ensures that the design system evolves in a controlled manner, maintaining consistency and quality across all projects.
Future Improvements
No design system is perfect, and there are several aspects I wish I could have influenced better. One significant challenge was effectively communicating my vision for the front-end architecture setup due to my limited development knowledge. The offshore developers struggled to build my vision, due to a skill gap on their side, and not understanding the technical consequences of their strategy.
❌ Storybook Implementation
The true power of Storybook was not utilised when implementing the design systems on the front end. The developers ended up using separate instances of components instead, making it incredibly difficult to manage in the application.
❌ Dedicated Squad
Without a dedicated squad the design systems weren’t really built or managed in Storybook. This lead to projects taking longer to delivery, with increasing inconsistencies throughout.
❌ True Multi Brand
With the capabilities of figma and storybook we should’ve been able to achieve a true multi-brand design system but we didn’t get buy in to run this like a product.
