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 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?
-
What is your biggest painpoint?
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.
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.
Transcripts & Subtitles
Always provide subtitles and a downloadable transcript to support disabled & neurodivergent 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).
04 DESIGN
Sanofi Campus Design
As the new design system was being rolled out
concurrently, there was a lot of overlap between the process and I needed to be flexible.
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
Below is my 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.