Afara, a drug maker's site you scroll into a cell

For biotech and pharma teams whose product is hard to explain. A self-initiated concept: I designed and built a seven-page site where visitors scroll into a living cell, with clear paths for patients, healthcare professionals, investors and partners. Afara is fictional, and nothing on the site describes a real medicine.

Independent concept · Art direction, interaction design and development

The design job: make a process nobody can see, run by a two-nanometre molecule, easy to follow, and give patients, healthcare professionals, investors and partners each a clear way through.

Afara Therapeutics is a drug maker I invented for the project; Afara is Yoruba for bridge. The site has seven pages, from a trial sign-up to a side-effect report, built from protein structures that scientists have published. Nothing on it describes a real medicine.

The live site: the opening, one scroll into the cell, and one click.

A confocal microscope records each dye as its own channel, then merges them. Each board below borrows one imaging mode as its look, and the film at the end is the merge.

The opening holds the science and the promise; the doors further down split the visitors. The concept label sits in the header bar on every page, after a floating badge covered text three times in testing.

I used published structures as the source, then designed their lighting, colour, framing and movement. 5T35 is the first published crystal structure of a PROTAC bound to both of its proteins; next to it the proteasome measures about 45 nm, ubiquitin about 4.

Instead of a diagram, one button runs a full cycle in the 3D, with a counter labelled as an illustration. The copy stays at "designed to", because no real medicine is described.

One cycle tells the science behind that button in 24 seconds, from the problem protein in far red to the proteasome at its true size.

The first pipeline used cards and coloured lines and looked generic. It became an electrophoresis gel, the picture a lab already reads, and its table twin carries the same facts for screen readers. All five programmes are investigational.

An earlier pricing section copied a familiar switch-and-three-cards pattern. It became one timeline in months: each way to partner is an arch, and industry and academic terms sit side by side for the chosen one. Sample terms.

Each step asks for one kind of answer, and the last shows every answer with a Change link before anything is sent. Health answers are used only after a consent tick worded for this one study. It is a concept, so nothing typed on the site is sent or stored.

Healthcare professionals pass a gate that says why it exists. Anyone with a side effect is routed by who they are, and a glossary of 36 terms explains the words, from adverse event to Yellow Card.

The phones play recordings of the live build, not mockups. The 3D stays quick there: in an emulated mobile test with processor throttling and simulated fast 4G, the first 3D frame appeared in 2.4 seconds.

The rule I took from it: Pause may stop motion but must never hold content back. A test now checks it, 30 of 30 on the live build. 3,538 text-line checks across seven pages and multiple screen sizes, none below 4.5 to 1; 68 of 68 automated keyboard and interface checks pass; no WCAG violations detected by axe-core in 30 runs.

Sixty-eight seconds, one visit to the live site: the eyepiece opens on the protein complex, the visit runs through every chapter, and a trial sign-up reaches its confirmation before the iris closes. Rendered from the site itself, at 4K and 60 fps.

Live site: akintadestudio.com/work/afara/live/

Protein structures: RCSB PDB 5T35, 1UBQ, 5GJR (CC0). 5T35 (Gadd et al., Nature Chemical Biology, 2017) shows the published degrader MZ1, used to illustrate the idea.

Cell photographs: ZEISS Microscopy, CC BY 2.0, via Wikimedia Commons; cropped, colour graded, scale bar removed.

iPhone model: motionkitt, CC BY 4.0.

Music: Zanarkand Forest from Mixkit, used under the Mixkit free music licence.

Afara, its people, programmes, studies and prices are fictional, and nothing on the site describes a real medicine. The molecule on screen is MZ1, a published research degrader, not an Afara medicine.