Enable Medicine – Data Upload Redesign

The updated launch screen needed to facilitate new actions + get a little visual TLC from the original.

The new collapsible file uploader is able to work in the background while the rest of the process is completed.

The updated "assay configuration" step employs better hierarchy and communication to guide users through the process.

I brought the "Clinical Metadata" step into the upload flow as optional. Previously is was undiscoverable elsewhere and plays an important role.

We added a new "Study Association" step as part of our work to make studies (projects) on the group, more flexible.

Hover here to see old UIs (slides 1, 2, 3, 4)

Project Background

Enable Medicine is a biotech company building products that allow biologists to upload, index, and analyze spatial image data in the cloud.

Currently targeted toward , this cloud-based product gives biologists cutting-edge analysis tools and powerful indexing capabilities, all in the pursuit of enabling better drug development and disease treatment.

The Challenge

Simply put, the existing data upload journey was confusing, complicated, and unintuitive. The process of uploading and configuring image data (a crucial first step in beginning analysis) was pushing users away from the product.

‍

Biologists were consistently:

unsure of what steps were required/optional in the upload process, and where to complete those tasks
unsure of what information/data types were required of them (image, CSV, etc.)
unsure how to format the information correctly

‍

In addition to underlying usability issues, improperly used UI elements made each step confusing and generally did not scale with future plans to support more data types.

Key Improvements

An easily trackable journey

A linear structure was added where an open-ended flow wasn’t working. This always-visible progress tracker made it clear what was expected of users and when.

Simply ‘going along for the ride’ lets users focus on providing the required information rather than having to discover what's required on their own.

Improving user guidance, standardizing communication

Standardizing the forms we presented users at each step of the upload flow meant we could build consistency and familiarity into the experience.

An added benefit was the scalability if we ever needed to add more steps in the future.

Upload data in the background

Placing the file upload UI in a separate, collapsible window allowed users to complete other steps while their files processed in the background, preventing delays.

Multiplex images range in the 1s to 10s of gigabytes, meaning processing times can be huge. Previously, users had to wait for completion before doing anything else.

The Impact

Just a couple of metrics to outline how these changes improved experiences for both external users and internal team members.

60%

Reduction in customer support emails/tickets

Usability improvements reduced the number of data upload support tickets our scientists needed to handle.

7-10m

Average time spent in the upload flow

Enabling users to move on to other steps while files processed in the background significantly reduced the time spent in the upload journey.

which in turn...

Gave back time to our team

The reduced need for customer support gave our internal scientists time back to focus on their important research and work.

Reduced user drop-off

Allowing users to multi-task shortened the total time required from them. This reduced user drop-off when compared to before.

Part 1

Consulting our scientists to build an intuitive series of steps

The number one feedback here was that the process felt unintuitive and out of expected order. So, to understand why, I consulted our internal scientists to best understand what they expect to be able to do.

This gave me:

A clear set of data assets to upload, labeling and classifying requirement, and correct terminology
A proper order for uploading steps

‍

Let the scientists guide us...

Given the criticality of the upload journey and the complexity of the data involved, right from the beginning this needed to be a collaborative effort.

Critical finding

All scientists we talked to expected a sequential set of steps for uploading.

Instead, they were presented with tabs for each type of upload activity. This caused dependency issue when one activity required completion before another.

Part 2

Cleaning up UIs & enforcing a linear process instead of tabbed approach

With a solid user flow to build on, I focused on understanding what elements of the UI were causing localized pain points and confusion.

Key notes from this work:

What users expected to be a consistent set of steps were presented through a tab menu.
- This made the process confusing as some steps had dependencies on others.
The upload requirements lived inside a semanticly themed banner that made it look like there were errors.
The main CTA was placed on the banner, making it look like an action to take on an error instead of the key finishing CTA.

Critical goals of new UI

• Make all required steps and current progress super easy and quick to understand
• Allow uploads to happen in the background so users don't get help up.

Part 3

Usability testing and feedback updates

When running usability tests on the full upload flow, major issues arose in the sample labeling and region grouping step.

What wasn’t working

Grouping trigger was undiscoverable
The initially disabled “Region Label” fields were confusing
The expected hierarchy of Experiment > Sample > Region was confusing

What worked better

Lettings users create groups as they go
Auto-grouping images into groups as they’re created
No ‘Save Region Group’ confirmation requirement.

‍

Part 4

Prepping designs for implementation

With a full set of proven UIs, front-end developers helped determine feasibility of the proposed designs and how we could streamline the UI for scalable implementation.

Key callouts at this stage

All sections were structurally and stylistically streamlined (as much as possible) to reuse code, cutting down implementation time.

A new step of selecting your user group and study was added at the beginning. This was required for the backend to know where to store the rest of the data.