Designing a web-based biochemical sketcher

Project Overview

Bio Eddie is a new web based macromolecule sketching application based on HELM (hierarchical editing language for macromolecules). Previous macromolecule drawing tools were cumbersome and difficult to use and Bio Eddie is one of the first modern, web-based, integratable macromolecule sketchers on the market.

The Discovery Phase

To kick off interviews were conducted with five biochemists and domain experts to discern key requirements and to gain deeper insights into the problems biochemists were facing when representing and sharing macromolecules. 

We realised during this phase that having a customisable library of molecules, from which users could select and build macromolecules would be essential. We also unearthed the need for allowing users to 'collapse' or breakdown complex molecules into 'domains' so they could more easily interpret larger structures such as antibodies. Participants were excited at being able to see their structures on several levels - from more abstract all the way down to the atomic level.

Interviews were carried out with real chemists in their laboratory offices to get to know more about their requirements, pain points and workflows.

Conceptual Design

Our approach throughout the project was validate our design ideas early, and often. I worked collaboratively alongside the developers and product owner, and brainstormed ideas quickly. 

Ideas were put it into wireframes or when more interaction was needed, into interactive Invision prototypes where we tried to test and gain feedback as quickly as possible. Below you can see some early ideas for the layout of the application, where we experimented with how to map out the key functionality within the browser. These early ideas were put it into Invision mockups, before getting feedback from prospective users.

Some of our early rough wireframes to decide on the basic layout. These were refined into clickable Invision prototypes before testing with prospective users, and deciding on the left hand-side layout.

Detailed & Interaction Design

A key part of this software revolved around contextual interactions. Depending on what had been drawn on the canvas, various functions could be contextually available or not. A key part of my work was ensuring these interactions were intuitive and natural. 

You can see an example of one of these micro-interactions above, where a user places a new monomer next to an existing sequence - and can either append it to the end of sequence or replace an existing monomer effortlessly. 

As well as interaction design I was responsible for building hi-fi mockups for handover to developers, and also created a visual style guide for the application in Sketch to ensure visual consistency.

An example of one of our interactions, where users can either append or replace monomers.
Also note the structural information that appears on the details panel when a monomer is clicked.

The Results

The product has since launched and got a great response from the industry. It's currently being integrated into some of the most popular electronic laboratory notebook software, and is also being used as a standalone tool by some of the largest pharmaceutical companies.

Recent usability tests have shown really positive feedback with one biochemist stating that it's not taking them "5 minutes to do what used to take me almost an hour".

Some of the finished screens. The left hand screen shows a relatively basic sequence, whilst
the left shows an antibody collapsed into 'domains'.
Copyright Sam Fortune 2018