Design System Integration
For Sanofi Accelerator
01 OVERVIEW
Integrating 200 separate drug brand websites into one consistent website - the Sanofi Campus Knowledgebase.
02 ROLE
The Sanofi Accelerator is an innovation centre within the global healthcare company aiming to transform the business with the use of digital experience, data and artificial intelligence.
As one of six CX 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.1 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.2 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 brand 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 kickoffs to explain workflow and timeline to stakeholders.
-
Redesign each product page to fit within the new design system.
Add a Title
04 RESEARCH
User & Business Research
To qualify and quantify our hypothesis that a single knowledgebase was necessary, I performed research by interviewing three types of users: Medical Professionals, Scientists, and Patients.
Research Methods
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.
User Interviews
I asked these questions to understand how Scientists and Medical Professionals performed their research:
-
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?
-
What is your biggest painpoint?
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.
Research to Gain 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.
INFORMATON 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.
INFORMATON SOURCES
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.
INFORMATON SOURCES
Medical Professionals, Google, Other Patients, Patient Groups on Facebook, YouTube
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.
Research Outcome
Users preferred the approach of a unified Knowledge Website with clear paths between different diseases because it saved them time.
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.
Accessible
Always provide subtitles and downloadable transcript to support disabled & neuro-divergent users.
All content must meet at least the W3C accessibility standard (AA).
Tags & Suggestions
Content layout should follow a consistent template, be easy to scan, use tags, and suggest related articles to read next.
04 DESIGN
Sanofi Campus Design
As the new design system was being rolled out concurrently, there was a lot of overlap between the process stages and I needed to be flexible and adapt to the startup nature of the process.
It was necessary to
Provide guidance and examples for migrating other Sanofi brand web-sites into the Sanofi Design System structure.
Establish guidelines to understand the decision-making process when migrating future content.
Establish initial design patterns and look for variations to add to the design system.
Design Migration Process
1.
Audit exiting content
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.
Design Phase
Here is a sample of some of the content that I redesigned for the new site.