A design system created with adaptation in mind

When I was working on Scandinavian Photo's design system, a lot was going on in our department. We were launching a new store concept, rebranding, and undergoing a large reorg. So, I had to make sure our design system could handle both our current situation and also easily adjust to upcoming initiatives and changes.

Defining our design direction through workshops

During our rebrand, I noticed that designers were using "does this feel like SP" as a reference for design. However, what content creators and designers meant by that was highly individual. So, I took the lead in organising a series of workshops to define clear principles for our new brand direction.

Icreased collaboration 🤝

As a result, our discussions improved, creating more coherent outputs and making it way easier to give and recive feedback.

Modular design system for multiple departments

Since the design system would be utilised by various teams using different parts of the design system, I divided it into separate modules. This reduced clutter and simplifying the work process for any given design project.

Creating value for the marketing team ✨

To encourage content creators to use the design system, the marketing module focused on eliminating repetitive tasks. Close collaboration during the rollout and quickly updating bugs were key factors to create engagement.

A design system that can adapt

As we kept adjusting brand colors continuously, the design system needed to be flexible to adapt to our evolving direction.

Design tokens ✨

To accomplish this, I used semantic tokens to easily change color on specific groups of elements.

A systematic approach to lightweight components

Heavy compontnets quickly creates large files. Developers, who frequently use Figma through browser, often complain about how slow it is to navigating large files. So, to remove frustration and slow prototypes, I focused on keeping components as light as possible.

Prioritising boolean over variants 🚀

Two strategies were to prioritising boolean over variants and breaking up components where possible.

Early iterations of button component.

Next project