Our decision to overhaul the product was not just about “making it prettier”. This was our opportunity to hone in on and rethink key parts of the user experience that were not meeting our users needs.

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

It was clear from early on that a UI re-organization was urgently needed. 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 obvious to our users.

Organizing the panels alone wasn’t going to be enough. Each UI control held lots of room for improvement in terms of usability, compactness, 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) improve its intuitiveness as much as possible.

To ensure the changes I was making were having a positive impact, I conducted usability testing with our internal team of scientists. For each exercise, I evaluated how easily they were able to understand the controls and how quickly they were able to complete the required tasks.

This was an interesting challenge to solve because all of our panels had some level of transparency and the images below tended to be immensely visually complex. On top of that, the existing UI was riddled with low-contrast elements, making the whole UI challenging to cognitavely breakdown.

To improve this aspect of usability, I established a new styling theme to employ over our existing design system. This theme would ensure all controls had enough contrast and clarity when overlayed on the busy backgrounds.