UI/UX Design Web Development

UI/UX Design & Development for Biobanking App

A prominent university's medical department was in the early stages of developing a Biobanking application to be used by medical researchers and doctors. The application would allow, for the first time, users to connect datasets from multiple systems and formats, and ultimately do analysis on that data from the browser. E84 and I were brought on to help provide a more user-friendly experience and ultimately implement an MVP version of the app.

Uncharted territory

The biggest challenge of this project was that it was attempting to solve multiple, very complex problems, most of all the connecting of disparate data from various systems with their own formats.

Our team noticed early on the potential issues with an overly-complex application that was trying to do too much, and we convinced stakeholders to scale back the features in order to focus on the core of the application:

  1. Connecting disparate data
  2. Analyzing the connected data


  3. Making sense of the user flow

How to connect different formats

The biggest achievement this application makes is that it gives the user full control over the formatting of their patient IDs, which are ultimately used to link the datasets.

For example, if you have two datasets that format their patient ID differently, the system has no way of knowing patient Jan01 is the same as 01-Jan, but through a series of UI interactions we are able to correctly link this example.

Organizing large datasets

Once we’re able to successfully connect the disparate datasets we now need a way to analyze that data. Based on input from potential users, this would be done in a data table format. The layout and implementation of the data table would undergo many different variations and testing before we ultimately landed at what we have now.

The data table columns are controlled by a collapsible left-hand bar organized and color-coded by source. This color-coding carries over into the table itself, providing users the ability to quickly discern which source a given column belongs to.

Advanced Searching

One new feature we’ve been working on is an Advanced Search capability, that will allow users to broadly or narrowly filter down the data table in ways the inline column filtering doesn’t easily allow.

Portfolio Home

Have some more questions?

Shoot me an email My Resume