simonbertrand

Context

Biogen, a pharmaceutical company specializing in neuroscience, created BHS (Biogen Healthcare Solution) to design, develop, and deliver innovative digital solutions for patients with neurological diseases and healthcare professionals. Cleo is one of these solutions, a mobile app designed to support people living with multiple sclerosis (MS) and their communities.

MS is a condition that affects the brain and spinal cord. While there is no cure, treatments can help manage symptoms and slow disease progression.

Mission

I joined the BHS team in March 2018, when the app's design was complete, and development had started. My responsibilities included:

• Representing Cleo at MS conferences to gather user feedback.
• Designing dashboards for the data team.
• Creating assets for app stores, including screenshots and promotional videos.
• Building design systems based on the existing design.
• Documenting changes for legal reviews.
• Improving the app based on store reviews, user testing, and data insights.
• Developing mockups and user flows for new features.
• Creating custom illustrations and interactive prototypes for user testing.
• Producing detailed video prototypes for developers to describe animations or specific behaviors.
• Providing comprehensive guidelines for developers and content teams.
• Conducting quality assurance (QA) to ensure high product standards.

App overview

Cleo helps people with MS by offering information, support, and tools to manage daily challenges. The app has four main sections: Explore, Program, Journal, Chat, and a Home as a shortcut hub.

App improvements

By leveraging user feedback, data analysis, and user testing, we continuously improve the app to meet user needs and enhance usability.

Color Simplification

To improve accessibility, we simplified the entire color system. We reduced the number of accent colors, removed gradients, and eliminated tones with insufficient contrast. This created a cleaner, more consistent visual language and ensured the interface met accessibility standards, especially for users with vision impairments.

Enhancing readability

Many MS patients experience vision or cognitive fatigue, and one recurring issue was low contrast and difficult-to-read interfaces. I improved overall readability by increasing text contrast, adjusting font sizes, and refining the hierarchy of information within each card. These adjustments made content easier to scan and reduced the cognitive load for daily use.

Redesigning the Home

Originally designed as an endless feed, the Home screen felt overwhelming and unclear for users. We reduced the number of cards and introduced clearer display rules so the screen highlighted a focused set of actions, like filling out their journal, reading a new article, or answering an MS-related quiz.

Optimizing Explore

We reworked the category system by reducing and renaming sections to make navigation clearer. We also introduced user-selected topics of interest to personalize the experience. Stock photos were gradually replaced with icons and illustrations wherever possible,

Redesigning Journal

We redesigned the Journal by shifting from a day-by-day calendar view to a tracker-based structure, making it much easier for users to see how each metric evolves over time. Each tracker now has a clear history, quick trend indicators with a color-coded scale, and the ability to create custom trackers. These changes made tracking more intuitive, more personal, and helped users better understand the progression of their condition at a glance.

Illustrations

The app’s original visuals felt generic and lacked personality. I worked on creating a new set of illustrations to give the app a more distinct and approachable identity. The goal was to make the interface more engaging, guide users through the experience, and replace stock-like imagery with icons and illustrations that better reflect the app’s tone and purpose.

Prototyping

We conducted monthly user tests with 7–8 participants living with MS, using different types of prototypes depending on the test's complexity:

Simple interaction

Tools like InVision were used for straightforward prototypes, especially for remote testing.

Complex interaction

For detailed interactions and animations, I used tools like Flinto or Framer Studio during on-site tests.

Guidelines

To ensure the app aligns with design standards, I provided detailed specifications for the engineering team.

Flow

Comprehensive flow diagrams illustrated user journeys and warnings for clarity.

Board

Screens were accompanied by guidelines for fonts, colors, and spacing.

Video

Specific animations or behaviors were documented through videos.

Legal review

Because this project involves people's health, the legal review process is really heavy.

Whenever there is a new release, for each country, every single screens of the application has to be reviewed by a legal team before it can be released. Every time we design a new screen or change an existing one (wording, imagery, UI,...) we have to make a review before it goes to development.

Create a new process

To simplify the legal review process, we developed a method to automatically generate PDFs containing all screens with accurate wording. This significantly sped up reviews and saved a lot of time for the teams.

Analytics Dashboard

I helped the data team create a visually appealing Google Analytics dashboard, making key metrics easy to read and understand at a glance.