Biofidelity - Assay Analysis web tool design

Biofidelity has developed a novel molecular biology technology which makes genomic analysis simpler, faster, and more efficient. Put simply, genomics is the study of an organism’s genome – its genetic material – and how that information is applied.

Genomics is a growing field with applications for healthcare such as infectious disease, oncology, prenatal care, and the development of new medicines and treatments as well as applications in food safety, crop development and biodiversity.

Biofidelity ‘s goal is to enable millions of lives to be transformed globally by providing access to the vital genomic information needed for accurate targeting and monitoring of cancer treatment.  Make it Clear was asked to be the UX/UI design partner for the creation of a web-based tool intended for technicians to use in lab environments analysing lung cancer assays. The lung assay is designed as a tool for use in research laboratories.


The challenge

Within the context of a clinical lab environment composed of multiple areas and stations where technicians would be working and moving as they perform their tests; it was absolutely essential that the web tool within this multi-step process be efficient. It needed to be easy for laboratory staff to use and grasp without a lot of effort or background orientation. Furthermore, it was critical the workflows within the tool were safe and accurate because of a duty of care to be careful with clinical data.

Make it Clear’s objective was to design a tool in line with UX/UI best practices and that would seamlessly fit into a user’s lab-based workflow. The success metrics for this project included reducing the level of support requests received and being able to iterate the tool for future target markets around the world.


Our approach

Building on Biofidelity’s brief in addition to initial user profiling and a supplied schematic, we first consulted stakeholders to formulate a clear understanding of the target users – their expectations, needs and pain points. This helped create two proto-personas that would underpin the design process of the tool (find out more about our methodology in our guide ‘The fundamentals of personas’).

We workshopped the tool’s functionality requirements with Biofidelity and Green Custard, the development partner for the project. This informed the creation and prioritisation of user stories, which are informal, general explanations of features written from the perspective of the proto-personas.

Armed with the above, our UX/UI designers created the information architecture for the tool, reflecting the platform’s overarching structure and defining the various layers of navigation, allowing for users to easily travel through the platform.


Mid-fidelity wireframes were then created for key screens that reflect the journey steps users would need to take to access, input information, and receive a test result. These considered all the learnings gained during the user stories and persona creation working during the discovery phase of the project. The wireframes underwent various stages of iteration with the client through design workshops to ensure all business uses were captured.

To validate and gain direct user feedback on the wireframes, we tested them with six users who represented the target personas. Interviews lasted one hour, and interviewees were tasked to undertake several actions while interacting with an interactive prototype. Findings were then presented back to the client in the form of a report with recommendations then built into the wireframes.

Two UI concepts were then created for Biofidelity to choose from which reflected the brand’s core DNA and personality. Several UI iterations were developed incorporating feedback from key stakeholders. Finally, a style guide was created housing key design principles and elements such as colour, typography, buttons, form fields etc, with a final handover to Biofidelity’s development partner, Green Custard.