Design system creation

Client: Pfizer

Platform: Web

Responsibilities: Site architecture, component creation, wireframes, cross-device validation

In 2024, Pfizer embarked on a mission to focus public attention to their oncology R&D efforts with an ambitious commercial that ran during Super Bowl LVIII. They asked my team to create a digital experience that would continue engagement post-event, and this lead to the creation of www.LetsOutdoCancer.com.

Abstract clusters of colorful 3D cells with Pfizer logo and text "Let's Outdo Cancer."

Knowing this site would draw millions of eyes, my team crafted and launched an experience featuring a brand-new component system. We were tasked with crafting components for a variety of content types – stunning visuals, editorial walls of text, inspiring patient stories, and more. We expected visitors to view the site from a variety of sources and tweaked each component to read effortlessly across devices.

UI design mockup showing desktop and mobile navigation bars for Pfizer. The desktop nav includes the Pfizer logo, 'Get Updates' and 'Menu' buttons, with variations of background and text colors. The mobile nav shows similar elements adapted for smaller screens with additional close menu options.
UI design elements showcasing various button styles, icons, and partner logos on a gray background. Includes "View All" buttons in different colors, play and plus/minus icons, illustration icons, and logos for companies like OpenAI, Microsoft, NVIDIA, and Google AI.
Gray interface mockup with two image placeholders and two text areas labeled 'Lorem Ipsum.' Includes placeholder text and navigation arrows at the bottom.
Two placeholder image boxes side by side above "Lorem Ipsum" text with descriptive filler text below each. A progress bar is at the bottom of the image.
A webpage layout featuring two placeholder images and sections with lorem ipsum text, each titled 'Lorem' with expandable menu items labeled 'Ipsum,' 'Dolor,' and 'Sit.' A share icon is present at the bottom.
Mobile interface design with placeholder image, and sections labeled 'Lorem,' 'Ipsum,' 'Dolor,' and 'Sit' with text and share icon.

The site architecture is minimal and easy to navigate. The original iteration includes an attention-grabbing homepage, which draws in the user and encourages exploration to other parts of the site.

The other sections contain educational content and drive to external sources where users can access information about clinical trials, cancer advocacy groups, financial assistance, and more.

Website sitemap for a cancer-related site with sections like Hero Content, Homepage Content Blocks, Footer Content, and Utility. Features links to areas like Pioneering Science, Areas of Focus, and Inspiration & Support. Includes various subcategories such as Cancer Types, Clinical Trials, Healthcare Finances, and Advocacy Support.

Previous project

Next project