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.
Building foundations
Establishing design elements such as colour palette, typography, icons, and grid system formed a solid foundation for the design system. This new visual language informed the creation of modular and adaptable component designs, suitable for various contexts and use cases.
Collaborating closely with a team of engineers and product managers ensured that the design system being developed was closely aligned with the one we designed.
Design system documentation
Comprehensive and explicit design system documentation was created to ensure clear communication of guidance to technical teams, design teams, and editors, and to promote adherence during page building.
Templates
Article templates were enhanced to ensure smooth copy flow, with large and prominent images and embedded videos for visual appeal.
Concise and impactful headlines were crafted to captivate the reader's attention, while brief paragraphs aided in maintaining reader focus.
Interaction & engagement
Interactive formats such as podcasts, quizzes, and maps were introduced as engaging and accessible methods for conveying crucial information to patients.
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.
"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.
Selected works
andy@neonink.co
© 2024
Andy Marciniak