Split View

At Pathcore, I was tasked with designing a new collaborative feature for remote pathologists to analyze multiple images simultaneously. This feature is live and played a key role in the product's v3.0 release. I led the user experience and interface design for this critical feature, ensuring it met the needs of remote pathologists.

Company: Pathcore
Role:
Product designer
Team: Engineering lead, developers, and CEO
Platform: Web
Sector: Healthcare

OVERVIEW

Problem

Pathologists were unable to analyze groups of images side-by-side on our platform which is important in their workflow. This gap in functionality hindered our ability to attract new customers and support research teams among existing clients.

Outcome

Launched a responsive web app feature that streamlined multi-image analysis for pathologists to evaluate the safety profiles of promising pharmaceuticals. This improvement contributed to a 117% YoY growth in 2022 and drove greater adoption among research teams.


RESEARCH

Leveraging an existing feature, Figure Maker

Figure Maker was designed to help pathologists create reports by adding and annotating images. Its components provided a strong starting point for multi-image analysis. By building on this existing structure, we were able to extend its capabilities without reinventing the wheel.

Insights from user research

To understand the challenges faced by pathologists and ensure the new feature addressed their needs, I analyzed feedback from product trials based on their experience of accessing multiple images on Figure Maker and reviewed flagged support tickets to identify recurring pain points.

Navigational Challenges
Used browser tabs to open different groups of images due to the lack of folder navigation within Figure Maker.
 No Space for Multi-Images
Found it challenging to view multiple images simultaneously in Figure Maker, as the images were confined to one half of the screen.
Hidden Annotation Tools
Often inquired about the ability to draw on Figure Maker, highlighting the lack of visibility and accessibility of annotation tools.

IDEATION & PROTOTYPE

Design Principles

At the start of the project, I received specifications outlining the technical requirements for split view. While considering these specifications, I also defined design principles based on user research to address key user needs. Some of these included:

Design Exploration #1: Annotation Tools 

Pathologists initially struggled to locate annotation tools. Our goal was to improve their visibility, ensuring pathologists could efficiently review images without adding clutter to their workflow. Below are variations of image-specific tool placements explored through quick sketches.

Design Exploration #2: Add to View 

A key feature for split view was adding images to the view. We explored different approaches, including drop down menu, modal, and context menu. Context menu was ultimately chosen for its flexibility, allowing users to perform actions directly without compromising screen space.

SOLUTION & METRICS

Maximized Space to View Multiple Images

The new layout was designed using existing components from Figure Maker. To maximize image viewing space while enhancing functionality, layout tools were placed in the top bar, while image-specific tools were positioned directly above each image.

Image-Specific Toolbar on Hover

The toolbar appears only when the user hovers over an image. The image lock tool serves as a primary function, while users can expand the toolbar to access all available tools.

Slide Selection

A list view was added for slide selection, allowing users to see more images at once. Additionally, hovering over image names reveals labels, helping users differentiate between images with similar names.

Video Demo

Walkthrough of Split View

Design Validation and Success Metrics

Customer Acquisition: Split View increased in customer acquisition, contributing to YoY of 117% increase in 2022. 
User Feedback: Pathologists reported improved efficiency and satisfaction with the ability to navigate folders, annotate images, and view multiple slides simultaneously.
Adoption Rates: A marked increase in PathcoreFlow usage by research teams.

REFLECTIONS & LEARNINGS

For next steps, making this feature fully keyboard-accessible would further enhance efficiency, allowing pathologists to complete their work more quickly.

Through the exploration of multiple design variations, this project highlighted the importance of maintaining organized internal feedback documentation. It provided a clear point of reference for the rationale behind design changes.

Made with ❤️ by Becky Zhang