Xeljanz
Apr 3, 2021
Unifying a growing brand into one clear, confident digital experience.
Context
As Xeljanz expanded beyond its original use case, its web presence couldn’t keep up. Each newly approved condition—from rheumatoid arthritis to ulcerative colitis and beyond—was added as a separate microsite. Over time, this fragmented structure created confusion for users and inefficiencies for content managers.
The result: patients struggled to find relevant information, and the brand missed the opportunity to convey the strength and credibility of a proven multi-condition treatment.
Challenge
Xeljanz’s online experience had been designed for a single disease, then retrofitted for others.
This led to:
Duplicated content across three separate websites
Disjointed navigation and inconsistent design
Inefficient content updates and approvals
Confusion around whether Xeljanz was a pill or injection
The business goal was clear: create a unified, scalable website that could support new conditions as they were approved while improving registration and engagement metrics.
Goals
Unify three condition websites into a single, flexible master-brand experience.
Leverage the halo effect—using established conditions to build trust for newer ones.
Streamline content updates to reduce duplication and accelerate time-to-publish for new conditions.
Improve the primary KPI: patient registration.
Approach
We began with a cross-functional workshop with subject matter experts to align around content priorities and regulatory constraints. A content audit followed, revealing high-performing assets that could be reused across conditions to save time and cost.
From these exercises, we defined a new information architecture centered on shared content modules and disease-specific pathways—making it easier for users to explore multiple conditions while maintaining compliance.
Before:
Key insights from research:
The previous (above) homepage image of a cactus confused users—many didn’t realize Xeljanz was a pill, not an injection.
Patients missed the explainer video about how the medication worked, which had been removed for legal reasons.
Common content across all conditions far outweighed the differences, supporting a master-brand approach.
Patients wanted to compare conditions—challenging the assumption that they would only explore their own diagnosis.
Design Exploration
A major design decision centered around how to switch between disease states within the same site. We explored multiple interaction models:
List of links: clear visibility of all conditions, but cluttered as new ones were added.
Dropdown selector: cleaner and more scalable, but required user interaction to discover all options.
Through testing, the dropdown proved most effective—balancing clarity with scalability as the product line continued to grow.
After:
Implementation
We collaborated closely with the client’s offshore development team, who were new to modern design tools. To streamline handoff, we established a shared workflow using Sketch, Zeplin, and Jira, linking design states directly to development stories.
A lightweight pattern library was created based on the existing style guide, enabling the dev team to build consistent templates for future conditions.
The redesigned master-brand website launched in Q2 2020 after passing multiple rounds of legal and regulatory approval.
Impact
Simplified content management and reduced duplication across three sites
Created a scalable architecture to support new conditions without redesign
Improved clarity around treatment format (pill vs. injection)
Enhanced user perception of credibility through the halo effect across conditions
While quantitative metrics remain proprietary, early feedback indicated higher engagement and smoother navigation, especially among patients comparing multiple conditions.
What’s Next
User testing revealed that most site visitors were long-term arthritis patients, not newly diagnosed ones—a group that found existing “getting started” content less relevant.
Future iterations of the site will expand resources for this audience, focusing on long-term disease management and meaningful discussions with healthcare providers.
Summary
This redesign transformed Xeljanz’s web presence from a fragmented collection of microsites into a unified, scalable experience that communicates trust, consistency, and innovation—aligning both user needs and business strategy under one cohesive master brand.
Redesigned homepage mobile:
What’s Next?
During the user research for this update, 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 explored this with the next major round of in-person interviews.