DATES
Jan 2023 - March 2023
SERVICE
Slide Management Flow
ROLE
User Experience Designer
CLIENT
Pictor Labs. Inc.
CLIENT OVERVIEW
About Pictor Labs
Pictor Labs’s mission is to “redefine histopathology”, which involves examining tissues under a microscope to diagnose diseases.
This clip shows how selecting different stains changes what is seen in a tissue sample
This reveals details within the cell's cytoplasm & highlights specific features, which is crucial for examining how diseases start and progress at a microscopic level
BACKGROUND
What is the Purpose of Staining Tissue and What is the Current Process?
Enhanced Histology
Tissue Processing Flowchart
Enhanced Histology
Tissue Processing Flowchart
Enhanced Histology
Tissue Processing Flowchart
Provide a digital process for (1) identifying slides using slide labels and (2) triggering virtual staining through an order process.
Product Goals
Immunohistochemistry (IHC)
This technique uses special antibodies with markers to find and show specific proteins in tissue samples.
Hematoxylin and Eosin (H&E) Staining
This method colors different parts of tissue cells to help tell them apart. It turns the nucleus of cells blue-purple and the rest of the cell and the area around it pink.
Special Stains
These are dyes show particular parts or substances in cells. PAS stain makes glycogen in cells visible. Masson's trichrome stain helps to tell muscle & collagen fibers apart.
Fluorescent Staining
This method uses dyes that glow under special light to see certain parts or molecules in cells. It's often used with a microscope that can see the glowing parts.
Staining Techniques
PROBLEM COMPONENTS
What is the current staining workflow?
User Flow
Next we spent time thinking about the steps a user would need to go through in order to complete the task of creating a barcode and placing a stain order.
.png)
Messy screen capture of the team's initial thinking around the feature
DESIGN
Sketching & Brainstorming
After mapping out the user flows, my team and I brainstormed many solutions, testing out different ideas and layouts. We examined other software for best practices.
DESIGN
Low-Fidelity Mockups
When I started designing, I focused on the key activities of generating slide labels and generating stain orders as well as tracking and visibility of these key processes.
DESIGN
Flow Walkthrough
01
Users need a way to identify tissue samples
Create a Slide Label
01
Active Label with Details
02
Users need a way to view their created labels
Track & View Slide Labels
03
Users need a way to place a virtual stain order
Create a Stain Order
01
Order History
04
Users need a way to see their pending and past orders
Track & View Stain Orders
VISIBILITY OF SYSTEM STATUS
Since creating a label or an order involves multiple steps, I used a breadcrumb UI in the top left of the screen to guide users through the process and indicate their current step.
NAVIGATIONAL COMPONENTS
To provide navigational context, I began with a tab design for each page. I used the company's purple color palette to highlight the active page, while using gray for the other menu options.
DESIGN
Layout & Structure
CONSISTENCY & STANDARDS
Each page on the "Generate Orders" and "Generate Labels" section has a clear left-aligned title that changes for each step in the flow. I devised a consistent column table format that would be used across all pages.
Initial wireframe sketches and some of the UI I used for inspiration
DESIGN
High-Fidelity Designs
Once the PM and Developers signed off on the low-fidelity wireframe, I added more UI elements and visual details.
CONCLUSION
Project Impact
This project aimed to improve digital solutions for histopathology by focusing on user-centered design.
We introduced a new slide management feature using QR codes, making laboratory workflows more efficient and effective. This innovation streamlined traditional lab processes and set a new standard for digital integration in the histopathology field.
2 Pathologists | 3 Lab Technicians | 1 Cytologist
Total Interviews: 6
Histotechnicians
Technicians who prepare and stain tissue samples to be analyzed by medical doctors
Target Audience:
Target Audience:
Specialists who study the cause & development of diseases by examining tissues
Pathologists
USER RESEARCH
Who am I designing for?
I aimed to understand our current workflow, its challenges, and potential opportunities by talking to our end users, including pathologists, histopathology technicians, and other lab scientists. From this research, I identified two main user groups.
The Technology
Pictor Labs uses machine learning to create virtual chemical stains (a). This approach replaces chemical dyes (b) with a digital process, making diagnoses faster and more accurate.
PROBLEM COMPONENTS
How does a user order a virtual stain? How do you simplify this process?
Overview
Virtual staining employs advanced computer algorithms, particularly deep neural networks, to mimic the visual effects of traditional histological stains on medical images.
PART 01
Upload Tissue Samples
Print out a scannable barcode to label & track physical tissue samples
PART 02
Stain & Analyze Tissues
Use the physical barcode to order one or more virtual stains
User Type: Technician
User Type: Specialist
01
Users need a way to identify tissue samples
Create a Slide Label
02
Users need a way to view their created labels
Track & View Slide Labels
03
Users need a way to place a virtual stain order
Create a Stain Order
04
Users need a way to see their pending and past orders
Track & View Stain Orders
User Journeys