Product and UX Designer
encoderFocusDetail.png

Pathware

Pathware Bioptic

Pathology is at the cornerstone of diagnostic medicine. But, with a steady decline of available pathologists worldwide, it has become increasingly difficult to find skilled professionals for diagnoses and treatment plans—emphasizing the growing need for a more streamlined biopsy sample management solution. Pathware develops elegant and intuitive hardware and software that simplifies the critical diagnostic workflow, enabling pathologists to increase their efficiency without sacrificing quality of care. Their cloud-based software helps simplify the pathology workflow and reduce the rate of repeat procedures.

I designed the UI and visual direction concurrently with the industrial design team at Tactile. The defining challenge of this project was to coordinate the things seen on screen with the physical interface on the device. My design aims to be simple and intuitive yet flexible enough to use with both the screen and the encoder.

 

Team

Tactile

Contributions

User Experience
User Interface
Branding & Visual Design

 
 
 

It was essential have a clear idea of the existing challenges and opportunities within the Pathology space. By mapping out the Pathology workflow, I was able to thoroughly understand how the Bioptic device would could improve the existing process. It was my job to create elegant interactions between both the physical and digital components of the device, making rapid on-site evaluation a possibility.

 
 
slide_detail_new.png
 
 

To get started with the UI, the Pathware team provided detailed requirements documents that outlined the necessary functionality for their new device. My approach was to organize these functions into a simple IA as a guideline for primary interactions. Identifying where these interactions occurred in a typical workflow is where I began to explore button sets and physical UI for the device.

As the surgeon takes samples, they will insert them into the Bioptic for analysis. Viewing these slides and their cell clusters should be a quick action taken as a double-check measure by the physician in surgery.  It was my job to compose interactions with both a physical and digital interface that made navigating slides, selecting them, viewing their cell clusters, and zooming as simple and intuitive as possible.

 
 
clustersketches.png
 
 

Sketching Cell Cluster Navigation

Making it quick and easy to quickly cycle through all of the cell clusters in a slide scan was important. I worked through a few models that accommodate swipes, taps, and a turn of a physical encoder to move through the different clusters. Close collaboration with the industrial design team to allowed me to explore several formats for a physical input include a detachable mouse and surface mounted encoder.

 
 
 
 
 

Defining Input Methods

 
 

During my exploration, I devised multiple input methods for the Bioptic device based on primary use cases and the feature set outlined by Pathware. An all-touch solution is modern and ubiquitous but doesn’t account for using the device with gloves – a must in any operating room. This was a limiting factor for a touch only design. Another important consideration is that medical devices commonly have interface redundancies to accommodate a user base with a wide range of experiences and biases.

Adding a digital encoder to act as a control redundancy was another proposed solution. All UX behaviors must be optimized for touch while also being easy to navigate using left, right, and press on the encoder. The satisfied the requirement for a control redundancy and allowed me to focus the primary interactions around the encoder input.

 
 
 
Scrolling through clusters in a card-style “shoveler”.

Scrolling through clusters in a card-style “shoveler”.

Scrolling through clusters via a central touch target for next and previous.

Scrolling through clusters via a central touch target for next and previous.

 
 
 

Rapid Prototyping

Rapid clickable motion prototypes help illustrate the interactions models that were in play. These types of quick visual prototypes are an indispensable part of my process when developing digital interfaces.

This interaction study helped refine the final solution to cycling through the cell clusters identified in the scanned slide. The card-style design with rotary encoder was chosen for it’s ease of one-handed use and the thumbnails which provide an at-a-glance view of the cell clusters.

 
 
pathware_page_hero_new.png
 
 

Crafting Design Guidelines

Stepping into higher fidelity comps, I began exploration of visual design and the application of color, type, and layout. Emphasis was put on the number slides active for the current patient and their viability. By putting the slide info into a card format rather than a table, the users can quickly see the slide viability and cell cluster information. The use of red and green was an early exploration at identifying the slides that are good vs the ones that are not.

For the slide viewer, it was my aim to simplify and minimize the amount of information on the screen. By keeping the patient info and slide card at the top of the slide viewer, I realized that the UI ate up too much of the screen space and opted for a more minimal set of data that keeps the focus on the clusters.

 
 
 
 
 

Final Design

The design of the Bioptic device serves two main functions – the first is the scanning and collating of slide data of an active patient. The patient data is persistent on the slide view with slide adequacies clearly marked. As slides are scanned they populate the slide area to the right. A table of data tells the doctor the number of cell clusters and the cell count for that slide. A calculation is made and instantly records a status of adequate or inadequate. Turning the encoder invokes a neutral state selector for inspecting individual slide scans.

Selecting a scan invokes the a slide imager. The imager is a viewport for reviewing scanned slides. UI on the left shows where clusters have been identified within the scan with arrows to jump the focus to the next cluster. This mitigated the need for panning or zooming on the slide image. The imager is used as a quick confirmation by human technicians.

 
 
pathware_logo.png
 
 

Branding and Visual Style

It was my role to conceive a visual style for their brand. Pathware’s design-first point of view means their branding and application should look the part without alienating the traditional medical field. I devised a color scheme, typographic guideline, logo and usage document for Pathware and helped implement it in their digital interface.

 
 
bioptic_brandguidelines.png
 
pathware_web1.png
 
bioptic_montage_new.png