Sanofi Accelerator
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.
By applying UX best practices and methodologies, we aimed to put our users at the centre of everything we make, so that the transformation would be scalable across the business units globally.
As part of the UX team, my role focused on digital improving the experience on the Sanofi Campus Knowledgebase, applying accessibility best practices, and providing guidance on the use of imagery across the digital product.
1. User Research & Strategy for Sanofi Campus
Persona Development
We already knew that Sanofi Campus had three distinct user types, Healthcare Professionals, Scientists and Patients, but we needed to better understand how they wanted to interact with the content.
Research methods used:
-
user interviews,
-
observational methods
-
user diaries (video and written)
-
empathy mapping
The learnings are explained below
-
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.
-
Other information sources include the CDC, NICE, EMA and WHO.
-
Would like to receive email newsletters that are relevant.
-
Would like to download and print articles for reference, and to share with patients and colleagues.
Healthcare Professionals (HCPs)
Who are looking to stay up to date with the latest research and development and treatments in their areas of expertise.
-
They are pressed for time.
-
They want to understand what drugs are in the pipeline
-
Would like a more efficient way of keeping up with areas of interest, such as newsletters and targeted emails.
Need to keep up with the latest research and development of theraputic treatments and new ways of thinking about diseases
Research Scientists
-
Patients 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.
-
They want 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.
Want to understand their diagnosis, what treatments are available, and learn about other patients' journeys.
Patients
Key Recomendations
-
All users would be better supported by putting all content under one knowledge website and creating clear paths for different user types.
-
Allow users to see treatments across different diseases, since patients may have comorbidities (asthma and atopic dermatitis for example), where both conditions will improve with the same treatment.
-
Videos should always have subtitles and a downloadable transcript to support disabled and neurodivergent users.
-
Content layout should follow a consistent template, be easy to scan, and use tags, and suggest related articles to read next.
-
All content must meet at least the W3C accessibility standard (AA).
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.
Benchmark existing pages to the new design system.
Old Design
New 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.
