Xeljanz

Background

Xeljanz is an anti-inflammation medication that has several condition that it treats.  Over time, the number of conditions has grown and continues to grow, but the webite architecture was designed for only one disease and then extra conditions have been tacked on, creating a disjointed experience.

Goals

1. Redesign the 3 existing Xeljanz websites that exist for each individual condition into a “master brand” website

2. Leverage the halo effect created by older, well proven conditions for newer conditions

3. Create greater efficiencies of adding content, accommodate for new conditions as they are approved so they are easier to add

4. Improve the key KPI: registration

Discovery

We started by holding a workshop with subject matter experts.  We also performed a content audit to save the client time and resource by leveraging the high performing content that was currently performing well according to engagement metrics across the websites.  The workshop informed our new site map structure that leveraged agnostic content to be used across each condition.  This in turn was used to create a prototype to validate with users.Insights from these exercises included:The cactus image was confusing the message of pill vs injection, users didn’t understand that this medication was a pillThe video that discussed scientifically how the medication worked, which had to be taken down because of legal reasons, we sorely missedThe shared content that was consistent, but duplicated across the 3 different sites outweighed the differences/unique content needed for individual conditions

Switching Condition States

One of the most interesting challenges was the condition or disease state selection process.  Initially, it was thought that users would be only concerned with their own condition/disease, so we might want to keep them completely separated.  This was disproven during user interviews, where users expressed desire to see the claims and impact on other, related conditions.  This meshed well with what the business stakeholders had wanted.  They wanted to leverage the “halo” effect where patients interpret that a medication that works for multiple conditions is more “proven”.Users came to the site typically organically to the homepage, or secondarily by searching for a treatment for their specific condition- so the condition state was very important as there were several “front doors” to the site.Several options for changing the “mode” of the website, bases off of the “door” were designed and evaluated:

Omnipresent

Great, because it showed all the conditions as one timeLimiting because while it worked in the interim, it would become unruly with multiple conditions and became very busyDropdownGreat because it was cleaner and focused, more apparently what you have selectedLimiting because you didn’t see all the conditions at the same time unless you were interacting with it

Implementation

The client’s dev team is offshore and new to Sketch and Zeplin design specs, but worked with us to come up with a system for defining specs in Jira and linking to the Zeplin state for each story.  We also created a basic pattern library for use across the website based off of the style guide. This allowed the dev team to begin building on the basic building blocks and templates that were to be consistent across the new master brand website.The website has many stages of legal and government approvals, but is slated to release Q2 2020.

What’s Next?

We are already hard at work for the next release- early Q3 2020.  During the user research, it was clear that the tools that we have for improving doctor discussion about changing treatment are slanted towards the newly diagnosed patient.  A vast majority of the patients are long time sufferers and have had arthritis for many year.  The content didn’t resonate with them, so we are exploring this with the next major round of in-person interviews.