Enable Medicine – Revamping the Visualizer

Overhauling the Enable Medicine Visualizer

Redesigning the Enable Cloud Platform’s tissue image visualization tool to host new features, improve the in-canvas experience, and upscale general usability.

Home

Timeline

6 Months

Role

Design Lead

Product Area

The Visualizer

Platform

Desktop

Hover here to see old UIs

Project Background

The Visualizer is one of Enable Medicine’s flagship products. This tissue image visualization tool gives spatial biologists an immensely power way to view . By visualizing different biomarkers (protein stains, transcripts, etc) and various masks and annotations, biologists can study diseased tissue and extract information that directly contributes to the study and development of novel treatments.

The Challenge

The Visualizer is an incredibly powerful tool, but it’s the complexity that comes with this capability which was tripping users up. Having too many controls in too many places bogged down users’ ability to function.

‍

New and existing biologists were:

confused about how to add/remove various images, biomarkers, annotations, and masks.
unable to clearly differentiate which inputs where having what control over the canvas content.
always opening and closing different panels to see the canvas underneath.

‍

Lastly, a new feature called “image splitting” was soon to be added, but there was virtually no space left on the UI to integrate the new controls necessary.

Key Improvements

Improved canvas visibility

Collapsing different user journeys into their own panels drastically increased the amount of canvas visible at all times.

Cleaner, compact channel organization

Slimming down controls and applying standardized UI patterns allowed more controls to fit in a smaller space while retaining high usability.

Unified control styling across all surfaces

Applying a custom and unified stylistic approach gave the product a more professional and polished look and feel. We also could begin to introduce interaction familiarity.

New scalable product structure

With a new scalable UI structure, the Visualizer can now support more feature expansions without compromising the canvas visibility or cognitive burden on the user.

The Impact

Just a couple metrics to outline how these changes improve the users’ experience when working in the Visualizer.

51%

Increase in canvas visibility

Greater canvas visibility meant users spent less open/closing panels and more time completing their scientific work.

2

New panels types now available

Restructuring the UI allowed us to integrate 2 new feature panels, with room to add many more in the future.

which in turn...

Reduced user frustration from repetitive clicks

Users reported that having to constantly open/close panels was a big frustration. This was a small but impactful quality of life improvement.

Expanded Visualizer draw to more users types

Broader functionality allowed us to attract new user types to the Enable Medicine product, opening new paths to revenue.

The Approach

Overhauling a surface as big as the Visualizer was not going to be a small project. Given this, what you see below focuses more on how I tackled this project rather than a comprehensive collection of all improvements, changes, and updates.

Building a picture of the current user experience

What’s currently bogging users down? How’s every arranged?

Our decisions to overhaul the product didn’t mean just “make it prettier,” rather this was our opportunity to hone in on and rethink key parts of the user experience that were not meeting our standard.

The first step was to pick apart the current UI in an audit focused on general usability, feature discoverability, and UI accessibility.

1

Re-establishing a scalable information hierarchy

How can we re-organize to maximize usability and efficiency?

It was clear from early on that a UI re-organization was an urgent need. Aside from most of the canvas being occluded by control panels, many of the powerful functions were not easily understood or locatable.

Initiating tasks as simple as creating a note, a fundamental use-case for spatial biologists, were not easily understood.

2

Redesign controls to save space and improve intuitiveness

Systematically breaking down and rebuilding canvas controls

Organizing the panels alone wasn’t going to be enough. Each UI control held lots of room for improvement in terms of usability and clarity. I evaluated each panel control in terms of purpose, priority, space, and clarity. From there I rebuilt as many as I could to (1) reduce the space needed and (2) make its usability as simply and clear as possible.

3

Validating major changes with prototypes and UXR

Validating UI structure choices with prototypes and UXR

Organizing the panels alone wasn’t going to be enough. Each UI control held lots of room for improvement in terms of usability and clarity. I evaluated each panel control in terms of purpose, priority, space, and clarity. From there I rebuilt as many as I could to (1) reduce the space needed and (2) make its usability as simply and clear as possible.

4

Unifying the look and feel, boosting UI accessibility

Building in legibility over complex backgrounds

Talk about color and filter effects that play nicely with complex visual backgrounds

5

From start to finish

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

Old UI (click to enlarge)

New UI (click to enlarge)