Storio Design System
Storio group is made up of 6 brands across 13 countries, serving over 11 million customers, and making them a leading personalised photo products company in Europe. Their ethos is to bring your stories to life through a range of high-quality personalised photo products, like photo books, wall decor, calendars and gifts.
My Role
- Team Lead of 3 Designers & 6 Developers
- Design Lead
- Migration Audit and Documentation
- Responsible for platform alignment
The Challenge
Storio's efforts to align their design language and React implementation had stalled after attempting to Migrate and rebuild their ARC and ARC2 design systems.
The ARC3 Design System goals were to:
1. Align brand assets from merging 3 major brands, acquiring and integrating a further 3 brands, and creating an entirely new Group Brand.
2. Align platform design language UI and assets from Web, App, Desktop Software and Internal tooling.
3. Aim to be Accessible for EAA legislation to WCAG 2.2 and 2.3 .
4. Enable developers to tokenise and rebuild in React for fast deployment.
5. Build the practices and knowledge needed to maintain and scale the design system.
The Approach
For such a fundamental change to the way the company operated with design systems in the past, buy-in and stakeholder management was key. For this, the 'how' we carried out this project was as important as the end result.
- Team alignment of best practices
- Reviewed known enterprise-level design systems
- Reviewed past examples from my previous roles
- Reviewed Accessibility guidelines and changes
- Reviews best practice design token structures
- Audit of current implimentation
- Documented where current design system UI was used vs hardcoded
- Documented dependancies across platforms and journeys
- Ran discoveries on design and tech debt introduced over time
- Gathered conflicting Brand assets and Platform UI
- Consulted with 9 departments that need to consume or work with the Design System
- Product Design
- Product Creative
- Brand Studio
- Merchandising
- Developer teams (platforms x4)
- Content & Copy (localisation)
- Ways of working, Governace and Change management
- Consulted with 7 departments that need to consume or work with the Design System
- 'Design System Guild' formation with representation from each stakeholder group
- Different ways to consume the Design System
- Storio Best Practices and Principles
- Change management Ways of Working
The Results
With the governance groundwork set, resulting design system structure for formed around the idea of different 'conversations' that would need to be had with stakeholder groups using it:
- Brand Foundation layer (multi-brand) - Atom and sub-atom level aimed at the tokenisation, look and feel of any system.
- Components & Blocks layer (multi-platform) - Aligning the UI and functional elements of all platforms.
- Pages and Flows (multi-language) - Allowing teams to craft and visualise end-to-end journeys in multiple languages.
Multi-Brand, Multi-Platform, Multi-Lingual, and WCAG2.2 Compliant
Design Token structure and React libraries devloped
Organisation-wide adoption of multi-brand and design language
Cross functional ways of working and change management established
"That is probably one of the most comprehensive Design Systems I've ever seen. I'm impressed at the incredible amount of detail... and a really solid approach with gaining buy-in from engineering teams."
Mark Burnard
Product Director, Storio Group
