Core Design System

Context

An accessible design system for big biopharma

In 2022 GSK turned to Wolff Olins to rebrand as they spun off their consumer business. The move allows them to wholly dedicate themselves to science and technology. The new brand reflected that, focusing on bold forms and striking scientific imagery.

For further context on the 2022 rebrand, see Wolff Olins’s case study.

GSK is a FTSE 100 biopharma with digital touchpoints spanning public-facing brand sites, scientific tools for healthcare professionals, and internal platforms used across the business. Any design system would need to serve all of them.

This wasn’t my first project with GSK. Years of prior work through Interbrand had built the trust and internal relationships that opened the door to leading their first company-wide design system.

(Left) New GSK logo created by Wolff Olins with DNA Twist and Precision point holding shapes.

(Right) GSK employees on the Living Gradient created by Wolff Olins.

GSK's new brand in action at their London HQ.

Problem

A bold rebrand that didn’t work digitally

The rebrand’s digital problems went beyond the cosmetic. They affected accessibility, usability for specialist audiences, and the cohesion of a product landscape that had grown without shared foundations.

• The new visual identity worked well in brand-led experiences but not those that catered to user groups with specialised needs, like scientists and healthcare professionals.
• There were accessibility issues when the new visual identity was applied to digital interfaces, particularly around colour.
• GSK’s digital products and services lacked a shared design system, leaving them inconsistent with each other and with the brand.

Research and strategy

Understanding the brand and the business

An audit of the 2022 rebrand guidelines revealed it lacked the necessary foundations for digital. Rather than adapt the existing guidelines, I rebuilt from the ground up. This system would sit at the core of GSK’s brand with print and specialised guidelines radiating from it.

• I mapped the spectrum of digital products and services GSK currently provides. These range from expressive public-facing brand content to dense scientific tools for healthcare professionals.
• I formed a working group of representatives from GSK’s digital product teams to ensure the system reflected real needs across the business. Having worked with many of these teams before, the group was assembled quickly.
• I ran workshops focused on colour, layout, and typography to surface requirements and build stakeholder buy-in from the outset.

System architecture

Tokens, accessibility, and brand alignment by default

I designed the system from the perspective of the teams who would adopt it. Documentation accompanies every guideline, making the rationale behind each decision available to anyone working with the system. The result was a system that scales across platforms with accessibility built into its foundations.

• Built with design tokens to ensure the system adapts across devices, platforms, and colour modes.
• Resolved the rebrand’s accessibility issues at the token and component level, so every adopting team inherited them by default.
• Kept the core component set lean, covering only elements that could be truly generalised across GSK, so teams build on it rather than be confined by it.
• Extended the core library with dedicated iOS and Android component sets, giving native teams the building blocks to align GSK products with each platform’s UX paradigms.

Getting Started section of the design system. Explains the core system's role and relationship to product teams' work.

Implementation

Shipping, proving, and supporting adoption

Shipping the system was just the start. Real success meant proving it worked on live products, supporting the teams adopting it, and building the shared understanding needed for a token-based approach to take hold across GSK.

• Applied the system to gsk.com and GSK Brandhub (GSK’s digital asset management and brand site) as early proof points, with mockups extending the vision to data-rich interfaces and native platforms.
• Supported product teams hands-on as they integrated the system. Adoption was smoother because many of these teams had helped shape the system through working group sessions, so buy-in was built in from the start.
• Ran workshops to demystify tokens and multi-layered system architecture for teams new to the approach, helping them see the value.

GSK Brandhub, the company's internal brand guidelines hub, built using the core design system.

gsk.com updated to reflect the design system

Impact

A strong reception and growing adoption

The system is doing what it was built to do. Accessibility issues are resolved, adoption is spreading across GSK’s digital teams, and the response from product and brand teams has been strong.

• Accessibility issues resolved, unblocking digital adoption of the 2022 rebrand.
• Rolling out company-wide across GSK’s digital teams following the initial release.
• Proved the system in production on gsk.com and GSK Brandhub.

Lessons learned

Systematising design for a large organisation

A few things became clear over the course of the project. Most of them came down to recognising that a design system is as much an organisational product as a design one. Its success depends as much on how it fits into the company around it as on how well it is built.

• A focus on scope enabled strong adoption. A smaller set of well-considered components gave teams room to build on the system rather than fight against it.
• Accessibility has to live at the token layer. Fixing issues at the root meant every adopting team inherited the fixes without extra work.
• Stakeholder workshops are adoption work as much as research. They built the internal advocacy network that carried the system into each product team at rollout.
• Brand and design system work is best done together. Co-authoring the system with GSK’s brand leadership meant decisions were made collaboratively throughout the project, rather than reviewed only at the point of sign-off.

“Receiving so much positive feedback already, people are really impressed with how good all is – Thank you so much Interbrand!”

Anna Morrison, GSK Senior Brand Manager