UX DESIGN

Creating a web-based biomolecule sketcher

Whilst at ChemAxon I helped design Bio Eddie, one of the world's first web based bio-molcule sketching applications.

Initial Research
User Interviews
Observations
Conceptual Design
Lo-Fi prototyping
Personas
Detailed Design
Detailed Design
Interaction Design

Initial Research

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.

Alongside the interviews, which were primarily conducted face to face in our offices, I also conducted ethnographic research whereby me and another UX researcher attended a real lab environment in order to see how chemists work in real context. This involved 2 days on site and uncovered some interesting issues that would be important considerations in the design. Primarily we realised that users often accessed systems on small screens, on heavily protected lab computers and it was imperative to ensure we had a simple, clean user interface without unnecessary complexity and extraneous information presented to users.

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.

During the conceptual design phase we first created a set of persona documents to represent our key research findings, and then began creating basic prototypes to try and cater to their unique needs.

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.

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.

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 used by many prestigious pharmaceutical companies. It is also being used as a standalone tool by academics and biochemists worldwide.

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".