Enable Medicine – Data Upload Redesign

Redesign of Enable Medicine’s Data Upload Journey

Redesigning the Enable Cloud Platform’s image data upload flow to be more approachable, usable, and time efficient for biologists.

Home

Timeline

4 Months

Role

Design Lead

Product Area

Data Upload

Platform

Desktop

The updated launch screen to access the data upload flow – needed a bit of visual TLC from the original.

The new collapsable file uploader that works in the background while you fill out the rest of the inputs.

The updated design for the "assay configuration" portion of the upload flow.

The new clinical metadata step in the upload flow. This was previously undiscoverable and elsewhere on the product.

The new study association step – to accommodate new product features and capabilities.

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

Project Background

Enable Medicine is a biotech company builds products which allow biologists to upload, index, and analyze 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 in the upload process, and where to complete those tasks
unsure of what information types were required of them (image, CSV, etc)
unsure how to format 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 user focus on inputting the required information rather than having to discover this on their own.

Improving user guidance, standardizing communication

Standardizing all form blocks meant we could unify the interaction patterns and build consistency in how users receive and interact with instructional guidance.

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, collapsable window allowed users to complete other steps while their files processed in the background, preventing hold ups.

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 metrics to outline how these changes improve both external users and internal team members experiences.

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

Parallelized file processing (as opposed to sequential) significantly reduced the average time in this 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 yielded a reduction in user drop-off when compared to before.

The Approach

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

Leverage our internal scientists to build an optimal user-flow and improve communication

With a content-first approach, we leveraged our internal scientists as this is their domain of expertise. We nailed down a full write up of clear and accurate requirements. This included:

Ensuring we organize all requirements into well defines steps
Validating the order of steps made sense to our target users

1

Key changes at this stage

A clear step-by-step tracker was added to improve user awareness
File selection & upload was shifted to the front of the flow so users can do other tasks while files process
Static and non-immediately relevant information was hidden to reduce cognitive burden

2

Improving organization and usability of UIs

Next we ran a full usability audit on the existing UI to determine where exactly users were getting stumped. We used this information as the foundation for new and improved UI design/development.

Key changes at this stage

A unified page layout, focused on only showing the user was is necessary at the moment, was established.
The file processor was moved to an always present and expandable window in the bottom right of the screen
Standard 'form blocks' were established so the communication and interaction styles were more consistent among all steps.

One of the most important goals

How do we balance the amount of actionable information with a willingness to engage with it?
Providing clear communication while not over saturating the user with walls of text was our primary goal.

Validating design decisions

To ensure we were on the right track, we built high-fidelity prototypes and conducted usability sessions with our internal team of both seasoned and newly-hired scientists (to account for results skewed by familiarity bias).

3

Key changes at this stage

The sample labeling step had to be completely rethought as the UI pattern turned out to be more ambiguous than anticipated. Previously the grouping action was undiscoverable, and the labeling columns caused confusion about how the experiment > sample > region hierarchy impacted data labels.
Iconography and copy around the collapsable file uploader were updated for clarity

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.

4

Key changes 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.

From start to finish

Below is an animation that illustrates how we went from the original UI to the final updated UI.

Old – tab-based upload UI (click to enlarge)

New – sequential upload flow (click to enlarge)