ViiV Healthcare
Case Study Details
Date September 2020 to April 2021
Client ViiV Healthcare
Project Re-platforming 50+ Websites Across 13 Worldwide Markets in 9 Languages
Role Global Lead UX
Tools Figma / FigJam / InVision / Jira / Sketch / Slack / Zeplin
“I’ve had the pleasure of working with Marlon as part of a replatforming/build and Design system creation project, and both Internal teams and our Clients valued his opinion and guidance due to his strong experience and always on-point recommendations. I’d strongly recommend Marlon; know you’ll be in safe hands with him.”
Introduction
ViiV Healthcare, a leader in the treatment of HIV, embarked on a transformative journey to elevate their digital presence. As the Global Lead UX contractor collaborating with Wunderman Thompson, the mission was to re-platform over 50 websites across 13 worldwide markets and 9 languages. This case study explores the strategies and methodologies employed to achieve design excellence within the constraints of the healthcare industry.
Fig 1.1 ViiV Healthcare homepage
Challenges
Complex Multilingual Ecosystem: The project encompassed 50+ mobile-responsive websites, each available in 9 languages, making consistency and scalability a formidable challenge (see Fig 1.2 below)
Diverse Content: ViiV offered 17 different HIV drugs, each requiring its own dedicated web presence and branding.
Regulatory Compliance: Stringent governance over medical copy-writing practices was essential to meet industry standards.
Design Consistency: Ensuring consistent design across various websites was a primary goal.
Component Reusability: Refactoring Sketch components to be reusable and scalable to enhance development efficiency.
Version Control: Introducing the Plant plugin for Sketch to ensure design version control to allow collaboration between the internal design team and partner design agencies.
Fig 1.2 - Example of multi-lingual ViiV website showing language selector modal
The Approach
Research and Discovery: Along with a team of highly-skilled business analysts, project managers, product owners and scrum masters, we initiated the project by conducting extensive research into ViiV's brand guidelines, global governance and medical content requirements. This laid the foundation for our design strategy and process (see Fig 1.3 below).
Low-Fidelity Wireframes: An extensive library of low-fidelity wireframes were created in Sketch to ratify design thinking during usability testing before being used as the framework for high-fidelity designs and prototyping (see Fig 1.4 below).
High-fidelity Sketch Prototypes: Leveraging Sketch, we created high-fidelity prototypes that incorporated ViiV's brand elements and adhered to strict guidelines for user experience (see Fig 1.5 below)
InVision Design System: InVision became our central hub for maintaining a comprehensive design system. This enabled us to manage design consistency across multiple websites efficiently. The design system went through UI processes similar to any website including production of detailed information architecture (see Fig 1.6 below).
Version Control with Plant: Plant, a Sketch plugin, was introduced to ensure version control, allowing us to track changes and maintain design coherence throughout the project's lifecycle.
Component Refactoring: We refactored Sketch components to make them reusable and scalable, reducing design redundancy and accelerating the development process.
Component Library Documentation: A well-documented component library was established within InVision and Jira. This allowed developers to easily access and implement design elements in accordance with ViiV's guidelines.
Fig 1.3 - ViiV UX and Design Process (high-level)
Fig 1.4 - Sample wireframe from ViiV Healthcare
Fig 1.5 - Sample page from ViiV Healthcare
Fig 1.6 - Information architecture for ViiV Design System
Results and Outcomes
Enhanced User Experience: The redesigned websites offer an improved user experience, making it easier for patients and healthcare professionals to access critical information.
Design Consistency: By using InVision and Plant, we ensured that design consistency was maintained across all websites, languages, and markets, aligning with ViiV's global brand.
Efficient Development: The refactored components and comprehensive documentation in Jira streamlined the development process, reducing time-to-market.
Regulatory Compliance: Strict governance over medical copy-writing practices ensured that all content met industry standards and regulations.
Conclusion
As the Global Lead UX contractor for ViiV Healthcare's web ecosystem re-platforming, and the fruitful collaboration with Wunderman Thompson, the team successfully addressed the complex challenges of managing multiple mobile-responsive websites, languages and medical regulatory requirements. The introduction of Plant for Sketch, a well-documented component library, and adherence to ViiV's brand guidelines played pivotal roles in achieving design excellence and user satisfaction. The enhanced digital presence aligns with ViiV Healthcare's commitment to providing comprehensive information and support to those affected by HIV worldwide.
