Back to work

Designing Under FDA-Level Scrutiny

Building Merck's secure healthcare resource portal — navigating extreme legal constraints, migrating the team to Figma, and implementing the Vivid360 design system for the first time in a live product.

Hero Image
Client Merck (Payor Portal / Merck Formulary Resources)
Duration April 2023 – March 2024
My Role Principal Experience Designer
Team 1 design lead, 4 designers, 1 content strategist, 1 tech lead, 1 PM
Industry Healthcare / Pharmaceutical (FDA-regulated)
Key Deliverables Figma migration, Vivid360 design system implementation, portal UI design, legal-compliant delivery

The problem

When a healthcare professional needed information about a Merck drug, the process was absurdly manual: contact a rep, schedule a meeting, sit through a presentation, then wait for a follow-up email with the actual content.

Merck needed a portal that let HCPs browse, request, and access drug resources securely and independently. But healthcare design isn't like other design. The FDA reviews everything. Merck's rapid response legal teams scrutinized every screen weekly. Branded content had to be separated from scientific information. Safety and indication information had to appear wherever a drug claim was made. And full-scale page redesigns could be triggered by a single legal ruling.

I joined the fully Think-staffed team about 6 months into design. The portal was taking shape, but the team was working in Sketch and InVision, there was no design system alignment, and the process needed structure. I was brought in to fix all three — while also contributing to the design itself.

Problem visualization
85% of Vivid360 design system migrated from Sketch to Figma
Weekly FDA-level legal reviews (RRT) throughout the project
6 mo into design when I joined to restructure tooling and process
1st Merck product to implement the Vivid360 design system

My role

I joined as the most senior designer on the team with a specific mandate: migrate the project to Figma, implement the Vivid360 design system, and bring structure to a process that was starting to strain under legal complexity. But I didn't just focus on systems and tooling — I also took ownership of major portal sections, contributed to the UX design, participated in weekly legal reviews, and built the developer handoff framework.

This was the first Merck product to implement Vivid360, which meant I wasn't just consuming a design system — I was proving it could work in production. Every decision I made had implications for how future Merck products would adopt the system.

Design System Implementation

Independently migrated the entire Vivid360 design system from Sketch to Figma, rebuilding components with auto layout and variants. Then led the team through redesigning all existing pages to align with V360.

Legal Compliance Design

Participated in weekly RRT legal reviews where every screen was scrutinized for FDA compliance. Navigated strict constraints around branded vs. scientific content, safety information, and drug claims.

Portal UX Design

Owned the design of major portal sections — including the dashboard, library, and requests experiences — while collaborating with another designer who owned adjacent sections.

Process & Tooling

Built the Figma file structure, established project organization patterns, ran an OOUX workshop to align design and content strategy, and created the developer handoff framework.

The approach

Phase 1 — Migration & System Alignment

Get the foundation right

Migrated the entire Vivid360 design system from Sketch Cloud to Figma — rebuilding every component to properly leverage auto layout and component variants. Got stakeholder approval to adopt Figma as the primary tool, then led the team through redesigning all existing portal pages to align with V360.

Phase 2 — Structure & Process

Organize the chaos

Built a Figma file structure using "base pages" as master components — enabling instances to flow into prototypes, legal review files, and delivery files from a single source of truth. Ran an OOUX workshop with the content strategist to create a shared visual language between content models and design screens.

Phase 3 — Design & Legal Review

Design within extreme constraints

Designed major portal sections — dashboard, library, and requests — while navigating weekly RRT legal reviews. Balanced user experience goals against FDA compliance requirements, with full-scale redesigns sometimes triggered by a single legal ruling. Every screen had to thread the needle between usability and regulation.

Phase 4 — Delivery & Handoff

Ship with clarity

Built a comprehensive developer handoff system — a table of contents, resource overview, team profiles, and detailed annotations with a global components section. Adapted the handoff framework I'd developed at Comcast Business and improved it for the pharmaceutical context.

Bringing Vivid360 to life

Payor Portal was the first Merck product to implement the Vivid360 design system — which meant I wasn't just using the system, I was proving it could work.

Think Company had originally been hired by Merck in 2019 to audit, catalog, and streamline all the components across their digital ecosystem into Vivid360. By the time I joined Payor, the system was about 85% complete — but it all lived in Sketch Cloud. I got authorization to use Figma, then independently migrated the entire system, rebuilding each component to leverage Figma-native features like auto layout and component variants.

Once the UI kit was fully migrated, I worked with the team to redesign all existing portal pages to align with V360. Every design decision I made had to balance the system's design language against the portal's unique constraints — particularly around how legal requirements shaped layout, content hierarchy, and interaction patterns.

Vivid360 design system in Figma

Designing for the FDA

In pharma, the FDA reviews everything. That means design decisions that would be straightforward in any other industry become complex, high-stakes negotiations between usability and compliance.

Merck's rapid response teams (RRT) — internal legal professionals — met with our design team weekly to review every screen for compliance. Branded content had to be strictly separated from scientific information. Safety and indication information had to appear anywhere a drug claim was made. A single legal ruling could invalidate an entire page layout and force a full redesign.

Navigating this required a different kind of design thinking. I couldn't just optimize for the user — I had to optimize for the user within a legal framework that often worked against intuitive design. The challenge was finding creative solutions that satisfied both: experiences that felt simple and natural to HCPs while meeting every FDA requirement behind the scenes.

"The best pharma design doesn't look regulated — it looks effortless. The compliance is invisible."

Fixing how the team worked

Beyond the design and the system, I restructured how the team organized, collaborated, and delivered their work.

The Figma file structure was a particular challenge. I needed the main design file to function as a Payor pattern library — with all screens turned into components that could be shared across the Merck ecosystem. I developed a "base pages" approach: all core design screens lived as master components, with instances flowing into prototype pages, legal review files, and delivery files. One source of truth, multiple outputs.

Project structure

Organized Figma files by design phase — exploration, active design, legal review, and delivery — so designers could move work seamlessly between stages.

Base pages system

Turned all core screens into master components. Instances fed into prototypes, legal files, and dev handoffs from a single source of truth.

OOUX workshop

Ran an Object-Oriented UX workshop to bridge design and content strategy — visualizing the content model as objects with behaviors, attributes, and relationships.

Legal review pipeline

Integrated weekly RRT reviews into the design cadence. Built dedicated legal review files so compliance teams could annotate without disrupting active design work.

Developer handoff

Built a comprehensive handoff system with a table of contents, team profiles, global component overview, and detailed annotations — adapted from my Comcast framework.

Pattern library approach

Structured the design file so every screen was componentized and shareable — laying groundwork for Payor patterns to be reused across the broader Merck ecosystem.

Outcomes

System impact

  • First Merck product to successfully implement the Vivid360 design system
  • Migrated the entire V360 library from Sketch to Figma with full component rebuilds
  • Redesigned all existing portal pages to align with the new system

Product impact

  • Designed dashboard, library, and requests — the portal's highest-traffic experiences
  • Delivered a secure, user-friendly portal that replaced an entirely manual process
  • Navigated weekly legal reviews while maintaining UX quality

Process impact

  • Built a "base pages" component system for single-source-of-truth design management
  • Established project and file structures adopted by the full design team
  • Created an OOUX-based bridge between content strategy and design

Delivery impact

  • Built a comprehensive developer handoff framework adapted from prior enterprise work
  • Integrated legal review seamlessly into the design cadence
  • Established patterns for how future Merck products would adopt Vivid360

What I learned

Payor Portal taught me that constraints don't have to kill good design — they just force you to be more creative about how you get there. Designing under FDA-level scrutiny meant I couldn't rely on the usual playbook. Every pattern had to be justified not just by usability research, but by legal precedent. Every layout decision had to survive a room full of lawyers asking "can we say that here?"

The OOUX workshop was a turning point in how I think about content-heavy products. When a content strategist and a designer are both working from different source-of-truth documents, they're essentially designing two different products. Visualizing the content model as objects with behaviors and relationships gave us a shared language that made everything after it faster and more aligned.

And being the first product to implement Vivid360 was a responsibility I took seriously. Every shortcut or workaround I introduced would become precedent for how future teams consumed the system. That pressure made me more disciplined about component architecture, documentation, and handoff — skills that directly shaped my work on Celestial and everything that followed.

Continue reading

Previous case study

Migrating 300+ Brands to Figma

Figma Migration, Design Training, White-Label Systems

 Next case study

Building UX Maturity From the Ground Up

Design Leadership, Design Systems, Process Development

How this site was built

I'm going to say the quiet part out loud: AI built this website. And I'm proud of that.

Most people hide behind the fact that they use AI to create things. I want to flaunt it — because I think the way you use AI says more about you than whether you use it at all.

I've spent 16 years trying to deploy the portfolio website I always envisioned. I tried everything a non-coder could try — Webflow, Wix, Squarespace, literally just shipping a Figma prototype as my portfolio for the last few years. My most recent attempt had me deep in Framer, convinced I'd finally cracked it. Another unfinished project. The truth is, when you're working full time leading design teams, there's never enough time or energy left to also build and maintain your own site. The vision was always there. The bandwidth never was.

AI changed that equation entirely.

I designed every screen, every interaction, and every detail of this site in Figma — the same way I design everything. Then I used Claude Code to bring it to life, guiding it step by step through layout, styling, animation, and content. Every decision was mine. Every pixel was intentional. The AI was the tool that finally closed the gap between what I could envision and what I could ship.

But the site itself is just one output. The real unlock came from the way I've been working on projects like Meevo — building an AI-assisted design operations framework around markdown files, GitHub repositories, and context systems that keep multiple AI agents working with the most comprehensive understanding of the project possible. Over 18 months of leading that engagement, I accumulated a massive amount of project data: strategy documents, design rationale, stakeholder feedback, research findings, system documentation, the works.

So when it came time to write the case studies on this site, I didn't start from scratch. I pointed AI at all of that structured context and used it to help me aggregate, synthesize, and draft the narratives you're reading here. Because why wouldn't I? The craft is in the curation, the framing, and the judgment. The AI handles the grunt work that used to make case studies the thing designers never finish.

The result is the thing you're looking at right now — a portfolio that actually represents who I am, built the way I believe design should work. Not despite AI, but because of it.