Araceli Biosciences
Voyager Software

 

Araceli Biosciences was developing a revolutionary high content analysis instrument and needed help designing the software that would be a key component of the final product. We completely overhauled the outdated existing software UI and simplified the user experience to create an intuitive and modern product.

 
 
 
 

I was part of a three-person design team that redefined this experience from the ground up. We researched and used a virtual simulator to understand how this instrument worked and identified pain points where the experience could improve. I was the primary UI designer and worked closely with my team through explorations, iterations, and testing.

The end result was a clickable prototype of their new flagship product, the Araceli Endeavor.

 
 
Araceli_BeforeandAfter.png
 
Araceli_Interface1.png
 
Araceli_Screens.png
 
 

Before, the software looked outdated, had too many duplicate workflows, and overall needed to be updated and simplified to pair with their new high-powered instrument. On top of that, when a product was purchased, extensive multi-day operational training would have to accompany the instrument which took both time and extra resources.

We created an interface that eliminated the need for training by designing intuitive controls and workflows through the whole experience. We grouped similar functions together in the interface, used familiar iconography, and easy controls to define the experiment parameters. This new software was to be used on a Microsoft Surface Studio, a large touch-based display, and this provided us with the opportunity to utilize multi-touch functions in the design for features like tools and messages.

 
 
Araceli_Explorations.png
 
 

Being intended for such a large screen, we went through many iterations and drafts of how the interface could be designed and what certain interactions would feel like.

One of the biggest upgrades made was making the well view full screen. Before, it was confined to only part of the screen, but when I was in early explorations, I thought, why can’t this take up the whole screen? It’s the primary area of focus in the interface and the thing that will be reflecting different settings and controls so why not give it that importance? This larger view area helps the scientists analyze what they’re seeing faster and pairs with the hardware in accelerating results.

We also worked closely with the client to remove elements and features to simplify the experience and make it a faster process from setting up an experiment, to scanning the plate, to reviewing and exporting the results.

 
 
Araceli_ChannelStates.png
 
Araceli_Components.png
 
 

The interface required many components and repeating structures, and this all needed to be organized and documented for development handoff. I created a robust component library in Figma using the atom, molecule, organism structure. By using this approach, each component was built out of smaller, more singular elements until a full component was created. This also allowed us to make changes to a base component that would apply to any other component using that same element. This ultimately saved time and streamlined the design process.

I also utilized Figma’s Variant feature, combining components so that they could be easily switched out in the design. This made testing and revising faster and created an organized system to pull from in the designs.

 
 
Araceli-Endeavor_High-Content-Analysis-Accelerated-2.png
 
 

The Araceli Endeavor was showcased at the virtual Society for Laboratory Automation and Screening conference in January 2021 and became a new product award finalist.