Periscope: Scaling Information Architecture to Consolidate High-Volume Data

How a flat, unstructured feed requiring self-led digging was redesigned into a scannable dashboard featuring categorized activities and actionable AI summaries.

Regulatory affairs professionals in the medical device industry operate in a high-stakes, high-information environment. They need to monitor competitor clearances, clinical trials, and recalls to protect their market share and maintain compliance.

The original version of the Periscope dashboard listed all competitive and regulatory actions in a flat, chronological feed. It offered no high-level overview or automated classification, requiring users to click through every single card. This self-led experience created a steep learning curve that threatened customer acquisition.

As the sole designer, the challenge was to completely reimagine the interface—re-architecting how regulatory data is organized, integrating agentic AI summaries, and coding the frontend for rapid developer integration.

Without prior domain expertise in medical device regulatory frameworks, I took the initiative to run deep-dive sessions with our CPO and prospective clients. I focused on understanding how regulatory officers prioritize incoming news.

Key Insights

1. Risk vs. Growth: Regulatory events are not created equal. A warning letter or product recall is a critical threat that demands immediate action. A competitor's patent filing or 510(k) clearance, while important, is commercial intelligence for strategic planning.

2. Scalability Bottlenecks: While early customers tracked only a handful of competitors, larger enterprises needed to track hundreds of companies and product codes. The interface had to scale gracefully from low-volume to high-volume monitoring.

To address these insights, I restructured the application layout, moving from a single feed to a tiered information architecture:

Action-Oriented Taxonomies

I categorized all incoming alerts into two high-level channels:

• Safety & Effectiveness: Recalls, adverse events, warning letters, and enforcements. These are styled in bold, warning red to command immediate user attention.
• Commercial Activity: 510(k) filings, PMA, patents, clinical trials, and press releases. Highlighted in professional primary blue to indicate strategic importance.

1. Tabbed Watchlist

To support scaling to thousands of tracked entities, I introduced a tabbed Watchlist layout separating "Companies" and "Product Codes" to segment data naturally.

2. Clean De-Duplication

I also resolved a major pain point in the old feed where identical patents or device updates with multiple filings were listed repeatedly. In the new design, each device or patent is listed once, with all subsequent activities nested chronologically underneath, instantly clearing out interface noise.

A major product concern was the scaling of dashboard news summaries. Since different users follow different sets of companies, the dashboard news had to remain relevant and structured regardless of watch volume.

I collaborated with the CPO to consolidate user needs into a set of 3–5 core system prompts for our agentic AI. I wrote these prompts applying UX writing frameworks—specifying structure, tone, and clinical accuracy—to ensure the AI agent extracts the three most critical, actionable bullet points at the top of the dashboard. This baseline of prompts ensures consistent quality during testing before pushing to production.

Rather than relying on a single, monolithic "write me a bullet" prompt—which introduces high hallucination risk and is fragile to scale—we designed a modular **Multi-Stage Prompting Pipeline**. By separating raw document extraction, verified fact stores, ranking logic, and narration into distinct, bounded stages, we contained hallucination risks, decoupled business configuration (our importance table) from language generation, and ensured every summary is fully auditable down to its source filing.

These news bullets let users grasp key updates in seconds, with the option to click any category number in the dashboard's red or blue sections to instantly drill down into the details.

Being the sole product designer at the startup means owning the entire delivery loop—from strategic concept to working code. Rather than hand-coding every line from scratch, I leveraged modern developer tools to multiply my velocity:

• Claude Design Integration: I used Claude Design to rapidly bounce ideas, structure complex product meeting notes, and draft layout boundaries against the existing product design system.
• Figma-to-AI Specs: After sketching and formalizing new components (like the tabbed watchlist) in Figma, I fed these visual layouts and spacing parameters directly into my code-generation environment.
• Claude Code Integration: I directed Claude Code to write the HTML, CSS grids, and JavaScript for the prototype. Actively guiding the AI to adhere to clean code structures and pixel-perfect fidelity, I pushed a fully functional prototype to the repository in under a day—eliminating hand-off latency entirely.

The code has been successfully pushed to dev. I am currently partnering with our backend engineer to test the agentic AI’s live behaviors—specifically verifying that the LLM's summaries match the prompt structures and maintain low-latency responses.

For validation in the dev environment, we are tracking user interaction flows and clicks on the dashboard, followed by qualitative user interviews to evaluate cognitive load and setup ease.