Designing a web based biomolecule sketcher

Whilst at ChemAxon I helped shape the design of one of the world's first macro molecular sketching tools allowing bio chemists to rapidly sketch and modify complex bio molecules.

CLIENT

ChemAxon

ROLE

UX Designer

DATE

Apr 2016 - Dec 2016

TOOLS

Sketch , Framer js

STEP ONE.

Research

Bio Eddie is one of the world's first macro molecule sketching tools, building on a market that has traditionally only offered solutions for sketching smaller compounds such as ChemDraw.

I joined the project as a designer, helping to optimise a working proof of concept and refine the design to prepare it for a market launch. My first work was exploration, as little formative research was done at the very beginning. We kicked off with 6 user interviews, and usability tests to validate initial assumptions and highlight issues with the initial concept. The interviews combined with testing showed weaknesses in the proof of concept, as well as some requirements we initially missed.

In particular we realised the UI was disjointed and we need to modify the layout to support multiple methods of input. In particular users needed to input large strings, and then subsequently modify them on a more granular level. We began to experiment with layouts and structure to optimise the application for these type of modifications.

After ideating on layouts and optimising the initial proof of concept we again requested feedback from some of our research participants and quickly found a layout that was best optimised for their workflows.

By allowing users to manipulate the structure on the canvas, whilst seeing details on the overall structure and monomers in the secondary view we allowed them to switch from granular to high level modification. Secondly, we added a library panel where users could quickly add and replace the building blocks of their structures. You can see the final structure below.

STEP TWO.

Ideation

Simply having a more intuitive layout, and fixing the key usability bugs we discovered in the initial research wasn't enough. We needed to create intuitive interactions that streamlined the chemists workflow and made the tool more efficient and usable.

Working with some of the bio chemists we carried out a design studio where we brainstormed how to improve the product and created some quick prototypes to further improve the product.

In particular we discovered that allowing users to drag over monomers to replace parts of the structure, as well as allowing them to append new monomers onto existing structures would be a massive benefits. Below you can see the final results from our interaction design studios.

SOME KEY INTERACTIONS

STEP THREE.

Validation

Having improved the user interface and interactions based on early stage feedback we needed to further refine and validate the application. We were finally at the stage of having an MMP, and then set up another round of qualitative research to test our work.

I planned and carried out usability testing with eight more prospective users and thankfully found that many of our changes leads to measurable improvements. Tracking metrics like time on task, error rate and overall usability using the standardised S.U.S scale we found a big jump in improvement and launched the product which was integrated into industry leading lab notebook software and also by some leading pharmaceutical companies.

Final outcomes

MEAN S.U.S SCORE

82

USER TESTING SESSIONS

10

TASK COMPLETION RATE

87.5%

Check more projects

WANNA WORK TOGETHER?

Let's have a chat

If you're interested in collaboration, or just have a random question about the best way to make tea, I'm happy to hear. Just shoot me a message using the button below.

Get in touch