top of page
genentech backsplash2.png
GNE circle.png

Genentech SWE

Simple, intuitive, and accessible web design

I created accessible brand UI kits for Genentech to achieve their goal of a Simplified Web Experience (SWE) while working with a team of designers and content strategists. 

This project broadly comprised tasks such as UI kit creation, design layouts, brand design audits, and application of SWE and WCAG 2.1 AA accessibility standards.

Date: Aug 2021 - June 2022

What is SWE?

The objective of the Simplified Web Experience (SWE) initiative is to make it simple and intuitive for patients, caregivers, and support staff to find treatment information and apply for financial support services online.

During the research and co-design phases of this project (prior to my involvement), the team uncovered opportunities and insights around the following attributes:

  • Streamlined access to financial support 

  • Better, more accessible language about treatment

  • A digital experience that reflects modern design principles

  • Credible information that reflects what they are most interested in

In addition, Genentech made a commitment to conform to internationally recognized web accessibility standards (WCAG 2.1 AA). 

design process.png

Co-creation and co-design process diagram

The goal of a simplified web experience is an opportunity to meet both customer expectations and drive organizational revenue. Genentech, patients, and healthcare professionals can all benefit in the following ways:

  • Industry research demonstrates that strong digital customer experiences drive revenue growth

  • A better customer experience will support increased patient adherence, higher satisfaction scores and make healthcare professionals more likely to prescribe

  • By simplifying and streamlining content and services across Genentech web properties, content and service updates will become more efficient, resulting in reduced costs

Problem

Feedback from patients, caregivers, and healthcare professionals (HCPs) indicated that the digital experience across the Genentech portfolio is disjointed and confusing. Challenges included:

  • Inconsistent navigation/organization across the portfolio

  • Difficult navigation language

  • Complex enrollment process for financial support programs

Design audits and brand UI kits

Genentech brands underwent a thorough audit at the beginning of the SWE process. I conducted audits on three brand websites across the patient and healthcare professional (HCP) audiences. In this stage, I evaluated accessibility categories like color contrast, the presence of interactive states, and the use of live vs. embedded text. 

I presented the findings to Genentech at the conclusion of this process for each brand. The audit helped uncover WCAG 2.1 AA violations and other opportunities to improve the site during the next phase: branded UI kit creation. 

Esbriet Audit Examples Close-up.png

Excerpts from a brand design audit with accessibility and usability issues flagged

After the audit, the design team created an accessible UI kit for each brand; often there were two UI kits to capture unique styles for patient and HCP audiences. ​These would go through multiple rounds of feedback until the stakeholders were completely happy with the new, SWE-based design system. 

These design systems typically contained the following elements:

  • 20+ heading and type styles across desktop and mobile formats

  • 10-20 button, link, and navigation elements

  • 30-40 branded website components like tabs, accordions, and video players, with both desktop and mobile versions

  • Depending on the brand, sample page layouts

I worked in some capacity on a total of seven different brands (Activase, Esbriet, Hemlibra, Tecentriq, Ocrevus, Mosun, and Enspryng) in Genentech’s portfolio, participating in one or more of these tasks: audit, design system development, design layouts, and website QA review. I have also contributed to the design QA review of four brands (Cathflo, Tecentriq, Enspryng, Herceptin) sites in development, flagging dozens of issues on each site in order to ensure adherence to the design system as well as accessibility best practices.

Esbriet DS examples white bg.png

Excerpts from a brand UI kit showing colors, type styles, and various components

Comprehensive examples cropped.jpg

Financial support

The design team partnered with Genentech to manage and improve the user flow for financial support across their portfolio. The financial support section on each site is composed of dozens of pages across patient and HCP audiences including patient resources, doctor-specific pages, explanations of each program available, and multi-step forms with results pages. Our team kept multiple versions of this file up-to-date and added many improvements to it over the course of several months.

This effort involved creating a new library file along with three separate design files comprising over fifty unique components. The file started at about 70 pages, and over a few months of updates, it grew to nearly 120 individual page layouts. 

In addition, I worked with another designer to create an improved template for the financial support file which adopted Genentech colors, fonts, and overall brand language. This evolved into a robust design library that could also serve as Genentech's style guide for internal products like their SWE documentation hub. 

GNE UI Kit examples.png

Our team created this Genentech-branded UI kit for templates, legal reviews, and internal design use

bottom of page