WORMFIDRVisualization for anatomical exploration
Role
UX Research, UX Design, UI Design
Project Areas
Biology, Visualization, Scientific Software
WormFindr is a novel visualization tool that combines 2D and 3D modalities for exploring the anatomy of C. elegans, a widely used model organism in biological research and education. I led the design from early research to interaction design, collaborating closely with developers and domain experts to support research and education workflows.
APPROACHVisualization for education & exploration
C. elegans is a widely used model organism in biological research, but working with it effectively requires a thorough understanding of its anatomy. While reference datasets and databases for this organism exist, the information is scattered across disparate sources and available at varying levels of detail. Through stakeholder interviews, secondary research, and competitive analysis, we identified two primary user groups—students and researchers—both seeking to understand specific anatomical features in the context of their own research.
In response, we centered WormFindr around education and exploration, integrating 2D electron microscopy imagery, a 3D anatomical model, and reference data into a single interface. This enables investigation across a wide range of anatomical features and supports multiple modes of learning and inquiry, making complex data more interpretable and interoperable.
As we distilled key user types and goals, we also began to understand the types of data and resources available to C. elegans research community, and how they might be integrated in a single platform for anatomical exploration.
CHALLENGELetting visualizations drive a responsive information architecture
Since WormFindr brings together novel 2D and 3D visualizations within a single interface, a core challenge was developing an information architecture that prioritized exploration without overwhelming users. Rather than relying on traditional page-based navigation, we iterated toward a visualization-first layout where interactions with the data progressively reveal relevant controls and information.
Global tools support broad exploration, while context-specific controls appear only when they are meaningful. For example, selecting a particular cell reveals detailed anatomical reference information and visual controls such as color and opacity. This approach keeps users focused on exploring anatomical features while still providing access to essential navigation and configuration options, aligning the interface with how users naturally investigate and interpret anatomical data.
WormFindr features a visualization-first layout, where collapsable left and right side panels surface relevant information and controls depending on user interactions.
USER INSIGHTAligning familiar frameworks and novel visualizations
Through focus groups and co-design sessions with researchers and domain experts, we refined WormFindr’s information hierarchy and interaction design. Sessions revealed how users move between levels of detail—drilling into organ system and cell-specific information, moving through space within 3D models, and flipping through "stacks" of 2D images.
In response, we collaborated with a scientific illustrator to create a dual-purpose anatomical reference key that shows 2D image orientation while enabling navigation through image stacks. We also refined the grouping of visualization controls and aligned color and naming defaults with established field conventions, while extending them where needed to support new interactions. Together, these insights helped ensure the interface felt both familiar and intuitive, even as it introduced novel ways of exploring complex anatomical data.
Tabular navigation reflects and expands on hierarchy, naming, and color standards developed within the C. elegans research community, while visualization controls reflect common display settings available in scientific segmentation tools. The anatomical reference key (anterior/posterior) further serves to orient users within a novel system by employing familiar patterns and visual cues.
DESIGN SYSTEMSAdapting design systems for visualization
WormFindr required a design system tailored for navigating novel scientific and anatomical visualizations. After collaborating with developers to select Naive UI for its flexibility and customizability during implementation, I created a Figma component library to work in tandem with developer documentation. Because no existing UI kit was available, this involved auditing components needed to support core WormFindr features and adapting corresponding MUI components to align with Naive UI specifications through a tokenized variable system.
Combined with the creation of custom components for visualization-specific interactions, this approach ensured consistency across the interface while preserving flexibility. It also streamlined collaboration with developers by establishing a shared framework for implementation and supporting iterative refinement as the tool evolved.
The WormFindr design system builds on core components and tokenized variables adapted from base MUI components in Figma in order to align with Naive UI specifications for a consistent design and development framework.
DESIGN OUTCOMESEstablishing a foundation for anatomical exploration
The initial design phase established a visualization-first framework for exploring C. elegans anatomy across 2D imagery, 3D models, and structured reference data. I defined layouts for global and context-specific controls, created patterns linking visualizations with tabular data, and documented core interaction behaviors to support multi-modal exploration. As the data pipeline continues to mature, this foundation enables ongoing refinement of advanced interactions and visualizations while supporting scalable development and collaboration.
Building on a visualization-first framework for WormFindr, advanced interaction and visualization refinement continues as the data pipeline and integration matures.
NEXT STEPS & LEARNINGSEvolving with data and real-world research constraints
As WormFindr moves into later stages of development, a key next step is continuing sandboxing sessions with developers to refine complex visualization interactions as real data is integrated and the data pipeline matures—bringing together fully interactive EM imagery, segmentation data, and 3D model construction. Asynchronous user feedback surveys are underway following an early demo at the most recent International Worm Meeting for C. elegans. Future work will also focus on onboarding and lightweight tutorials to support common workflows and introduce advanced customization features identified during user sessions.
This project reinforced the importance of planning for real-world constraints in user research and facilitation. During focus groups, variability in devices and screen sizes required rapid adaptation to planned activities in order to gather meaningful feedback. The experience emphasized the value of flexible research plans, early pilot sessions, and facilitation materials that can scale across technical and environmental limitations.