Core Design System
Built GSK's first company-wide design system after their 2022 rebrand. Adopted by the five key product teams.
Context
GSK's 2022 rebrand by Wolff Olins created a bold visual identity. It worked for consumer marketing. It didn't work for GSK's digital products: the primary orange failed WCAG AA in some contexts, the consumer-marketing tone didn't suit specialist tools for healthcare professionals, and no shared design system existed.
What I built
GSK's first company-wide design system:
- 500+ tokens, accessibility resolved at the token layer so teams get compliant colours automatically
- A density mode for specialist tools that need more information in less space
- iOS and Android extensions. WCAG 2.1 AA throughout
Adoption through a cross-team working group I ran in weekly workshops. The five key product teams, the groups that create most of GSK's digital products, adopted the system. In production on gsk.com and Brandhub (GSK's digital asset management platform, also mine).
The arc
The design system was the culmination of Interbrand's GSK account, not its foundation. I started with AUREA (an antimicrobial-resistance data tool for healthcare professionals), then GSK Medical, then GSK Direct (B2B vaccine ordering). Each engagement was won by the previous one's success.
Impact
- 5/5 Product groups adoptedWorking group members drove adoption within teams.
- 500+ Primitive & semantic tokensAcross colour and density modes.
- WCAG AA CompliantColour accessibility solved at the token layer.
Receiving so much positive feedback already, people are really impressed with how good this all is.
Credits
Designed and led the adoption of GSK's first company-wide design system, from audit through to initial release. Defined the system architecture, built the core component library and the iOS and Android extensions, and resolved the rebrand's accessibility issues. Ran the cross-team working group whose buy-in carried the system into each product team at rollout.
- Alan Long Lead Product Designer, Interbrand
Designed and led the adoption of GSK's first company-wide design system, including the core component library, iOS and Android extensions, and accessibility resolved at the token layer. Ran the cross-team working group that carried the system into each product team at rollout.
- Damaris Homo Account Manager, Interbrand
Managed the timeline and the budget to ensure the project stayed on course. Provided guidance on what was in scope for the project.
- Anna Morrison Senior Brand Manager, GSK
Led the project from within GSK. Provided general support and project management, meeting with me several times a week. Introduced me to key stakeholders throughout GSK and organised milestone meetings in which we presented the project progress.
- Rowan Green Director, Brand Identity (Global Brand), GSK
Provided creative oversight in relation to GSK's brand. Since he was involved in the creative direction of GSK's rebrand, he was invaluable in making sure the design system was visually aligned with the brand.
- Phillipa Proctor Head of Brand Identity and Content Production, GSK
Provided strategic oversight in relation to GSK's brand. Since she was involved in the strategic direction of GSK's rebrand, she was invaluable in making sure the design system was strategically aligned with the brand.
- Jon Warden Global Director, Product and UX & Design, GSK
Represented the needs of GSK's largest product team, ensuring the design system was practical and effective for those using it daily. His guidance and sign-off during milestone reviews were essential for aligning the system with leadership's goals.
