DropletPharma: Unified Frontend for Automated Radiopharmaceutical Synthesis

As the sole UX designer and frontend engineer at DropletPharma, I designed and built the company's frontend from the ground up: a unified interface for a radiopharmaceutical synthesis platform used to label 60+ compounds per day at 50–100x conventional screening speeds. The interface needed to translate complex, safety-critical scientific workflows including protocol building, hardware testing, and system administration into a tool scientists could operate confidently and safely, with zero existing UI to build from.

Role: User Research, Interaction & Visual Design, Prototyping & Testing, Frontend Development

Background: DropletPharma is a Los Angeles–based radiopharmaceutical company building technology to streamline the production, discovery, and distribution of radiopharmaceuticals. Learn more about DropletPharma here.

Over this 8-month co-op, I’ve accomplished several key achievements:

  • Interviewed future users across every level of the platform to define the interface's goals and requirements. Our user base consists of the internal DropletPharma team, research scientists at our UCLA lab, and high-level end users like hospital administrators.

  • Designed every low and high-fidelity Figma iteration of the interface, presenting design rounds to users for feedback and making all original UX decisions: layout, flow, interaction patterns, and interface design.

  • Established a consistent design system and frontend stack, and built the entire frontend codebase from scratch.

  • Implemented the interface in React/Next.js, TypeScript, Tailwind, and Material UI.

Problem Identification & My Role

Before I joined, DropletPharma had no user interface for any of its lab workflows, leaving scientists and engineers to work directly with backend systems. As the company's first and only UI/UX hire, I owned the frontend end-to-end (research, design, and implementation), working closely with one other developer and a team of physical systems engineers.

Design & Architecture Process

With no existing frontend to build from, my first task was choosing the development stack. I worked with the engineering team to identify technologies that would integrate cleanly with the existing backend and scale with the platform's needs.

The interface involves three distinct systems, each used by a different type of user. To maintain consistency across these three systems, I built a reusable component system with a shared React Context layer for cross-app state and a custom UI component library.

To make informed design decisions, I went through several rounds of low-fidelity wireframes, focused on:

  • Minimizing the number of steps required to complete each workflow

  • Establishing a layout that felt intuitive to users across technical backgrounds — from bench scientists to hospital administrators

  • Building a visual hierarchy that surfaced the most important information on each screen

I then ran usability interviews to test how well these wireframes solved real user problems, focusing on functionality over polish. That feedback shaped a high-fidelity Figma prototype, where I shifted focus to visual design, building out a consistent design kit and refining interaction details.

Implementation & Testing

I focused implementation on the platform's two primary systems: the Service Panel and the DropletCell interface.

The Service Panel is a low-level internal tool with minimal software interlocks, used by the DropletPharma team for direct system testing. DropletCell is the platform's highest-level, most user-facing system which hospital administrators and outside industry professionals interact with directly.

To support both, I built a custom React component library in two parts: reusable UI components (like unit operation blocks with flexible input fields and multiple interaction states) and reusable diagram components (like gas and fluid valves) shared across subsystems.

Service Panel

The most critical part of the Service Panel is its subsystem tabs, which let users directly interact with each physical subsystem. I focused on the Reactor subsystem tab, which consists of an interactive diagram of the real-life Reactor subsystem, paired with low-level controls for each component. Every part of the diagram was designed from scratch in Figma after detailed consultation with the systems engineers, then implemented piece-by-piece as individual React components and reassembled in code. I worked closely with the engineering team to determine which software interlocks were necessary before implementation.

The biggest design and engineering challenge was the Reactor diagram itself. The team needed maximum flexibility and functionality at this low level of the system, which meant high interactivity. For example, each of the three valve types had multiple visual "modes" that had to update clearly on user interaction. I designed each valve's visual states and implemented the logic to toggle between them, and used a combination of CSS flexbox and grid to manage the diagram's complex, deeply nested layout.

Figma Prototype of Reactor Subsystem Controls

DropletCell

DropletCell's core function is creating and running lab protocols. Since it's used by every level of user, from scientists to administrators, designing an intuitive, low-friction interaction flow was the first priority.

The protocol workflow starts with configuring system consumables (physical components like the reactor chip) and protocol run settings. This data pre-populates fields later in the flow, so getting this step right was essential to reducing user error downstream. From there, users build a protocol in the "Create/Edit Protocols" tab, either by assembling predefined unit operations or importing a predefined protocol as a JSON or YAML file

Figma Prototype of Protocol Creation Page

Results & Impact

The interface that I implemented is now being actively used by the DropletPharma team, replacing what was previously direct, manual interaction with backend systems. The Service Panel in particular has dramatically sped up testing and calibration of the physical DropletCell system. It has simplified the process of interacting with subsystems like the Reactor through a clear visual interface instead of working around the lack of one.

More broadly, this frontend supports a platform capable of labeling 60+ radiopharmaceutical compounds per day at 50–100x conventional screening speeds, cutting per-dose costs by 50–100x and labeling time by 2–6x versus conventional methods — outcomes made possible by a synthesis process that scientists can now safely and confidently operate end-to-end through the interface I built.

(early) to-scale model of DropletCell System