Problem statement
Designers were constantly frustrated with repeatedly solving the same problems. Developers were exhausted with having to custom style each component and grappling with a chaotic codebase. Producers were forever perplexed by the lawlessness of the content model builds in the CMS. Testers were fed up with no single source of truth for QA.
We were suffering with:
A spaghetti network of duplicated design and development efforts
A federated contribution model with no governance
Low code parity to design intention
No FED Chapter governance
No scalable strategy in place
Bottlenecks and repetition between UX and UI
Delivering inconsistent customer experiences
So, in July 2019, we began our design system journey.
The idea
Our mission
The scalable impact
So, what will it do?
The commercial value
Designers, developers, producers and testers were having to waste a lot of time clarifying details, duplicating build efforts and making mundane decisions. By automating a lot of this, they could be freed up to innovate and problem solve the chunkier customer problems.
Wasted time = Unhappy team members
Unhappy team members = high turnover
High turnover = Wasted money
Wasted money = Unhappy leadership
The Belong Design System DNA
Brand Purpose
Logos
Fonts
Colours
Photography
Tone of Voice
Content Guidelines
Figma Component Library
Technical Documentation
Usability Guidelines (inc accessibility)
Illustration Library
Spot Icon Library
System Icon Library
Grid Breakpoints
Component Build
Storybook Documentation
Variables / Tokens
Content Model Requirements
Naming Conventions
URL Structures
SEO, Security and Accessibility Documentation
Prioritised Delivery Roadmap
The deliverables
60+ Component UI Kit & Pattern Library (Figma)
Component Technical Documentation (Figma)
Usability Guidelines (Figma / Zeroheight)
Accessibility Requirements and Guidelines (Figma / Zeroheight)
UI Kit React Components (Storybook)
CMS Content Models CMS (Contentful)
1 hour Weekly ☄️ Design System Jam
Figma, Storybook and Contentful Onboarding
All components designed and built to AA compliance, with guidance written into build Tech Docs and Usability Guidelines