Genentech SWE
How crafting an improved financial support journey and enhancing accessibility improved the web experience for patients and providers.
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
The situation
Genentech, a pioneering pharmaceutical company, realized they were not providing a consistent and easily navigable digital experience for the patients, caregivers, and healthcare professionals who visited their large and diverse portfolio of branded medication sites. So they partnered with my team at Publicis Sapient to create an intuitive and modern web interface that streamlined access to treatment information and financial support services and also aligned their sites with modern accessibility standards.
Our team of designers and content strategists collaborated closely with Genentech to develop and implement this multi-year transformative vision. During my ten months of work on this project, I worked with seven of the client’s brand teams to make their sites more user-friendly and accessible. I also created and maintained brand-agnostic templates and contributed to a client-facing design documentation hub to promote better web design practices, which Genentech adopted for their use after the completion of our partnership.
I was primarily a UX/UI designer on this project but played multiple roles on our small design team of four people. My scope of activities included:
-
Improving the user experience of navigating financial support options and creating a brand-agnostic template for all sites to follow
-
Conducting comprehensive audits of brand websites, evaluating accessibility elements such as color contrast and interactive states
-
Partnering with the client’s brand reps to lead the development of accessible UI kits tailored to each brand's unique needs, including creating complex page layouts
-
Collaborating with content strategists to evaluate and improve information architecture and write new copy
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).
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.
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.
Excerpts from a brand UI kit showing colors, type styles, and various components
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.
Our team created this Genentech-branded UI kit for templates, legal reviews, and internal design use
Results
Due to scope constraints from the client, I was unable to record detailed, quantitative user satisfaction scores for the work on implementing SWE. However, the qualitative feedback received underscored the significant impact of the enhancements made. Throughout my ten months on this project, the transformation in the aesthetics, usability, and accessibility of Genentech's web properties was well-received by stakeholders. The outcomes of my contributions included:
-
Accessibility and Consistency: I worked on UI kit upgrades for seven of Genentech’s drug brands, ensuring that each brand's website aligned with WCAG AA standards. These UI kits established a consistent and accessible experience across Genentech’s portfolio, making it easier for users to navigate and interact with the sites and also reducing the company's potential legal liability.
-
Enhanced Financial Support Process: Our team significantly improved the financial support process, resulting in a more streamlined and user-friendly experience for patients, caregivers, and healthcare professionals. This not only facilitated easier access to crucial resources but also contributed to higher satisfaction levels among users.
-
Sustainable Design Systems: The creation of these UI kits was meticulously documented in a dedicated website, which outlined key design principles and usability guidelines. This resource will support Genentech in maintaining and extending these standards in future projects, ensuring long-term benefits.
Overall, the project's success was evident from the positive feedback and the sustained improvements made to Genentech's digital presence, laying a solid foundation for future enhancements.
128
Screens created for the new brand-agnostic financial support template
7
Different brands I worked on to upgrade accessibility and apply WCAG 2.1 standards
>40
Hours of online training and shadowing to build knowledge of accessibility standards
My key learnings
Simplify, simplify, simplify: Tackling the complex task of organizing financial support information, I realized that breaking down intricate details into easily understandable templates was essential. This simplification not only helped us standardize support pages across the Genentech portfolio but also significantly extended the reach of these programs. Knowing that our work was helping many patients access critical treatments was immensely rewarding.
Accessible design ≠ bland design: Diving deep into web accessibility standards, I gained extensive hands-on experience in conducting design audits and creating UI kits. These kits not only adhered to WCAG 2.1 AA standards but also preserved the unique brand character of each Genentech product. This balance between accessibility and engaging design was crucial in ensuring that the digital experiences were both inclusive and visually appealing.