Country Compare: Transforming Dense Regulatory Filings into an Interactive Matrix

How an unreadable, misaligned wall of plain text was redesigned into a high-density, interactive comparison engine—featuring collapsible category accordions, verifiable regulatory citations, and context-grounded conversational AI.

In the medical device and life sciences industry, entering a new international market requires thorough side-by-side regulatory comparative analyses. Strategy teams, regulatory affairs officers, and legal counsels must cross-examine jurisdictions—such as the United States (FDA) vs. Canada (Health Canada) or the EU (EMA)—across pivotal facets: Regulatory Agencies, Risk Classifications, Filing Fees, Clinical Trial Protocols, and Approval Timelines.

However, our initial product version failed to deliver effective comparison:

As the sole product designer, my mission was to rethink the entire experience: consolidate massive regulatory density into a scannable, single-viewport workflow, engineer rock-solid trust mechanics, and embed contextual conversational AI.

Before transitioning into a custom web UI, the early pipeline required rendering comparisons inside raw Markdown documentation files. Traditional Markdown tables are fundamentally rigid: multi-line paragraphs break table syntax, and native collapsibility does not exist.

Rather than waiting for a full backend rewrite, I innovated within the constraint:

By encapsulating each comparison category inside semantic <details> and <summary> tags, we achieved accordion behavior that maintained structure even in headless documentation environments. This architectural breakthrough validated the mental model of on-demand progressive disclosure before writing a single line of production UI code.

Once proven, I partnered closely with our frontend engineer to translate this paradigm into a rich, scalable React and HTML/CSS component system, co-authoring production-ready code with Claude to rapidly accelerate delivery.

As we scaled our capabilities and the amount of countries we supported, we needed a modal that was easy to scroll through, scan, and easy to search.

The defining architectural innovation was restructuring comparison rows into an independent collapsible accordion matrix.

1. Horizontal Synchronization Across Asymmetric Text

By encapsulating each regulatory subject (Regulatory Agency, Classification, Fees, Timelines, Clinical Trials, Vigilance) into an independent card row, paragraphs are visually anchored. Even if Country A's filing process requires 400 words while Country B's is 30 words, the bottom boundary remains locked to the next category row—guaranteeing 100% horizontal alignment.

2. The 3-Column Comparative Architecture

In the new design, expanding any category reveals a dedicated three-column matrix:

• Country 1 & Country 2 Cards: Distinct, side-by-side columns presenting the localized regulatory requirements, complete with agency source badges and an inline + Synthesize trigger.
• Dedicated Comparison Column: Rather than leaving the user to manually cross-reference dense legal prose, the third column automatically synthesizes the relationship:
  • ● SIMILARITY: Pinpointing shared governance frameworks (e.g., centralized federal bodies, risk-based tiers).
  • ● DIFFERENCE: Isolating divergent technical mandates (e.g., eCTD Gateway vs. IMDRF Table of Contents, 3-class vs. 4-class hierarchies).

3. Condensing Multiple Screens into One Desktop Viewport

Instead of forcing users to scroll through miles of dense documentation, users can collapse completed or non-applicable topics with a single click. When collapsed, the entire regulatory landscape across all 8 essential categories fits comfortably within a single desktop viewport, giving users total control over visual density.

In legal and life-sciences regulatory software, trust is paramount. An AI summary that cannot be audited against an authoritative legal statute is useless to an enterprise regulatory director facing million-dollar submission deadlines.

I designed a multi-tiered citation architecture that bridges AI synthesis directly to primary legal source documents:

Interactive Source Badges

At the footer of every comparison card, users see explicit agency badges (e.g., FDA, Health Canada, ISO, IMDRF) and a count of active reference documents. Clicking any source tag summons a dedicated modal displaying exact source guidance.

Standard AI chatbots in enterprise software often fail because they are detached floating widgets. Users must copy-paste text, reiterate context, and hope the bot does not confuse the jurisdiction.

I architected Contextual AI Query as an inline, section-scoped conversational partner:

• Topic-Scoped Sessions: When a user clicks "+ Synthesize" or the AI Query button inside the "Regulatory Agency" or "Classification" row, the side panel opens pre-loaded exclusively with the sources from that specific section.
• Zero Context Drift: By scoping the retrieval model to the cited sources of the active row, follow-up answers are sharp, hallucination-resistant, and immediately relevant.
• One-Click Prompt Starters: Pre-calculated starter chips ("Summarize these sources", "What are the key differences across these sources?", "Are there any conflicting requirements between them?") eliminate prompt anxiety and guide user exploration.

Key Takeaways

1. Density Without Overwhelm: Enterprise users do not need information stripped away—they need information structured. Collapsible accordions transformed an exhausting vertical scroll into an interactive command center that adapts to each user's job-to-be-done.

2. Designing for AI Trust: In high-stakes legal sectors, explainability and citations are not secondary UI niceties; they are core product requirements. Giving users the power to verify sources and chat directly with cited documents turned AI from a liability into a superpower.

3. The Prototyping Advantage: Solving the early Markdown table constraints with HTML details tags allowed us to validate the interaction model long before full frontend implementation. Writing the production HTML in lockstep with engineering bridged design intent and execution without compromise.