Precisely Focused

For the estimated 700,000 people in the United States who struggle with a rare movement disorder called Tardive Dyskinesia – treatment has never come – until now. TD is a side-effect of the medications that treat severe mental illnesses. As part of the creative team at Juice Pharma Worldwide, our challenge was to conceptualize and design an immersive digital experience that educated health care providers about the first drug to treat TD.

ingz-logo

Precisely Focused

For the estimated 700,000 people in the United States who struggle with a rare movement disorder called Tardive Dyskinesia – treatment has never come – until now. TD is a side-effect of the medications that treat severe mental illnesses. As part of the creative team at Juice Pharma Worldwide, our challenge was to conceptualize and design an immersive digital experience that educated health care providers about the first drug to treat TD.

OVERVIEW

For six-months preceding the FDA-approval and launch of Ingrezza, I collaborated with Juice’s San Francisco creative team comprised of copywriters, editors, UX, account leads, project managers, and fellow art directors with our creative director on the conceptualization and design of two website experiences and marketing campaigns targeting psychologists, neurologists and medical doctors. Before joining Juice, the team conceptualized and tested a campaign strategy revolving around a physical lens that when used by the healthcare provider, revealed what Ingrezza could accomplish for their patients.

Kicking off the digital tactics after Thanksgiving, the team had fast-paced deadlines to turn around a one-page “Now Approved” introduction website set to precede the full website launching summer 2017. It became our prerogative to redefine the standard healthcare experience, pushing architecture and design across complimentary tactics and make the patient a central focal point, to do that we had to rely on our ability to pivot and adjust the design around legal restrictions.

PART 1: CONCEPTUAL EXPLORATION

Initial Concept Design Research

Collected inspirational concept imagery using Pinterest, Niice, and Design Blogs that could lead to the eventual look and feel treatment. Summarized findings with a formal mood board presentation.

Digital Concept Research

Scoured the internet for groundbreaking web design examples that could inspire website look/feel or functionality, using Awwwards, Codrops, CodePen, GitHub, This Is Collasal.

Functionality Inspiration Presentation

Widdled down collected swipe into a handful of examples and presented concepts to the development team to determine feasibility.

Internal
Team Brainstorm

Collaborated cross-departmentally at an internal session to inspire the overall structure and story flow moving into wireframes and manuscript.

Initial Look and Feel Design

Created two initial desktop & mobile design concepts for landing and main internal page. Then uploaded Sketch artboards to Invision and created a clickable demo.

Client Concept Presentation

Presented concepts to client remotely, walking them through the initial concepts and basic functionality using the clickable Invision demo.

PART 2: NOW APPROVED SPLASH PAGE

The Lens Juice landed on an overall concept that revolved around a physical lens in the hand of a healthcare provider. This lens subconsciously represented the product and the results that may occur once a patient is treated. For this series of Now Approved tactics, the actionable goal is to introduce the brand and capture leads from healthcare providers and caregivers – capitalizing on the short window after FDA-approval before the drug is ready for distribution. At this stage, we could only legally hint to the lens and leverage brand colors.

Thinking  Inspired by my experience in the beauty industry, I suggested leveraging more experimental development tactics to the team in order to grab and maintain a stronger hold on the attention span of our audience. By bringing in various micro-animations, opening up the spacing throughout a previously status quo registration form, and designing activated fields that change on command, we were able to build a website and registration experience that didn’t make the audience work and connected to the overall concept by emphasizing the reveal. 

Technical Considerations  After the conceptual thinking comes the real-world technical knowledge to get your work produced. A critical flashpoint with this execution was how to account for Internet Explorer which doesn’t support web-kit animations. The development team wanted to know how I envisioned the micro animations behavior in an IE environment. I knew that by tweaking the design slightly we could accomplish a similar effect using keyframes. The main goal was to honor the reveal but not necessarily the exact animation style.

PART 3: BRANDED LAUNCH WEBSITE

Kicking off the full Ingrezza.com website, we brainstormed methods of humanizing the patient and their symptoms to healthcare providers. Simultaneously we would be challenging healthcare industry norms with interactive design tactics that created an immersive experience. The challenge as with all healthcare brands is that we had to abide by fair balance and ensure that the experience still worked with limited real estate. 

VIEW CLICKABLE PROTOTYPES
TECHNICAL FEATURES

Animated Burger Menu

Each and every touch point was considered a possible location to include a reveal feature that aligned withe the lens concept. The mobile burger menu isometrically transforms into a close X while simultaneously opening as a translucent lens shaped menu. Menu items transition into place one at a time, similar to a jacobs ladder opening.

Expanding Persistant Footer

The FDA requires Important Safety Information footers to be on screen and accessible at all times with branded drug websites. For Ingrezza.com we didn’t want the footer to take over all of the real estate for interactive features, so our solution was to build a reverse window shade footer that expanded to the bottom of the header and on command.

Interactive Patient

In order to differentiate Tardive Dyskinesia from other serious movement disorders, we set out from the beginning to create an interactive desktop experience that educated healthcare providers about the symptoms and levels of severity. By clicking an animated hotspot on the body or supporting navigation – a blade slides out to reveal videos of each symptom.

Severity Dial

Within the desktop experience symptom blade, we added an interactive dial that triggered videos demonstrating the different severity levels of Tardive Dyskinesia. The dial features several different methods of interaction and visually communicated an increase or decrease in severity using a range of colors.

Patient Assessment Quiz

To differentiate Tardive Dyskinesia from other movement disorders, the team developed an interactive patient assessment quiz around four mock patients. The four patients selected were recorded as they simulated the movements of TD under the supervision of medical professionals to ensure that their portrayal was accurate. Most importantly, the quiz feature describes true lives of potential patients instead of disease symptoms, humanizing the patient and educating the healthcare provider audience.

RESULTS

Throughout the process of creating the Ingrezza story, we learned how to push each tactic technically and visually while also staying compliant with federal design regulations. My job was to take ownership of the design and two fully responsive healthcare websites with no previous healthcare experience and I succeeded by collaborating with a rockstar team of copywriters and user experience designers. Together we built an environment that caused the client to overwhelmingly accept all of our ideas and exclaim “this is the best HCP website I’ve ever seen.”