AbdouYaackoubi

Case study

InstaDeep

Three product surfaces and the design system they all run on.

Senior product designer at InstaDeep, an AI research company acquired by BioNTech. I work across DeepPCB, their cloud-native PCB routing software, InstaNovo, their protein-sequencing model, and the design system behind both. More than ten demo applications for prospective clients, partners and BioNTech have been built on that system, and engineering has implemented its core components in code.

  • Product design
  • Design systems
  • AI products
  • Web app
10+Demo apps for clients, partners and BioNTech
3Product surfaces running on one system
In codeCore components implemented by engineering

DeepPCB

3 screens

DeepPCB is InstaDeep’s cloud-native PCB routing software: a reinforcement-learning router that takes a board layout and returns a routed one. My work covers the product’s public surfaces: what the tool claims, who it claims it for, and how someone evaluating it gets from the pitch to a signed-up account.

These are the marketing and onboarding surfaces rather than the routing canvas itself.

Home: the claim, stated once, above a routed board.
Enterprise: the same router, argued to a buyer instead of an engineer.
Consumption pricing made legible: what a free day actually includes, what one credit buys, and the board size at which you stop self-serving and talk to sales.

DeepPCB dashboard

2 screens

DeepPCB sells routing by the hour, so the two screens that carry the product are the one that says whether an hour is still running and the one that spends it.

The board list puts each job’s state on its own card (pending, idle, running), with the remaining balance in the sidebar, so the question a returning user actually arrives with is answered before anything is opened. Inside, the board is the page: layers, planes and components on one side, anomalies and the assistant on the other, and the cost of the next run stated on the button that starts it rather than discovered afterwards.

Status lives on the card (pending, idle, running), and the credit balance sits above the nav, so “is my board done, and can I afford the next one” is answered without opening anything.

The board is the page. Anomalies and the assistant left, the layer and component tree right, and the run priced at 45 minutes on the button before it is started.

InstaNovo

3 screens

InstaNovo and InstaNovo+ are de novo peptide sequencing models: they read a mass spectrum and return a peptide sequence without matching it against a reference database, which is the whole point: a database search can only find what is already in the database. Built with the Department of Biotechnology and Biomedicine at the Technical University of Denmark, and published in Nature Machine Intelligence.

My work was the public face of it: the logo, and a landing page that has to hold two readers at once. A proteomics researcher wants the benchmark before they want anything else: 52% average peptide accuracy across eight biological datasets, 34% more novel peptides, 42% more peptide spectrum matches. Someone deciding whether to fund or adopt it wants to know what that unlocks. So the numbers sit in a band immediately under the hero rather than being saved for a technical page, and the two models get one section each: InstaNovo transcribing, InstaNovo+ refining by diffusion, because the relationship between them is the thing people get wrong.

The set also includes the states, in the same visual language rather than a default: the 404 is built from real sequence output, and the pre-launch holding page had to look like the product it was holding.

The landing page. Benchmarks in a band under the hero, not buried. A researcher reads the number before the pitch.
The hero animation. A mass spectrum on the left resolves into predicted sequences on the right: the model’s actual job, stated once, in motion. Muted, and it does not start until you ask.
The pre-launch holding page. Brand only, and it still had to look like the product it was holding.

Design system

9 screens

Every InstaDeep product surface and research demo is built from one system. It exists because the alternative was each team inventing its own buttons, and it had to survive being used by engineers with no designer in the room.

More than ten demo applications have been built on it since, for prospective clients, for partners and for BioNTech. Engineering has implemented its core components in code, so a new demo starts from assembled parts instead of a blank file. That is where the time goes back: the system pays for itself every time the next one is needed.

Browse the components below.

Off the grid, and page not found

2 screens

The states are the part of a product nobody screenshots and everybody hits. Both products can fail in ways a marketing page never shows: a routing job that will not converge, a spectrum with no confident call, a link that has gone stale, so the error pages carry each product’s own grid or sequence motif, say what happened in that product’s vocabulary, and offer exactly one way back. Two products, one discipline.

DeepPCB: one message, one route out. “Off the grid” and “reconnect” are the router’s own vocabulary, not generic error copy.
InstaNovo: the field on the right is real sequence output, so even the error page is made of what the product does.