PROJECT OVERVIEW
Enhancing Mapping and Design Experiences
At Equator Studios, which provides users with high-quality, easy-to-access elevation data and map design tools. Low retention rates on their application motivated the team re-think the user experience of their platform.
DATE
December 2021
SERVICE
User Onboarding
ROLE
User Experience Designer
CLIENT
Equator Studios
CLIENT OVERVIEW
About Equator Studios
Equator provides users mapping software used for extracting high-quality data and creating custom maps.
This clip shows the Point Cloud and Contour maps loading on my site
Equator provides users with various 3D topographic maps including Point Cloud, DEMs, Contour
Improve the experience around; (1) searching, creating a site, and loading mapping data, (2) improve the workflow for customizing & marking up data, (3) uploading & downloading the map
Product Goals
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.
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
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?
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
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)
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
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.
Initial wireframe sketches and some of the UI I used for inspiration
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
High-Fidelity Designs
Once the PM and Developers signed off on the low-fidelity wireframe, I added more UI elements and visual details.
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.
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.