simonbertrand

Year

2018-2019

Type

mobile application

Role

Lead UX/UI

Context

Biogen, a pharmaceutical laboratory specialized in neuroscience, has created an entity called BHS (Biogen healthcare solution). This entity designs, develops and delivers innovative digital solutions to patients living with neurological diseases and to healthcare professionals. One of the solutions created is called Cleo, a mobile application dedicated to people living with multiple sclerosis (MS) and their support communities.

MS is a potentially disabling disease of the brain and spinal cord. There's no cure for multiple sclerosis. However, treatments can help speed recovery from attacks, modify the course of the disease and manage symptoms.

Mission

I joined the BHS team in March 2018. The application was already designed and the development had already started.

I have assumed all of the following functions:

Tool used

App presentation

Cleo aims to support people living with multiple sclerosis (MS) providing them with information, support and tools to overcome the challenges of everyday life. The app is divided into 4 mains features: Explore, Program, Journal and a chat. There is also a home which play the role of a shortcuts hub.

Home

The home is a hub of shortcuts which redirect the users to the different sections of the application.

Explore

The Explore section allows the users to explore articles and videos explaining how to live better with MS, and providing reliable health information, patient testimonials and practical advice. They can customize the type of content they are interested in for a more personalized experience.

Journal

Users can keep a diary of their symptoms, mood, sleep quality, fatigue, physical activities. They can create reports to share and discuss with their healthcare team. They can also schedule appointments and medication reminders.

Wellness programs

Users can access various exercise and wellness programs developed by health professionals and adapted to their daily life with multiple sclerosis. Other types of programs will be soon available (sitting exercises, yoga, meditation, ...).

Connect with nurse educators

Users can access nurse educators who have extensive knowledge of MS. The nurse is able to give advice and answer questions related to everyday life with MS.

App improvement

Thanks to data analysis, user feedback from stores and user testing, we are constantly improving the app in order to answer the user need and make it easier to use.

Improving readability across the app

People living with MS are subject to vision issue. However one of the main issues in the app is the lack of contrast and readability. I worked on the color contrast and font size.

Old card
New card
Change Home paradigm

When we launched the app, the Home was a feed where you could scroll indefinitely. People found it confusing so we changed the paradigm to make it more like a to-do list of the day.

Change Explore paradigm

We also changed the Explore section to put in exergue the categories of the app and show the variety of the content.

Illustrations

There are many illustrations used in the app. The first set of illustrations created when we launched the app in May was lacking appeal so I created a new set of illustrations to give more personality to the app.

Some illustration use across the app

Prototyping

We have the great opportunity to run user tests on a monthly basis with 7-8 persons living with MS. Most of the time we use prototype during the test. Depending on what we want to test we use different levels of prototype.

Simple interaction

When we want to test a feature with a simple interaction, I use tools like Invision. It is easy to set up and is adapted for remote test.

Complex interaction

When we want to do a test with complex interactions and animation, I use tools like Flinto or Framer studio. As the set up is more complex, we run test with people on site.

Guidelines

To be sure that the app developed is perfectly aligned and conform with the design in terms of UI and UX we try to provide detailed and clear spec to the engineering team.

Flow

I made flows with the app screens and important warning. They tend to help illustrate and to better the understanding of the user stories.

An extract from the search flow
Board

For each type of screen in the app I provide a board with all the needed spec (font, color, spacing,...).

An extract from the search bar guideline
Video

When necessary I provide videos with specific behavior/animation for the engineering team.

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

I had to create a new process in order to generates a PDF with all the app screens with the proper wording for each country.

A page from the PDF book review