Viiv Healthcare

Helping to raise awareness of the fight against HIV and AIDS through the creation of a multi-brand design system

Client: ViiV Healthcare/GSK
Role: Product Design Lead, Research, UI Design, Design System
Agency: Wunderman Thompson
Year: 2021

ViiV Healthcare's digital ecosystem lacked formalised and consistent design and governance standards. Its two primary sites, along with micro-sites and sub-brands, were fragmented and inconsistent in their identities and user experiences.

External agencies had established their own standards for UX, UI elements, content, and components, leading to a lack of cohesion. Additionally, a recent global rebranding effort needed to be reflected digitally.

Objectives

Conducted in-depth functional and experience audits of the existing ecosystem landscape.

Creation of refreshed & contemporary digital brand into a component-based design system.

Worked with development teams to integrate the design system into existing workflows and technologies.

Auditing and sketching

By conducting functional and user experience audits of the existing site, we gained a thorough understanding of its structure, templates, and components.

Based on our findings, we recommended enhancements to existing components and introduced new ones as necessary, ensuring that both user needs and business objectives were met.

High-fidelity wireframes were used to shape the new experience, providing a detailed and comprehensive representation of the final product, facilitating a smooth transition to the design phase.

We made significant improvements to the user experience, including layout, storytelling, navigation, usability, and accessibility, to be applied consistently across the ecosystem.

Viiv-Case-study-IA
Viiv-Case-study-wires

Building foundations

Establishing core design elements such as the color palette, typography, iconography, and grid system-laid a strong foundation for the design system. This cohesive visual language guided the development of modular, adaptable components tailored to diverse contexts and use cases.

Through close collaboration with engineers and product managers, we ensured the design system was seamlessly aligned with both the original vision and practical implementation needs, fostering consistency and efficiency across the product.

Viiv-Case-study-Design-system

Design system documentation

We developed thorough and easy-to-understand design system documentation to clearly communicate guidelines to technical teams, designers, and editors-helping everyone stay aligned and ensuring consistency throughout the page-building process.

Viiv-Case-study-Design-system-documentation

Templates

Article templates were improved to create a natural reading experience, featuring bold, eye-catching images and embedded videos that add visual interest.

Clear, concise headlines were designed to grab the reader’s attention, while short, focused paragraphs help maintain engagement and readability throughout the article.

Viiv-Case-study-Articles

Interaction & engagement

Interactive formats such as podcasts, quizzes, and maps were introduced as engaging and accessible methods for conveying valuable information to patients.

Viiv-Case-study-Quiz-map
Viiv-Case-study-Multimedia

A hub for Healthcare Professionals

The Healthcare Professional site posed numerous challenges, particularly in presenting intricate technical information.

The design system was crafted with sufficient flexibility to ensure readability and digestibility of complex charts and lengthy content.

Viiv-Case-study-HCP

"This work really helps sell the business case for using design systems across GSK..."

— Richard Harvey, Global Digital Lead, ViiV Healthcare

Impact

The project team successfully navigated the intricate challenges of managing multiple websites, languages, and medical regulatory requirements.

Following the implementation of the design system, it played a pivotal role in the re-platforming process, enabling the alignment of over 50 websites across 13 global markets with the new experience and visual identity swiftly, efficiently, and at scale.

By establishing a single source of truth, all collaborating agencies, tech teams, editors, and stakeholders were brought together under unified governance and guidelines, laying a solid foundation for future initiatives.

This enhancement in their digital presence underscores their dedication to providing comprehensive information and support for individuals impacted by HIV on a global scale.

andy@neonink.co

© 2025
Andy Marciniak

View