Cytokinetics

Reimagining and modernizing the late-stage biopharmaceutical company's website

Image alt tag

The Problem

The client had a website that lacked focus on their future goals as a company. The original website lacked a clear direction due to an underdeveloped site architecture and choppy story flow. Additionally, the branding was outdated and static. The main question they posed was "What's next for Cytokinetics and how can we elevate our brand to that?".

The Solution

Cytokinetics and The Experience Design Studio (XDS) worked to redesign their website with the goal of adopting a more forward-thinking approach and emphasizing patient centricity. XDS created a cohesive and engaging online experience that showcases Cytokinetics’ commitment to doing good while providing key scientific information to support Cytokinetics’ mission. The key changes implemented in the redesign include content reorganization, a stronger focus on patient centricity, emphasizing corporate responsibility, and refreshing the visual design. Visit the live site here!

Role:

UX/UI Designer, Content Strategy

Tools:

Adobe XD, InVision, Adobe Illustrator, Adobe Photoshop, After Effects

The Team:

Tiffany Brynn, Mike Kabok, Douglas Rockhill, Ayesha Sultan, Sara Hoover

Awards:

Titan Health Gold Award

Research

Background and Cytokinetics' Mission

Cytokinetics brought on XDS to create a new corporate website (and intranet) that communicates the company’s innovative science, dedication to patients, and its 25 years of outstanding company culture. We began the project by creating a new campaign – “25 Years, One Mission” – as the basis for the redesign and core communication direction. The campaign centers on featuring the patients that Cytokinetics is focused on helping, and the employees that are making it happen.

"We are committed to developing potential medicines that may improve the healthspan of people living with cardiovascular and neuromuscular diseases of impaired muscle function."

Initial research included stakeholder interviews and auditing the current side in comparison to competitor sites. Key findings from these research methods included adding a focus on patients, creating more of a story-like flow, and introducing more information on Cytokinetics' responsibility as it relates to their medicine and research

Stakeholder Interviews

Working with Cytokinetics' internal marketing team and through stakeholder interviews we gained insights on how different user groups typically behaved on the original website. We also delved deeper into the company's goals and priorities. A few key points are:

  • Work with patients and testimonials to be reflected more on website as well as engagement and experience

  • Patient’s stories – they matter to stakeholders and they design trials to focus on patient experience as opposed to just profits.

  • Reframe science and make it more accessible.

  • Scientists in the field and patients look for the pipeline. What drugs Cyto offer and studies they are focusing on

  • Publications page is critical to have; we do not want to be as brief as other websites.

  • Need to enhance culture section - growing quickly and steadily so important to promote their values

  • Elevate corporate responsibility, give grants and giving a home together

“We've had this website since 2015... And that's when we introduced the empowering muscle empowering lives headline for the company. Our goal is to really just take it to the next level, demonstrating that we are soon becoming a fully integrated R&D and commercial organization with our first approved drug.”

“Our current website reflects more who we are today, which is a company where their clinical trials and pipeline are an emphasis. That's not going to change. But I do think that it should reflect also where we're going to be next year and for years to follow, which is more about a commercial business."

Auditing

We looked at several competitors including Gilead, Regeneron, and Sanofi to compile some documentation on how they were presenting information, what their site architecture looked like, and how their users were interacting with their brands. Some key points from our findings are:

  • Use of a utility navigation to clean things up and allow for more focus on actual main navigation items

  • Dynamic homepages with strategic calls to action; the homepage leads the user to the next step in a story

  • Robust corporate responsibility sections with clear CTAs seamlessly guiding several user groups to mission statements, grant information, and impact results

  • Clear, easy path to career openings and culture sections

Original Sitemap

In addition to looking at competitors, XDS did an audit of Cytokinetics' original site. We looked mainly at the information architecture and story flow, noting the lack of focus on the company's mission, and disorganization in the company and culture sections. Additionally, the pipeline section was underdeveloped.

Cytokinetics

Original Sitemap

Content Strategy
Cytokinetics

User Challenges and Key Priorities

From the research, we were able to distill down three main user groups: healthcare professionals, patients and investors. Each of these user groups follow different paths in the website but fall into the larger umbrella of key priorities:

  • Patient Centricity: How might we introduce and highlight patient centricity throughout the entire experience? How might we connect on a deeper level with patients and a commercial side of business?

  • Simplified navigation: How might we reduce clicks to main content? How might we make the main navigation more intuitive?

  • Improve Story Flow: How might we utilize cross-linking and strategic CTAs to guide users instead of place them?

  • Brand Refresh: How might we maintain professionalism, but make the brand more approachable and dynamic?

Cytokinetics

Sample of some basic user flows throughout the site

User Journeys

When creating the sitemap, we thought a lot about potential user journeys. We took the three archetypes and considered what top user goals were in conjunction with the sitemap. These user flows often changed as content moved and was readjusted, but we continued to prioritize user needs as the design developed.

Sitemap and Navigation

Based on these findings, we were able to create a sitemap that allowed for easier navigation through "Mission" and "Medicines & Research" sections. We also elevated "Responsibility" and "Careers" to a top level navigation. Elevating these two sections of the site allowed for clearer subpages that all connected back to Cytokinetics' goal of emphasizing their mission. The sitemap was a live document throughout the design process and included several different rounds and changes. Ultimately we landed here, with some potential improvements that I outline later in the user testing section.

Cytokinetics

Finalized Sitemap

Image alt tag

Image alt tag

Focus on Patient Centricity

We placed a stronger emphasis on patient centricity, departing from the previously more science-focused approach. The content modules were expanded to incorporate patient stories and narratives, reflecting the experiences of individuals affected Cytokinetics’ disease focus areas. XDS modified the language throughout the site to be more accessible and engaging for a broader audience. By presenting information in a way that all users can understand, Cytokinetics aimed to empower patients to learn about their work and potential treatment options. The mission section showcased different patient stories for each disease type, further reinforcing the patient-centric approach.

Elevating Corporate Responsibility and Careers

Cytokinetics recognized the importance of corporate responsibility and sought to highlight it on the website. We introduced the responsibility section to highlight information related to the company's philanthropic endeavors. Furthermore, we revamped the careers page to provide a well-rounded view of the company culture and showcase the opportunities available. This included the addition of a Diversity, Equity, Inclusion, and Representation (DEIR) page, highlighting internships and post-doc programs.

Wireframing
Cytokinetics

Ideation and Sketching

After establishing the sitemap, we were able to start ideating and working on wireframes. I did some faster paced sketching to begin with and as more of the content strategy was established, I moved into wireframing. The biggest challenge in wireframing was ensuring all the content was in its most logical place.

Cytokinetics

Wireframes

During the wireframing process, we made sure to utilize strategic calls-to-action and intentional linking were employed to facilitate a smoother user journey. Furthermore, the focus of content organization was at front of mind. It was important to guide the user through each piece of content rather than have them search for it. We introduced landing pages that did not exist and highlighted relevant cross-linking throughout the site.

Design

Look and Feel and The Design System

XDS focused on updating and modernizing the visual elements of the website along with the overall user experience. We introduced a more dynamic design style throughout the site through animation and movement. The aim was to capture visitors’ attention from the start with trustworthy patient imagery and bold graphics. We introduced brighter and bolder colors and created unique typography styling. Additionally, WCAG 2.0 accessibility was prioritized to ensure an inclusive experience for all users.

Putting it All Together and Hand-off

Once the new, refreshed brand was established, it was just a matter of designing out each page. Along the way, dealing with content changes and some custom modules was a bit challenging, but it resulted in a dynamic, engaging, easy to navigate website that the client was incredibly happy with.

Hand-off included meetings with the project manager, developer, and creative directors. We documented components within XD as well as creating a technical documentation paper with clear, in-depth functionality. Visit the live site and see every page here!

User Testing
Cytokinetics

Hotjar Hover States on Pipeline and main CTA

Test Results

Usability testing via HotJar allowed for analysis of site architecture and user interactions. Overall, users seemed to flow through the site really well and successfully use the main navigation and most important CTAs.

Issue #1: Clinical Trials user path

  • Top path: clicking Pipeline CTA from homepage

  • Users often click through to clinical trials after viewing the pipeline, but users often go back through the pipeline instead of using the intended the clinical trials menu item - introduce crosslinking or have clinical trials CTAs nested underneath the pipeline

  • Currently takes three clicks to get to clinical trials for each medicine via the pipeline, which can easily be reduced

Issue #2: UI discrepancies

  • Links within the pipeline section of the page do not have a hover state

  • Links on clinical trial landing page not a button

  • Users were often confused in the timeline section of the site thinking that each title was a link

Recommendations

Optimize Clinical Trials content path

  • Introduce a "Return to pipeline" button on each clinical trials landing page 

  • Add in CTAs to alternate clinical trials pages at the bottom of each CT landing page (i.e. on Heart Failure Clinical trials, add in two CTAs leading to HCM and ALS pages)

  • Add in CTAs to clinical trials pages at the bottom of the pipeline page 

Clarify UI of links in the pipeline and the timeline section

  • Add hover state to pipeline; remove underline on the timeline; change confusing links to buttons