My Epilepsy Explained
Summary
Explaining epilepsy can be difficult, especially when you find you are having the same conversation over and over again.
MyEpilepsyExplained.com lets people with epilepsy create a custom video based on how epilepsy affects them. They receive a personalized video with a card and a code linking to their video to share digitally or in-person.
It is all the information, empathy, and understanding without the awkward conversation.
Client
Supernus | MERGE
Roles
Art Director
UX/UI Designer
Animator
Part One
The Idea
We needed to create a simple, frictionless way to identify a user's specific epilepsy symptoms. We started by indentifying all of the potential variants of epilepsy and symptoms people experienced. That informed which and how many questions we needed to cover all of the varying color of epilepsy people experience.
Part Two
The Architecture
After we gather the user responses, we identified 36 different variants of epilepsy that are a collection of similar symptoms, reactions, and instructions for care. Using 4 questions, we were able to idetify which of these categories a user fell into and match them to which of the 36 variants they most closely were aligned with.
Site User Flow
Early Wireframe Examples
Part Three
Making the Videos
After we gather the user responses, we identified 36 different variants of epilepsy that are a collection of similar symptoms, reactions, and instructions for care. Using 4 questions, we were able to idetify which of these categories a user fell into and match them to which of the 36 variants they most closely were aligned with.
Video is comprised of 5 main sections.
The basic part of seizures fall into 5 categories.
Below is a chart with an example of a user response highlighted in green. Each of the columns represents a single question and the correpsonding responses. Each of the responses needed to be able to work with each of the other responses. We were able to smartly manage the amount of animations required by animated each of these individually then using After Effects to automate the construction of the final set of 36.
Part Four
Visual Language and Style
To go along with the custom variants and to add more uniqueness to each form of epilepsy, I constructed a set of colors and graphics that were designed to support all our variants while being unique. Each of the 4 questions has their own set of colors that relate to the answers.
Base Color Palette
Example of Palette in use
Color Scheme in Grayscale & Color blindness
The color palette was created in a way to support any permutation of user responses. Using value and saturation along with hue allowed for an asthetic palette to be created from all variants of user responses while also being accessible and friendly to folks with color blindness.
All Color Variations
All Variations at Grayscale to compare Value
A Unique Palette for everyone
Since all responses were tied 1:1 to a color, the result was a unique palette per variant of epilepsy. Below are a few of the combinations a user could receive.
Social Images
A similar method was used to create unique assets designed to be shared via email or socially. A users specific epilepsy variant and color scheme carries through to the shared social assets. Photoshop and a bit of coding helped automate the creation process.
Part Five
Styleguide & Site Design
Now that the hard work was done, the palette and aesthetic from the videos were pulled through and pulled apart to be reassembled into a matching design system and website.
Site Colors
Typography
Button Styles
Form Elements
Final Homepage Design
Part Six
The Finished Videos
We were able to create over an hour of unique animations with careful planning of scene cuts and transitions, automation of After Effects, and applying some atomic design principles to video section creation. The final product feels like a fully produced, custom tailored video. A nice bonus is they were all created in a fraction of the time and budget it would have taken to create 60 minutes worth animation. Check out an example below.