03 / FULL DESIGN + BUILD

Biovana

Two platforms · Biotech · African biobank data
ClientBiovana
Deliverables2 platforms
ToolsFigma · HTML / CSS / JS · Netlify

BBIMS — Pages built

Biobank Information Management System
Dashboard
Dashboard
Consent Management
Consent Management
Sample Collection
Sample Collection
Sample Storage
Sample Storage
Platform 01

BioVanaInDex View demo ↗ View prototype ↗

A biobank discovery platform giving researchers secure access to certified African biobank data. Researchers can search and filter cohorts by disease, sample type and ethnolinguistic group, view cohort composition through data visualisations, and submit access requests directly through the platform.

BioVanaInDex cohort search
Cohort detail view
Cohort detail
Platform 02

BBIMS View demo ↗ View prototype ↗

An internal management system for biobank staff to manage their collections end to end. Covers sample accessioning, collection, processing, storage, retrieval, distribution and disposal — each as a dedicated module. The dashboard gives an overview of inventory, consent status, collection trends and quality metrics.

BBIMS Dashboard
Consent Management
Consent Management
Sample Collection
Sample Collection
The client

Biovana is a biotech company building infrastructure for African biobank data. Their work sits at the intersection of genomics, research, and data governance, connecting researchers who need biological samples and datasets with the biobanks across Africa that hold them.

The brief

I was brought on to design and build two separate platforms that work together as part of Biovana's ecosystem. No detailed specification was provided. I was handed the problem and trusted to figure out what needed to be built and how.

BioVanaInDex is the public-facing discovery layer, where researchers find and request access to certified datasets. BBIMS is the internal operational layer, where biobank staff manage their collections, track consent, and handle the full sample lifecycle from collection through to distribution and disposal.

What this shows

Biovana is an example of being handed a problem rather than a brief. There was no detailed specification and two very different audiences to design for simultaneously — researchers browsing publicly and biobank staff working operationally. I had to figure out what each platform needed to do and build it from scratch.

Scientific and data-heavy products have their own design logic: density without clutter, hierarchy without decoration, credibility without coldness. Both platforms were designed in Figma and built in HTML, CSS and JavaScript, deployed on Netlify.

2
Platforms delivered
8+
BBIMS modules built
1
Designer + developer
design: Figma
build: HTML / CSS / JS
deploy: Netlify
BioVanaInDex: Discovery platform
BBIMS: Management system