A Design System to Increase Speed to Market for a Pharmaceutical Company
This multinational pharmaceutical company develops and manufactures drugs, vaccines, and animal health products. The U.S. Web Strategy and Services team, which supports 45+ consumer websites, as well as healthcare provider (HCP) portals, relied heavily on custom-coded websites and lacked any efficient method to ship or update them. Legal reviews create a lot of churn in the design phase, and the lack of any foundational design system or standards eliminated any form of speed to market. Through developing a multi-brand design system, we were able to migrate all websites onto WordpressVIP, saving development and regulatory review time to make future updates to websites.
Role:
UI/UX Designer
Industry:
Pharmaceuticals
Skills:
Design Systems, UI Design
Key Outcomes
Websites in the new design system share consistency in their visual elements and information architecture, all while maintaining their brands’ specific look and feel
Process and collaboration improved to enable teams to efficiently accomplish goals, whether migrate, redesign, or stand up an entirely new site
Website before the design system
Website after the design system
Approach
I owned the design process through rounds of meticulous review with brand and regulatory teams. I collaborated with brand teams, content strategists, and SMEs to design and migrate websites into the new design system. I customized the design system components to use the brand's color palette and typefaces, and created high fidelity prototypes to review with brand and regulatory teams. I ensured all migrated websites shared consistency in their visual elements, maintained each brand’s look and feel, and met or went above WCAG 2.1 AA standards.
Some brands decided to do more in depth redesigns. In those cases, a content strategist and I worked together to improve their information architecture, readability, and overall user experience.
An example page that shows the base component library.
Collaboration with Content Strategy and Web SMEs
The content strategist and I decided we would benefit from adding a low-fidelity wireframe step to our process. This step allowed us to better envision how content interact on the page, and became a means of quickly iterating and explaining impact with brand and legal teams. In collaboration with SMEs, I helped expedite the regulatory review process by advocating for approvals to be done during the build phase instead of with PDFs of static designs. This allowed discrepancies that might have existed between design files and actual builds to not be an issue when review teams gave their final approval.
Wireframe collaboration with web SME and content strategist
Design System Documentation
As a primary and early user of the new design system, I contributed component designs, specifications, and documentation for the design system, as well as socializing and guiding other designers in the organization to use the design system successfully.
Design system documentation
Designer onboarding documentation
Results
Websites in the new design system share consistency in their visual elements and information architecture, all while maintaining each brands’ specific look and feel. Foundational components of the design system have been approved at the legal level, and components are ready-made in WordpressVIP. Process and collaboration improved to enable teams to efficiently accomplish goals, whether migrate, redesign, or stand up an entirely new site.
Client Feedback
I’ve always felt I could count on you to come up with something, or to tell me when what we were asking for just wasn’t feasible. That transparency and consistency is what kept a lot of these projects tethered to the ground when winds of change were blowing.
Peer Feedback
Sarah’s attention to detail is incredible. Whether it’s writing documentation or synthesizing hundreds (yes, hundreds) of PDF comments for a design, she hunkers down and knocks it out of the park.
