CASE · UX + DESIGN SYSTEMS · MERCKVACCINES.COM

Design strategy to build trust in Merck's brand and vaccine products to combat rising irrational fear and misinformation.

During the COVID-19 pandemic, I consulted digital marketing leadership and coordinated a team of five UX designers to deliver reliable vaccine program information across every product on MerckVaccines.com. One responsive IA template, designed once and applied to all product sites, cut design and development costs 15x and gave health care professionals consistent, trustworthy patterns for critical product information.

Role
UX Consultant & Design Lead
Organization
Merck · MerckVaccines.com
Team
5 UX Designers
Focus
Information Architecture · Design Systems · Responsive Web
15x
Reduction in design and development costs from one standardized IA
7
Responsive breakpoints specified, from 375px phones to 1920px desktops
All products
Every vaccine product site on MerckVaccines.com built on the same template
5 designers
UX team coordinated to deliver reliable program information during COVID-19
The design pattern

A product-page template where critical safety information is never out of view.

Every product page shares the same anatomy: global Merck Vaccines navigation, a product-level nav, direct links to Prescribing and Patient Information, flexible content sections, and a persistent drawer that keeps Indications and Usage and Select Safety Information pinned on screen as the visitor scrolls. Regulatory-critical content follows the reader instead of hiding below the fold. The same IA is shown here applied to VAQTA, one of the live product sites. Swipe through the screens below.

Fig. 1–2 The template as a neutral wireframe, and the same IA carrying VAQTA's brand.

When trust in vaccines was at its most fragile, the design system's job was to make critical information impossible to miss on every product and every device.

The principle behind the MerckVaccines.com IA
02 Process

Design the pattern once. Specify it at every width. Apply it to every product.

MerckVaccines.com is the ordering and information hub for U.S. health care professionals. Each vaccine had its own product site, and each site had grown its own layout, which meant every update was designed, built, and reviewed from scratch, product by product. During COVID-19, with vaccine skepticism at a peak and medical practices under strain, that inconsistency was a business problem and a trust problem at once.

Friction A
Every product, a one-off

Product sites diverged in layout and pattern, so each change multiplied design and development cost across the portfolio.

Friction B
Safety info below the fold

Indications and safety information, the content HCPs and regulators care about most, could scroll out of view on long product pages.

Friction C
Ordering was a chore

Medical team administrators managing and reordering products and supplies faced different tools and paths on every product site.

A

Consulted leadership, coordinated the team

  • Advised digital marketing leadership on a single-template strategy: one information architecture for all product sites instead of per-product layouts.
  • Coordinated five UX designers so the pattern was applied consistently as it rolled out across the vaccine portfolio during the pandemic.
  • Standardized the administrator path. Consistent placement of ordering, product menus, and account entry points made it easier for medical team administrators to manage and reorder products and supplies.
B

One IA, specified at seven responsive breakpoints

I designed the template as a complete responsive specification: 375px and 414px phones, 768px and 1024px iPads, and 1280px, 1440px, and 1920px desktops. At every width, the anatomy holds: global nav, product nav, Prescribing and Patient Information links, content sections, and the persistent safety drawer. A designer or developer picking up any product knew exactly what went where before a single branded comp existed.

Desktop widths
Fig. 3–5 Desktop wireframes: 1920, 1440, and 1280px.
Tablet & phone widths
Fig. 6–9 Tablet and phone wireframes: 1024, 768, 414, and 375px.
C

The keystone pattern: a persistent safety drawer

The pattern that carries the most weight is the pinned drawer holding Indications and Usage and Select Safety Information, each expandable in place. On desktop it rides mid-viewport; on phones it becomes stacked expandable panels. Because it behaves identically on every product site, an HCP moving from one vaccine to another already knows where the critical information lives. The consistency itself is what builds trust at a time of heightened vaccine skepticism.

D

Roll the template across the portfolio

With the IA locked, each product became a theming exercise rather than a design project: brand color, product logo, hero content, and audience panels drop into an anatomy that's already specified and already approved. The VAQTA example below is the template wearing a product's brand. The drawer, nav structure, and information hierarchy are untouched.

VAQTA product homepage built on the template: purple product navigation, pediatric and adult patient panels, and the persistent safety information drawer identical to the wireframes
Fig. 10 VAQTA: one product of many, on one shared information architecture.
03 Results

Lower cost per product, and a consistent experience patients and providers could rely on.

Design & development cost
15x
Reduction in design and development costs by standardizing the process and template across all product sites
Coverage
All products
Every vaccine product site on MerckVaccines.com delivered on the same responsive information architecture
Trust
Consistent safety patterns

Reliable, identical placement of critical product information addressed patient family anxieties during heightened vaccine skepticism.

Operations
Easier ordering

A standardized path for medical team administrators to access tools, manage accounts, and reorder products and supplies.

Delivery
Pandemic-speed rollout

A team of five UX designers shipping in parallel against one specification instead of five interpretations.

Why it mattered

In vaccine communication, consistency is credibility. Designing the information architecture once, and holding it steady across every product, every breakpoint, and every safety disclosure, turned a portfolio of one-off sites into a system that was cheaper to run and easier to trust.