Portfolio — restricted access
Incorrect password — please try again
UX Case Study

Cytoexplorer

Leading UX design for a research-grade cytometry data visualization platform — translating complex bioinformatics workflows into an accessible, collaborative interface for scientists.

RoleUX/UI Design Lead
DurationMar 2024 – Jan 2025
TeamJames Wildman · Gurveen Sekhon · Sasa Chen · Vanessa Zhou
ToolsAdobe XD · Illustrator · Lucidchart · ChatGPT
DomainBioinformatics / Scientific Data Viz

Designing for Science at Scale

Cytoexplorer is a specialized application within the Polus platform — a comprehensive scientific data management ecosystem conceived as "Adobe Cloud for scientific research." Polus provides researchers with an integrated suite of interoperable tools spanning data collection, visualization, and publication-ready output.

Within that ecosystem, Cytoexplorer addresses one of the hardest problems in life sciences tooling: making high-content screening (HCS) and cytometry datasets — which can contain hundreds of thousands of individual cell data points — explorable and interpretable without requiring deep computational expertise. The application had grown organically alongside its engineering team, resulting in scattered controls, opaque terminology, and workflows that demanded navigating disconnected surfaces.

"A lot of this has to have a description — it's not self-evident."

— Stakeholder feedback, March 2024 screen review
Data Visualization Feature Grouping Multi-modal Exploration Iterative Prototyping Cross-functional Facilitation LLM Integration Accessibility

Leading the UX Work

UX/UI Design Lead

I oversaw design direction and output across a 10-month sprint cycle, coordinating between two designers (Gurveen Sekhon, Sasa Chen), a UX researcher (Vanessa Zhou), the Lead Full Stack Software Engineer, and scientific stakeholders including the Associate Director of AI and the VP of Data Science. I facilitated weekly check-ins, set design priorities, and served as the primary design voice in stakeholder reviews. Tools: Adobe XD, Adobe Illustrator, Lucidchart, ChatGPT, Jira, Confluence.

What I Directly Designed

  • Data Manager nav & toolbar consolidation — reorganized scattered controls into three logical sidebar groups
  • Image Render module — defined layout approaches and drove stakeholder discussion on interaction model
  • Charts/Tree split-screen — pop-out view enabling simultaneous chart and node navigation
  • Polus suite shell alignment — updated header nav to align with the broader platform
  • Clustering & dimension reduction UX — facilitated technical discovery then scoped design requirements

What I Directed & Oversaw

  • Feature Manager interactions — directed Gurveen's iterative prototype work across 8+ sprint cycles
  • Doc Explorer & LLM UI — guided design of document loading, filtering, and AI-chat comparison
  • Accessibility & color system — conducted WCAG audit and developed the four-mode palette
  • User personas & user flows — developed personas and directed user flow diagramming
  • Competitive analysis — directed Vanessa's benchmarking research across scientific visualization tools
  • Heuristic evaluation — led annotated analysis of the legacy interface

Building a Research Foundation

Before any redesign work began, the team established a rigorous research foundation across five methodologies: heuristic evaluation, user personas, user flow diagramming, accessibility checks, and competitive analysis. My role was to direct the program and ensure findings fed directly into design decisions throughout the sprint cycle.

Heuristic Evaluation

We conducted a systematic evaluation of the existing interface, annotating usability violations across the legacy UI. Key findings included information overload in the feature column list, unlabeled icons throughout the toolbar, ambiguous CTAs, and poor accessibility — particularly contrast ratios and lack of chart separation — across the Chart Explorer and Class Explorer views.

Heuristic evaluation - Chart Explorer data management panel
Chart Explorer — scattered controls, unlabeled icons, and column selection ambiguity
Heuristic evaluation - Chart Explorer class view accessibility
Class Explorer — contrast failures and insufficient chart separation flagged

User Personas

Five researcher personas were developed to ground design decisions in the actual user base — spanning research scientists, lab directors, computational biologists, and bioengineers. These anchored design priorities across all sprints and were referenced whenever stakeholder opinions diverged on feature scope.

User persona - Dr. Emily Carter, Research Scientist
User persona — Dr. Emily Carter, Research Scientist (one of five personas developed)

User Flow Diagrams

We mapped primary workflows through Cytoexplorer using Lucidchart as shared alignment artifacts for engineering and science partners. As the platform expanded to include Doc Explorer and LLM-powered querying, we created a dedicated AI Document Analysis flow — mapping the full path from collection selection through LLM query, interactive article exploration, dimension reduction, and save/export.

User flow diagram - AI Document Analysis workflow
User flow — AI Document Analysis, covering Doc Explorer, LLM chat, and dimension reduction paths

Accessibility Check

A WCAG-based accessibility audit evaluated contrast ratios, interactive element sizing, keyboard navigability, and screen reader compatibility across light and dark mode variants. Findings directly informed the four-mode color system and the component library's interactive states.

Accessibility evaluation findings across UI states
Accessibility evaluation — WCAG contrast and compliance review across light/dark mode variants

Competitive Analysis

Vanessa benchmarked Cytoexplorer against comparable scientific visualization and data exploration tools, identifying industry conventions and patterns the team could adopt or deliberately depart from to better serve the research context.

Competitive analysis of scientific visualization tools
Competitive analysis — benchmarking against peer scientific data visualization platforms

From Legacy UI to Cohesive System

The Starting Point — Legacy Interface

The original Cytoexplorer interface was built developer-first — functional but visually dense, with controls distributed across disconnected panel areas, no tooltip system, and inconsistent interaction patterns across modules.

Legacy - Chart Explorer data panel Legacy - Tree view Legacy - Node editing Legacy - Feature Manager select all Legacy - Feature Manager with selections Legacy - Create group dialog Legacy - Feature Manager groups
Legacy UI at project kickoff (Mar 2024) — developer-built, pre-UX engagement

Visual Design System

Working within Polus design standards, I oversaw the development of a structured visual system covering a four-mode color palette (Light/Dark × High Contrast/Regular Contrast), a comprehensive icon library in both light and dark variants, and a Roboto-based type scale from H1 through Body 2 — ensuring consistency and accessibility compliance across all modules and environments.

Visual design system — color palette, icon library, and type scale
Visual design system — four-mode color palette, icon set, and Roboto type scale

Component Library

A comprehensive component library was built covering buttons, tabs, pagination, nav icons, and the Doc Explorer data panel — all specified across four color modes with default, hover, selected, and inactive states. This gave the distributed team a shared vocabulary and ensured interaction consistency as different designers worked on different modules simultaneously.

Component library — tabs, pagination, data panel
Component library — tab and pagination components plus Doc Explorer data panel across all four color modes

Feature Manager

The Feature Manager — responsible for selecting, grouping, and filtering hundreds of data columns — underwent the most intensive iterative design work of the project. Gurveen and I worked through 8+ prototype cycles, resolving questions around group creation flows, edit states, filter controls, and the Selected Columns panel. The redesign introduced structured Groups/Dive/Facet/Processing tabs, a percentage-based filter slider, and a dedicated group creation modal.

Feature Manager - Groups tab with column selection and filter controls
Feature Manager — Groups tab with filter-by-percent slider, sort controls, and Selected Columns panel
Feature Manager - Create New Group modal
Feature Manager — Create New Group modal with selected column confirmation and naming

Data Manager

I led the consolidation of the Data Manager's toolbar — previously scattered across the top nav — into a structured left sidebar with three logical groups: selection tools, behaviors, and display options. The Charts/Tree split panel enabled researchers to navigate node trees and charts simultaneously. A contextual Behaviors popover gave users access to multigroup selection, subset selection, axis flip, and binning resolution — all accessible without leaving the main view.

Data Manager - Charts view with column selection panel
Data Manager — Charts view with column selection and Charts/Tree toggle
Data Manager - Behaviors popover
Data Manager — Behaviors popover with grouped behavioral controls
Data Manager - Tree view with node navigation
Data Manager — Tree view with node navigation and Edit Node / Download actions

Doc Explorer & LLM Integration

Late in the project, the VP of Data Science requested a Doc Explorer module — a document-centric exploration interface with LLM-powered querying and summarization. Gurveen designed the interface across several sprint cycles, resolving key questions around query scope, model selection, document summarization with save-to-doc capability, and how to display article content alongside the UMAP plot context.

Doc Explorer - LLM query panel with document collection loading
Doc Explorer — LLM Query panel with collection loading, model selection, and query input
Doc Explorer - Summarization view with article reading panel
Doc Explorer — Summarization view with article reading, generated summaries, and save-to-doc option

Interactive Prototypes

All design work was presented as clickable prototypes — not static mockups — every sprint. This kept stakeholder feedback grounded in actual interaction, surfaced edge cases early, and ensured engineering effort was never committed to unvalidated assumptions.

Ten Months of Sprint Work

The project ran as a continuous sprint cycle from March 2024 through January 2025, combining weekly UX prototype presentations with open technical discussions with engineering and science stakeholders. Notable dates: kickoff March 1, 2024 · stakeholder approval review October 15, 2024 · project suspension January 14, 2025.

"Prototypes are conversations, not deliverables."

— Design principle maintained throughout the engagement
Mar 2024

Discovery & Heuristic Review

Live walkthrough of the existing interface. Identified missing tooltips, scattered controls, and unlabeled icons. Kicked off the formal UX research program.

Mar – Jun 2024

UX Research Program

Directed five personas, user flow diagrams, heuristic evaluation, accessibility audit, and competitive analysis. Established a prioritized use case list with scientific partners.

Jun – Jul 2024

Feature Manager & Navigation Redesign

Led iterative design of the Feature Manager grouping flow across multiple prototype reviews. Redesigned the toolbar into a structured sidebar and aligned the shell with the Polus suite.

Jul – Aug 2024

Image Render Module

Designed the UX for rendering cell images linked to scatter plot data points. Explored two structural approaches and resolved critical interaction questions with stakeholders.

Sep 2024

Clustering, Dimension Reduction & Explorer Expansion

Organized a technical briefing on clustering and UMAP/PCA-style reduction, translating the science into UX requirements. Added Explorer as a top-level nav section.

Oct 15, 2024

Stakeholder Approval Review

Presented the full redesigned system to the VP of Data Science and the broader team. Used as the formal approval checkpoint before moving into Doc Explorer work.

Nov – Dec 2024

Doc Explorer & LLM Integration

Directed design of document loading, LLM query interface, article summarization, and document comparison with inline AI output and source linking.

Jan 2025

Final Refinements & Suspension

Delivered the full-screen Chat with Data modal, comparison view, and save results flow. User testing was scheduled — then NIH/DOGE budget cuts in January 2025 led to the offboarding of the Axle UX team, and work on the project stopped.

Before & After

The comparisons below show the transformation across all three core modules — from the original developer-built interface to the redesigned system.

File Manager

Before File Manager before redesign
Original — inline links, no clear CTA hierarchy, limited metadata
After File Manager after redesign
Redesigned — structured file table with Type, Linked App, Size columns and clear action buttons

Feature Manager

Before Feature Manager before redesign
Original — flat column list, no grouping, no filter controls, selected items listed in a side panel with no context
After Feature Manager after redesign
Redesigned — Groups/Dive/Facet/Processing tabs, percentage filter slider, sort controls, and Selected Columns panel

Data Manager

Before Data Manager before redesign
Original — controls scattered across top toolbar, dense column list below chart, no Charts/Tree toggle
After Data Manager after redesign
Redesigned — structured left sidebar, Charts/Tree split toggle, clean column selection panel with search

Outcomes

10+

Sprint cycles of iterative prototype delivery

5

Major modules designed or redesigned

5

UX research methodologies applied

Project status: As user testing with scientists in molecular modeling, biology/engineering, and AI was being scheduled, NIH/DOGE budget cuts in January 2025 led to the offboarding of the Axle Informatics UX team — one of several Polus suite projects brought to a halt as a result. Despite this, Cytoexplorer achieved substantial improvements in usability and produced a well-documented design system and prototype library for any future continuation.

Key Takeaways

Scientific Data Viz Bioinformatics Adobe XD Prototyping Design Systems Cross-functional Collaboration Axle Informatics · Polus Suite UX Research