Transforming a Legacy Enterprise Application

Overview

Clinical Conductor is an enterprise clinical trial management platform used by research sites to manage the operational lifecycle of clinical studies.

Years of continuous development had produced a powerful application, but one that reflected the limitations of its original ASP.NET Web Forms architecture. Pages were data-centric rather than task-oriented, relied heavily on full-page postbacks, popup windows, and large data grids, and had accumulated significant UX and technical debt.

The modernization effort was not simply a migration to React. It was an opportunity to rethink how users accomplished their work while establishing a modern technical foundation that would support future product development.

As both Product Designer and UX Engineer, I designed user experiences, implemented production-ready React interfaces, collaborated directly with Product Managers and Software Engineers, participated in code reviews, and helped evolve reusable interaction patterns that became part of the platform’s design system.

The Challenge

Customers increasingly viewed the application as dated compared to newer competitors, making it more difficult for sales teams to demonstrate the product despite its mature capabilities.

The legacy application exposed data rather than supporting tasks. Nearly every screen relied on large data grids, extensive filtering, popup windows, and workflows constrained by the underlying Web Forms architecture. Users frequently navigated through information they didn’t need simply because it existed.

The modernization effort needed to improve both the user experience and the underlying technical foundation without disrupting the complex workflows relied upon by clinical research organizations.

Rethinking the Experience

One of the guiding principles throughout the project was shifting from a data-centric application to a task-centric experience.

Instead of asking, “What information should this page display?” we asked, “What is the user trying to accomplish?”

This shift influenced every workflow we redesigned.

Operational tasks were separated from reporting needs, reducing unnecessary complexity and allowing interfaces to present only the information required to complete the current job.

Example: Reimagining Study Management

The legacy Study List demonstrated many of the application’s challenges.

Dozens of filters occupied valuable screen space, applying filters required multiple interactions, and every change triggered a full page refresh.

The redesigned experience introduced a reusable filter drawer that supported progressive disclosure, allowing users to focus on results while expanding advanced filters only when needed.

Applied filters were summarized above the results and could be removed individually without reopening the drawer. Users could save custom filter sets, sorting preferences, and layouts as reusable views.

Rather than navigating immediately to a large edit form, selecting a study opened a new Study Drawer that surfaced the information users accessed most frequently.

Customer feedback and Pendo analytics informed which information appeared first, allowing many common tasks to be completed without opening the full detail page.

Information intended primarily for reading was displayed as content rather than editable form controls, while reusable inline-edit components allowed fields to become editable only when needed. This reduced cognitive load while maintaining efficient editing workflows.

UX Engineering

The modernization effort also transformed how the application behaved.

Production-ready React interfaces replaced legacy Web Forms experiences, allowing faster interactions, partial page updates, asynchronous loading, and SPA-like navigation.

Skeleton loading states and loading indicators improved perceived performance while reducing the disruption caused by full-page refreshes.

A React-based global search component provided significantly faster navigation than the previous menu structure, allowing users to jump directly to the workflows they needed.

Throughout the project I translated UX concepts directly into production-ready React implementations, working from Jira stories, committing code, participating in code reviews, and collaborating closely with engineering throughout implementation.

Building Reusable Patterns

Rather than solving individual screens independently, we developed reusable interaction patterns that scaled across the platform.

Patterns including the Study Drawer, Filter Drawer, Filter Summary, Saved Views, Inline Edit, and Global Search became reusable components documented within Storybook and incorporated into the evolving design system.

This reduced implementation effort while creating a more consistent experience across the application.

Accessibility

Accessibility was considered a foundational design principle throughout modernization rather than a final validation step.

Modern interaction patterns, semantic components, and reusable implementations made accessibility improvements easier to apply consistently as the platform evolved.

Reflection

If I were leading this modernization today, I would leverage AI throughout discovery, prototyping, documentation, and front-end implementation.

AI-generated prototypes and implementation scaffolding would allow ideas to move even more quickly from concept to production-ready code while preserving the collaborative workflow between Product, Design, and Engineering.

The principles behind the modernization, however, remain unchanged: design around user goals, build reusable systems, and reduce the distance between an idea and working software.