Outside|In: Multiple Sclerosis

Bringing to life an immersive 3D visualization tool that breaks down the complexity of MS and how it affects the body

Background

In 2017 there was a medical breakthrough when the FDA approved Ocrevus, the first disease-modifying therapy for progressive and relapsing Multiple Sclerosis (MS). Following this news, we launched Outside|In: Multiple Sclerosis at Everydayhealth.com to educate MS patients, both newly diagnosed and already managing MS, about different types of symptoms, symptom progression and symptom severity. This tool also features a doctor discussion guide to help patients proactively manage MS and improve quality of life.

As Director of Product Design, I crystalized the vision for Outside|In by leading the creative direction and user experience from brainstorm to final launch. I focused on designing an educational and meaningful experience that provides a platform and voice for people struggling with the unpredictability of having Multiple Sclerosis. By using powerful and interactive visualizations, I wanted patients, caregivers, friends and family to better understand Multiple Sclerosis, its impact on people's lives and shed misconceptions about this invisible disease.

Role

Creative Direction
Concept
UX & UI Design
Interaction Design
3D Storyboarding
User Research

Platform

3D Visualization
Responsive Web

Launched

2017

It Takes A Village

Christine Fitts, UX Researcher
Kemar Swaby, UX Designer
Alyssa Etier, Deputy Editor
Katy Merlo, Product Manager
Deepak Gupta, Front End
Jignesh Viras, Tech Lead

Multiple Sclerosis is unpredictable

An estimated 2.3 million people worldwide have MS but the exact number is unknown. MS affects multiple functions including movement, sensation, memory, concentration and speech. There’s little consistency in symptoms between people which makes identifying MS difficult.

To gain better insight into the condition, I wanted to identify what type of MS content ranks high on Everydayhealth.com. I worked with Product and BI to pull data on sessions, page views and engagement. 63% of total visits (unique and return combined) engaged with content related to symptom impact and management, confirming the topic's importance to MS patients.

MS Content by Topic

Symptom Management
Diagnosis
Treatment
Physical Therapy
Complications
Risk Factors
Nutrition
Alt Therapy
Other

The Challenge

Every person's MS is different

How do you create an inclusive experience for a disease that is unique to each person? Some people don't experience MS symptoms most of their lives while others can have severe symptoms that never go away. Every person’s symptoms, severity, duration and progression of symptoms is unique.

Brainstorming, sketching and mapping commonalities

I worked side-by-side with our Deputy Editor to brainstorm ideas and define the concept of our new tool. We asked ourselves "What is our story?" and mapped out potential commonalities between symptoms, types of MS and people's experiences. We realized that finding a shared story was difficult and that became the concept of our story: Every person's MS is different.

Artfully combining story and science

My goal was to create an experience that effectively captures the uniqueness of every person's MS, incorporates personal insights and simultaneously provides informative and factual medical information to explain what happens inside the body.

The Story: How people with MS feel

In interviews with MS patients, I learned how MS manifests itself in every aspect of their lives. At home people feel incapable of completing common tasks due to fatigue. At work they feel dismissed by coworkers who think they’re exaggerating their fatigue and are extremely forgetful. Some friends even think they are drunk due to walking and balance issues. In short, people expressed feeling lack of control, misunderstood, alone and invisible.

The Science: What happens inside the body

To visualize how MS attacks the nervous system I worked with BioDigital, a biomedical 3D visualization studio, to design interactive and scientifically accurate models of the human body so patients can better understand MS and how it manifests itself in the body.

Putting our users first

In order for Outside|In to be successful from a product and business perspective, the tool needed to resonate with users through engagement, trust and credibility. As the UX and Design lead, I advocated for our users' needs and created internal alignment with key stakeholders. By successfully accomplishing the following goals we would reach our target KPIs:

Create a comprehensive, easy-to-understand guide for patients to learn and really understand what's going on inside their body
Represent the myriad of feelings expressed by people who struggle with MS' unpredictability
Shed misconceptions about MS and educate caregivers, friends and families so they can put themselves in patients' shoes and provide better support

Working cross-functionally, internally and with external partners

Robust collaboration throughout the product's life cycle between internal teams and external partners was crucial to the success of Outside|In. At Everyday Health, I led design check-ins with Product, Editorial, Marketing and SEO and iteratively updated wireframes, prototypes and designs. Externally, I coordinated check-ins with BioDigital's 3D studio to provide creative direction and UX/UI feedback on the 3D visualizations. Simultaneously, I also reviewed all work in progress and final designs with our medical partner (neurologist) from NYU Langone to ensure medical accuracy.

Storyboarding MS symptoms

I narrowed 3D visualizations to 6 common symptoms: vision problems, fatigue, cognitive decline, spasticity, numbness and tingling and bladder problems.

I created a unique storyboard for each symptom that effectively visualizes the symptom in relation to the body. For example, I created a comparison toggle for vision that compares what normal vs affected vision looks like. For numbness and tingling, I designed an animation that shows what happens between the brain and the affected body part.

Each round of storyboards was presented to BioDigital to give them creative direction for the 3D renderings, and to our medical expert at NYU Langone to ensure medical accuracy. This process continued throughout the entire project until we launched.

Creative direction

Inspired by see-through medical illustrations, scientific imagery and magnetic imaging, I opted for a simple visual style that shows a translucent body and focuses on what's inside. This aligned perfectly with the concept of outside vs. inside.

Images are not created or owned by me

Color palette

Wireframing and prototyping

In various iterations, I combined all symptoms, visuals and content into a cohesive experience that was easy to navigate. I presented early wireframes to developers and collaborated closely with them to ensure technical feasibility and make necessary updates on the fly within our allotted 2 sprints.

A visual journey through Multiple Sclerosis

Outside|In launched as a dynamic single-page experience with 3D visualizations, images, illustrations and interactive widgets. Close collaboration with the development team was critical to ensure optimized page speed performance, fast 3D-visual rendering and seamless navigation on this content-heavy page.

Seeing through the eyes of others

It’s difficult to know how MS feels when you don't have it. I designed a clickable comparison widget to help us understand MS from a first-person perspective. For vision problems I compared what "normal" looks like vs. affected states caused by optic neuritis.

Visualizing invisible MS symptoms

Under my creative direction, the designers on my team created illustrations that show the invisible symptoms of MS including numbness and tingling.

Real insights and anecdotes

We incorporated personal stories, gathered during patient interviews, throughout the tool to connect our users to real experiences and voices.

Vision: “It looks a little cloudy, like you’re in a slightly foggy room. When you live with it so long, you adapt and don’t even notice.”

Spasticity: "It’s like my muscles are locked up. My legs feel like they are in a concrete case and I can’t move them.”

Cog Fog: “I’m getting really good at making myself lists because I forget things. Most days I look at my list, and I know what to do. But then there are days when I don’t know what any of it means.”

Numbness and Tingling: "It feels like your skin is crawling, or like after you sit on grass — that itchiness, a prickly feeling. It’s almost like an excessive chill, only you aren’t cold. When it gets intense, it’s more of a numb feeling.I can see my fingers moving, but I can’t feel that movement.”

Navigating by symptom

Incorporating a seamless navigation system to explore Outside|In was important so that users can easily navigate on mobile (70% of our traffic) and quickly jump to symptoms and content relevant to them. I designed a fixed bottom navbar within thumbs reach that also includes email and social share to popular platforms.

Positive user feedback

Outside|In: Multiple Sclerosis has received very positive feedback from MS communities which feel the tool is engaging and a helpful resource in understanding the condition. Current data shows that users spend an average of 7 minutes in our tool. I feel accomplished knowing MS patients feel acknowledged, understood and empowered to spread MS awareness.

It feels like no one else has MS sometimes. But then I read things like this, I'm not the only one. I'm not going crazy. I feel like - you know, others may feel like they're isolated here with their MS. These tools shows that you’re not.

After reading OutsideIn, I was amazed by the MS symptom explanations and corresponding 3D visuals. I’m often asked to describe my MS and how it affects my body. Moving forward, I will refer future inquiries to this brilliant piece of work.

This is extremely helpful. I know a lot about MS but the way the diagrams are showing it is so great! This is completely helpful. I'm a retired nurse so I know a lot of this stuff but this really describes MS very well.