MoreThanPBC.com
CymaBay’s unbranded website promoting awareness of and resources for Primary Biliary Cholangitis (PBC).
Timeline: 3 months
Role: Sr. UX Strategist
Tools: Figma, PPT, Teams
-
Seladelpar will be CymaBay’s first product to market, with an expected indication for Primary Biliary Cholangitis (PBC) at launch in August 2024. CymaBay and Eversana Intouch are developing an Unbranded Patient Platform to prepare People with PBC (PwPBC) for Seladelpar.
Launching in January 2024, Unbranded Patient efforts will engage with PwPBC on topics far beyond traditional disease education. Starting with accurate disease-related information and empathetic, total health support, we will empower PwPBC to demand more from their PBC treatments, more from their HCPs, and more from their lives.
-
Gain credibility and trust from the PBC community
Foster engagement with the PBC community
Gain qualified leads in order to proactively reach them when Seladelpar launches
-
MoreThanPBC.com has been live for a month and we are currently tracking:
Registration sign-ups
Site visits
Time on site
Page views
Content shares
Content likes
Content engagement
Design process
Our website was the result of close collaboration among the User Experience, Customer Experience, Content Strategy, Strategic Planning, Creative and Development teams, iterating throughout our process.
Discovery & defining problems
Reviewed the Strategic Planning Team’s discovery research.
Defined patient problems to solve.
Familiarized teams with competitor landscape solutions.
Sitemap & wireframe
Team aligned on website pages based on patient needs.
Reviewed the client’s website layout inspiration to inform layout structure.
Designed wireframes for client approval.
UX Consulting
Gave feedback during internal reviews of the Creative and Development Teams’ work.
Helped support the website’s usability and accessibility.
Our team didn’t have the budget or timing for UX Research so we leveraged the Strategic Planning Team’s discovery research to inform our personas.
In an affinity mapping session I sorted our research findings to bring the needs of our patients to light.
Discovery & defining problems
Discovery research
Person with PBC research findings & affinity mapping
What we learned:
The 2 main stages in patients’ treatment journey are their goals to “Take Back Control” and “Embrace the Possibilities”.
Overlapping needs in both of these treatment journey stages included researching disease education and new treatment options.
Defining patient problems to solve
I identified problems patients need solutions for within the Strategic Planning Team’s patient treatment journey personas below.
“Taking Back Control” patients’ problems:
Needing resources for disease education.
Trying to improve their symptoms & quality of life.
Feeling isolated in their experience.
Being dismissed and misunderstood by their doctors.
“Embracing the Possibilities” patients’ problems:
Learning how to re-engage with life after successful treatment.
Researching and considering new treatment options.
Coping with unsuccessful treatments and hoping for future alternatives to liver transplants.
Side note: Though our Account Team didn’t prioritize research based UX personas, here is a User Persona PPT Presentation
I created to help inform our fellow departments of the benefits and use cases of broad vs narrow scoped personas.
Competitor Landscape Solutions
I gather industry example websites and noted competitor strengths to emulate and opportunities for MoreThanPBC.com to offer a better solution.
-
![]()
LivingWithPBC.com
Competitor Strengths:
Sub-navigation that helps users access other site content quickly.
Visual aids to explain data about PBC.
Brand Opportunities:
Intrusive side bar pop-ups.
Videos don’t have closed captions or transcripts.
Non-descriptive CTAs.
-
![]()
PBC-Society.ca
Competitor Strengths:
Provides a well organized variety of resources and data.
Brand Opportunities:
Some main navigation dropdown items appear to be links to pages but are PDF downloads.
Lengthy text heavy content sections that aren’t scannable and easy to digest.
Vague non-descriptive CTAs.
-
![]()
MyPBCTeam.com
Competitor Strengths:
Displays the number of people who have engaged with their content.
Provides a wide variety of articles topics.
Brand Opportunities:
Main navigation menu isn’t accessible on the homepage.
Articles contain long text heavy content that isn’t very scannable.
Sitemap & Wireframes
Sitemap
Our team aligned on the following site pages:
Disease Truths - Educate patients looking for a source of truth in their in their disease and treatment research journey.
Social Wellbeing - Empower patients feeling isolated and keeping their diagnosis to themselves to share their experiences.
Physical Wellbeing - Help patients struggling with fatigue have more autonomy over their quality of life.
Emotional Wellbeing - Provide resources for patients having difficulty maintaining hope for a better quality of life.
Resources - Connect patients trying to stay up to date on treatment options with other organizations that can support their treatment journey.
Layout inspiration
The client’s main inspiration for the website is MG-United.com,
a website supporting patients with Myasthenia Gravis.
The client also wanted the website to have an editorial feel similar to popular magazine websites.
Magazine websites reviewed for layout inspiration:
Key design takeaways:
Shallow, minimal and descriptive main navigations.
Foreshadow article content in card containers.
Fill large sections with imagery and color blocks.
Wireframes
I designed wireframes with our patient needs and layout inspiration in mind.
*Some functionality such as carousels and flip cards were requested by the team.
UX Consulting
Making flip card functionality clear
Since flip cards aren’t a common UX design pattern, I helped our Creative and Dev teams ensure their instructions and functionality were clear and accessible for patients.
Flip cards before:
The flip CTA was vague and didn’t clearly describe the expected outcome.
The flip cards appeared like flat images that may not be interactable.
The back of the cards were missing their CTA to return to the initial state.
Flip cards after:
The flip CTA more clearly conveys the outcome of flipping with the cards.
The drop shadows help the cards appear to be interactable elements.
The return to initial state CTA was added to the back of the cards.
Making mobile carousels more accessible
The team debated whether the entire carousel card should be clickable and if to include arrows. I gave recommendations to help increase the carousels’ accessibility.
To make the carousels more accessible:
Only the CTA links were made clickable to prevent patients from accidentally navigating to resources while swiping.
Arrows were added so make the carousel functionality more clear and to provide assistive technology a means of navigation.
Progressive dots to convey which element is in focus.
Descriptive and predictive CTA copy
I collaborated with the Copy Team to help ensure more of the site’s CTA copy described the expected action or navigation location.
Original content copy:
Updated content copy:
With the conclusion of each project comes valuable lessons learned to apply to future projects.
Here are some key takeaways from my experience collaborating with this team on the launch of MoreThanPBC.com.
Retrospective
Usability testing to better understand patients’ perception of the website’s value to their treatment journey and overall usability.
Accessibility audit to have clear metrics to advocate for more accessible UX design patterns.
CymaBay’s brand strategy next steps:
Back up recommendations with substantial statistics and best practices to reassure the team’s concerns from common misconceptions.
Find ways to be involved in pre-kick off strategic planning meetings to get early buy in from the client and team for UX research.