Design System Integration
For Sanofi Accelerator
01 OVERVIEW
This case study illustrates how I established consistent design standards used to integrate over 200 separate drug brand websites into one consistent website - the Sanofi Campus Knowledgebase to make the business more efficient and the information more accessible.
Example of a Page Migrated to the New Design System
02 ROLE
The Sanofi Accelerator is an innovation centre within the global healthcare company aiming to transform the practice of medicine with the use of digital, data and artificial intelligence.
As CX design lead, my role focused on improving the experience on the Sanofi Campus Knowledgebase, applying accessibility best practices, and to explore and develop work-flows to deploy a new global design system creating a cohesive and consistent knowledgebase for healthcare professionals, scientists and patients. As one of six design leads embedded in agile product teams, my role was hands on from product ideation and strategy through to UX and UI design, as well as contributing to the design system.
03 KEY CHALLENGES
CHALLENGE
Complicated to achieve consistency when pulling content from 200 uniquely branded sites with different content and navigation structures, managed by different teams.
SOLUTION
Devise a clear process to explain the changes and reason for the project with stakeholders.
Managing multiple stakeholders across different external agencies.
Hold regular standups, presentations design sprints and worksessions to keep everyone facing in the same direction.
Pace of project
Use agile methodologies to chunk out the work. Hold planning sessions with all stakeholders.
Working in a new Design System that was still in development.
Benchmark content to new design system
develop new pattern if content did not fit, and socialize this proposal to design team for approval to be added to design system.
03 PROCESS
Managing Stakeholders & Process
The idea of moving from more than 200 separate websites, to one unified knowledgebase was culturally complicated for Sanofi and the brands. A process was developed to explain the big picture and communicate the value of the Sanofi Campus Knowledgebase to stakeholders and explain the workflow process.
How I defined the process:
-
Identify which sites are included.
-
Develop timeline of integration for brands and sites.
-
Kickoff meeting- to introduce and explain what to expect for all participants.
-
Hold individual Brand meetings to explain workflow and timeline to stakeholders.
03 PROCESS
Sanofi Campus Design
Creating a unified knowledge site for medical professionals, scientists and patients from numerous disparate sub-brand websites.
Part of this process included
-
Providing guidance for migrating other Sanofi brand web-sites into the Sanofi Design System structure.
-
Establishing guidelines to understand the decision-making process when migrating future content.
-
Establishing initial design patterns and look for variations to add to the design system.
Design Migration Process
With the business owner, I devised a process to migrate content from the over 200 existing websites into the Sanofi Knowledge Base site.
1.
Content Audit & editing.
2.
Map to Design System.
Identify gaps.
Design solutions to address gaps.
3.
Internal design review to approve new design patterns for the Design System.
4.
Present design to Product Owner & Brand Manager.
Add a Title
04 RESEARCH
User & Business Research
To qualify and quantify our hypothesis that a single knowledgebase was necessary, we performed research so that we could understand the business need, our users and communicate this story to Sanofians.
Research Methods
User Interviews
Scientists and Medical Professionals were interviewed about their research methods:
-
Which resources/media do you use for your research on diseases?
-
How do you stay current about diseases and treatments?
-
How long do you spend on research?
-
How often do you perform research?
-
How easy is it to find the information you're looking for?
-
What would make your process faster?
-
When do you do your research?
User Diaries
Most medical professionals preferred making 2-3 minute audio or video diaries to observation. We asked them to explain out loud the research topic, why they chose it and level of success, as well as length.
Observation
I observed patients looking online for information about a disease, asking them to speak out loud their thoughts and process. I shared a prototype showing three different versions of the same webpage to understand which they preferred.
Gaining Key Insights
Through the research, insights were gained from our three different user groups...
Medical Professionals (HCPs)
Need to stay up to date with the latest research and development and treatments in their areas of expertise.
PAIN POINTS
-
Are stretched for time and overwhelmed by information.
-
After a full day of seeing patients, they typically spend 30 minutes looking for relevant updates and knowledge to help their patients.
INFORMATION SOURCES
-
CDC, NICE, EMA and WHO.
WANTS TO
-
Receive relevant email newsletters.
-
Download and print articles for reference, and to share with patients and colleagues.
Scientists
Need to keep up with the latest research & development of therapeutic treatments & new ways of thinking about diseases.
PAIN POINTS
-
Are pressed for time.
-
Difficult to find out what drugs are in the pipeline.
INFORMATION SOURCES
-
Other information sources include the CDC, NICE, EMA and WHO.
WANTS TO
A more efficient way of keeping up with areas of interest, such as newsletters and targeted emails.
Patients
Want to understand their diagnosis, what treatments are available, and learn about other patients' journeys.
PAIN POINTS
-
Are often scared of their diagnoses and find it easy to fall 'down the rabbit hole' on Google.
-
Many articles are difficult for a non-medically trained person to understand.
-
There is too much information, often it is conflicting, outdated, or wrong.
WANTS TO
Understand what it is like to live with their disease and how other people cope.
Would like customized information and articles, with quizzes and other interactive content to make it more useful and memorable.
Quantifying Our Hypothesis
From the research sessions, it was clear that users preferred the approach of a unified Knowledge Website with clear paths between different diseases.
Key Recomendations
See Across Diseases
Allow users to see treatments across different diseases, since patients may have comorbidities (asthma and atopic dermatitis for example), where both conditions utilise the same treatment.
Transcripts & Subtitles
Always provide subtitles and a downloadable transcript to support disabled & neurodivergent us users.
Tags & Suggestions
Content layout should follow a consistent template, be easy to scan, use tags, and suggest related articles to read next.
Accessible
All content must meet at least the W3C accessibility standard (AA).
Design Phase
Componentize layouts
Success measurements
What i would have liked to do
Develop Hypotheses
Initial Benchmark
Extend & Innovate
Benchmark content to new design system
develop new pattern if content did not fit, and socialize this proposal to design team for approval to be added to design system.
Identify Unique Patterns
Benchmark existing pages to the new design system.
Old Design
1. Navigation Structure
Replace each legacy site's navigation with the new Sanofi Campus navigation.
Old navigation
-
Maximum of 3-5 links concerning symptoms and treatment
New navigation: All Levels
New navigation: Level 2 - Breadcrumb
While the design system contained a top navigation pattern, it was necessary to add a third navigation area for each disease area.
New navigation
New navigation: Level 1
2. Hero Area
Next, it was necessary to look for ways to redesign the hero area, while exploring and establishing future design and content patterns.
Old Hero
Below: Consistent hero structure, based on the design system guidelines.
-
There are too many messages and no heirarchy of information, so there is a lack of clarity.
-
The image is a mixed metaphor that does not communicate well.
-
Due to the dark colours and gradients, the header feels heavy and dated
3. Content Design Patterns
Using existing content from the COPD site, there was an opportunity to think systematically in order to establish some initial design patterns. Additional patterns, could be submitted to governance as they were designed.
Creation of Customizable Design Patterns
-
Using the COPD page as an example, existing content was analyzed and reorganized so that the information is not overwhelming and is more digestible.
-
Templates have been provided for the most common layout types.
-
Content form the previous layout has been edited by the content team, letters are indicating relationship between the old and new versions.
3.1 Example of Pattern 1 - Map to Light Variant
Below: Updated Section
3.2 Example of Pattern 2- Light Variant
Content Reworked Into Pattern 2 Quote, Variant: Light
3.3 Example of Pattern 1- Dark Variant
Below: Existing Layout - content is scattered across different sections, which makes it difficult to digest.
Below: Content Consolodated Into Pattern 1, Variant: Dark
3.4 Example of Pattern 3: Carousel
Below: New Section Using Pattern 3,
3.4 Example of Pattern 4: Statistic - Light
Below: New Section Using Pattern 3,
3.5 Example of Pattern 5 - Two Columns
Below: New Section Using Pattern 3,
Footer
Replace old footer with expanded footer with sign up area.
Below: updated footer
3. Visualization Guidelines
Developing Guidelines for Imagery
We needed standards for visual storytelling on digital platforms. My role was to develop and expand our visual language of imagery to address our audience sectors across all markets. Please ask to see these explorations.
Four Types of Visualization
-
Categories are defined according to the audience being addressed.
-
The tone varies, according to the type of content.
-
These should feel distinct, but part of the brand.
-
When choosing illustrations, consider the audience, their level of scientific knowledge, their purpose in interacting with the information presented.
A Day in the Life of a Patient Exploration
This series of illustrations was used to both explore an illustrative tone, as well as to socialize ideas of patients as people living with illness so that all stakeholders approached patients with empathy; a key pillar of our UX strategy.
In this story, the young father goes about his everyday life, as he is suffering from psoriasis.
