Global Design System
Overview
Prior to MPB launching its 5 year long rebuild of the platform, I worked in collaboration with Jon (Visual Interaction Designer) and Gess (Head of Design) to conceptualise and actualise MPB's comprehensive atomic Global Design System.
There were key iterations in getting it to the stage it is now:
Audit → Style guide → Frontend concentric → Zeroheight → Branching
Jump to Design Process for a process breakdown.
Throughout the 2 years I spent with MPB, I was the go-to person for key copy and localisation challenges. See UX Copywriting project I did early on for MPB for a glimpse into my passion for this.
Role:
- Designer (Key contributor and worked on original conception)
- UX Copywriter
- Localisation manager
Tools:
- Figma
- Zeroheight
- Storybook (Frontend Code Library)
- Confluence & Jira (Atlassian)
- Crowdin (Localisation tool)
Problem scope
- Brand incongruences.
- Outdated UI, often not following best practices.
- Tone of voice was B2B, inconsistent and without personality.
- The designs rarely considered our non-English markets (German, French, etc.)
UX Research
Any significant design changes were taken through user testing - via Maze (a platform that allows you to test your Figma Prototypes) or in-person user testing. I setup and conducted these during my time at MPB.
The Service Blueprint project is other research that was conducted to progress the design of the MPB platform.
I always kept a keen eye on customer feedback, we had a Slack thread where feedback was captured at a rate of thousands a month.
Early on I'd start my week sifting through this manually and document in a Notion database, later we signed up to Chattermill, which did that work for me!
Note: Designs were iterated on based on feedback from qual testing and CRO platform tests. Designs are then updated in Figma, then Zeroheight and then Jira tickets were created to summarise the work required.
Design Process
There were key iterations in its growth:
- Audit:
Analyse the current system and define a congruent style going through it. - Style guide:
The key components that define the brand - mainly the atomic components, buttons, fields, type, colours, etc. - Frontend development concentric:
FE naming conventions, implemented design tokens, - Zeroheight- One source of truth:
Jon reflected Figma's GDS into Zeroheight, this created a single source of truth that was only updated when designs were ready, not WIPs. - Branching:
Like Github, we implemented branches on the Figma GDS so they could be reviewed and implemented at once (reduces chance of breaking nested symbols when multiple designers are working on overlapping elements).
Development
I like to see designs as suggestive, experienced developers have great ideas, so we found it incredibly useful to have developers in concept conversations early on.
Working collaboratively with Frontend developers always ensured the vision of the designs came to life and delivers a better understanding of each other's processes.
