Digital Histopathology
The client has a desktop and web product that digitalizes analyzing tissue cells in preclinical studies to increase efficiency. The product has an image viewer that allows histopathologists to view, edit, analyze, create, and share reports on their observations.
This project looks at introducing a 'compare' feature in the products to allow parallel viewing and comparing of up to four tissue cell images. It replicates and improves upon the existing mental model in the physical world into the digital space.
Note: The process and research details in the project are limited due to confidentiality reasons. Please reach out for additional information.
Domain
Interaction design, UI design
Timeline
Jan 2021 - Mar 2021
Team
Project Manager, UX Designer, and client's engineering team
My Role
Leading Interaction Design, User Workflow, Visual Design
Objective
How might we build an intelligent, highly intuitive, & easy-to-use method to compare different images?
1. Background
IMAGE VIEWER
The image viewer aims to help speed up the image analysis process and the creation of diagnostic reports. Its features, such as viewing, editing, annotating, analyzing, & reviewing cell images, helps histopathologists achieve this goal. Another crucial feature that would aid in achieving this goal is compare.
Background
COMPARE CELL IMAGES
Histopathologists compare slides from the same study to spot differences, analyze the effects of different dosages, identify patterns, and reconfirm abnormalities. Comparison can either between tissues from the same organ in different animals or between multiple tissues from one organ in one animal.
When done manually, the slides are viewed one after the other separately, which makes comparison difficult, time-consuming, and prone to errors. Therefore, digitalizing this process would require improving the current workflow, not just translating the existing one.
Research Synthesis
User Overview
Solution
INVOKING COMPARE
The product allows the user to compare a minimum of two and a maximum of four images. It can be evoked from two places:
1. Invoking compare from the gallery
Use-case: The user may start his journey intending to compare images from a study.
2. Invoking compare in the image viewer
Use-case: the user may want to compare other images from a study while analyzing an image to aid in diagnosing the image.
Solution
REMOVING IMAGES FROM COMPARE
On selecting compare, the dial expands to reveal another layer that contains options related to compare. The 'remove' option in the layer will remove the selected images and readjust the grid.
Grid readjusts to accommodate 3 images
If the user clicks on 'remove' after selecting three of the four images, a dialog asks the user to either cancel or replace one or more images to stay in compare mode.
Solution
ADJUSTING IMAGE SETTINGS
The user can edit the image clarity - brightness, and contrast for each image in the compare mode. The widget is evoked from the edit menu, showing the selected image's adjustment values. The 2nd layer of the dial changes to display image adjustment related options when the widget is 'active'.
Solution
AUTO SYNC IMAGES
In the 'auto-sync' mode in compare, any action taken on the selected image will reflect on all images. This enables coordinated panning & zooming to reduce the hassle of adjusting images individually.
Activating Auto-Sync
On clicking auto-sync, a dialog asks the user whether or not to set the pan, zoom, and rotate values same as the selected image.
Rotating an Image in Auto-Sync
On rotating an image by a particular angle for eg. increasing by 10 degrees, the angle of rotation for all images increase as per that value - by 10 degrees.
Adjusting individual images in Auto-Sync
In the auto-sync mode, the locks icon depicts that the image has been 'locked' in auto-sync. The user can change values on individual images without affecting the rest by unlocking the image.
WORKFLOW ADAPTED TO THE WEB PRODUCT
Takeaway
Designing for technology that's new
The technology of digital histopathology is very new in India. Throughout the design process, we had to understand tech feasibility by working closely with the developers. Furthermore, the concept itself was new and we had little research on how users work with this kind of software. This meant we had to make certain assumptions about the user for this V0 release. In the future, I expect there to be changes based on more learning.