Mateus • Design
Amsterdam —

Developer console

Seven working days. Most of the speed came before I opened Figma.

Role
Product design, conceptual modelling, prototyping
Year
2025

Yoco, the South African payments company, needed a Developer Console where external developers could create integrations, generate API credentials and control access. In credential management, the interface has to make the system itself clear.

I defined that structure first in a conceptual model, instead of discovering it through rounds of mockups. Claude made it cheap to prototype and revise. Seven working days later, I delivered the Figma design, working prototype, build instructions and a corrected model — work I would previously have quoted at four weeks.

The console’s application list: Sandbox and Live sections, each a table of applications with type, status, API key state, granted scope count and creation date.
The New application sheet sliding over the list: a name field, Sandbox or Live environment, Personal or OAuth type with OAuth marked coming soon, and an empty permissions section.
An application’s detail sheet: its ID and status, one Active API key with a Regenerate action, and the three access permissions it was granted.
The one-time key dialog: a red warning that this is the only time the key will be shown, the key itself with a Copy button, and a checkbox confirming it has been saved.

Design what to design

Credential management punishes a wrong mental model. Misunderstand how a key is replaced and you can break your own integration.

So I started with Johnson & Henderson’s conceptual model framework: the objects developers believe exist, what they can do, how they relate, and the language around them. Applications, keys, permissions, environments — the structure before the screens.

The model’s entry for API Key: what users think it is, the attributes visible to them, the actions they can perform, the system attributes hidden from them, and the rule that keys never expire on their own. The central metaphor and a mental model hierarchy: the console branching into applications, environments and credentials, with OAuth apps and client secrets marked as future work. The API key state diagram: NoKeys generates to Active, which rotates either to Expiring then Expired, or straight to Expired — with a note that every rotation simultaneously creates a new Active key. The metaphor table mapping each system concept to a metaphor and the words users actually say, followed by the vocabulary list of terms to use.
Before a single screen: what the developer thinks is in there.

That moved the back-and-forth out of mockups and into words, where changing your mind costs a sentence. The model designed what to design; the prototype tested it.

One prompt, 70% there

The first test was deliberately blunt. I gave Claude the conceptual model and asked for two screens: the applications list and an application detail. Nothing else. I wanted to see how much the document could carry on its own.

About 70% came back as I wanted it. The rest was detail.

That says more about the framework than the tool. The model already described the objects, attributes, actions, relationships and states the interface needed. There was little left to infer.

7 days

brief to delivered design

4 weeks

what I’d previously have quoted

Four weeks was my estimate, not a measured baseline. What changed was where the back-and-forth happened.

Cheap changes, tight loop

The prototype changed about twenty-five times, mostly through small edits I could review one by one. Many came from engineers commenting directly in Notion while the work was still moving.

That was part of the speed. When feedback could become a change the same day, it stayed cheap to listen. The prototype wasn’t something to defend; it was something to keep correcting.

Cards to table

The first prototype used cards for the application list. Reasonable default, wrong audience.

Developers weren’t browsing; they were scanning for one integration and one fact. So I changed it to a table. It took under a minute. That’s the useful bit about AI prototypes.

The point isn’t that tables are better. It’s that when changing direction costs almost nothing, sunk cost stops making the decision for you.

The first build: Sandbox and Live applications listed as cards, one per integration, each showing environment and type badges, status, created date, scope count and key count. The table version of the same list: the same applications as compact rows, with Active and Expiring key states shown as icon-led labels in the API Keys column.
Prototype — cards ask you to look at each one.

Testing the model

Claude built an error for the one-key rule: if a key already existed, it explained why you couldn’t create another. But the model already ruled out a second key — narrating the rule was the wrong fix. We removed the action instead.

An application’s detail card with an amber banner: Only one active key allowed, explaining that a new key means regenerating the existing one, next to the Active key it already has. The same detail card with the banner gone: an Active API key with a Regenerate action beside it, and no Generate button anywhere on the screen.
Prototype — a rule explained after you’ve tried to break it.

Then an engineer reviewing the prototype in Notion caught something worse: a complete “all keys expired” state that couldn’t happen.

An application’s detail card with a warning banner: All your API keys have expired, above two keys both marked Expired, and a Generate new API key button.
Prototype — well made, well styled, and impossible.

Claude had built a coherent interface around a false assumption, then defended it using its own prototype as evidence. We corrected the model and mapped which states were actually reachable. The prototype wasn’t just implementing the model; it was testing it.

Design moved upstream

Production got cheap. Deciding what to produce didn’t.

A dark theme is the clearest example. Once the decisions were made, a second version of every screen cost about as much as asking for it.

The New application sheet over the applications list in light mode: a name field, Sandbox or Live environment, Personal or OAuth type with OAuth marked coming soon, and an empty permissions section. The same New application sheet and applications list in dark mode, with the status and key-state colours lifted to read on the dark surface.
Light — the theme the decisions were made in.

Claude could turn decisions into screens, list states and translate the prototype into specs. But scope, priority and constraints still came from me and the engineers.

Instead of spending most of the time designing screens, I could spend it designing what to design. Johnson & Henderson’s title suddenly felt very literal: Conceptual Models — Core to the Design of Interactive Applications.

Once the model was clear, the screens were the easy part.

Eight months in

The console launched in December 2025; these numbers are from August 2026. We still haven’t promoted it — no campaign, no push. Everyone who arrived came looking for it.

81%

reach a working credential

43%

of those go on to a first call

Many aren’t developers by trade. They’re merchants building their own tools — a stock system, a kitchen display, something that only has to work in one shop. They come with a business problem, not an API. The model described what a developer has; it didn’t describe what a merchant is trying to build.

What it became

The method worked well enough that I later turned it into Conceptual Kit with Filipe Baeta, a long-time friend and tech virtuoso at Lab Secreto.

The Conceptual Kit repository on GitHub, under the Lab-Secreto organisation: a .claude folder of slash commands, the conceptual_kit package, templates and examples, a commands reference and a quick start, with Filipe Baeta listed as a contributor.
The framework, as something you can install.

The framework still frames the thinking, but AI makes the model much faster to create, review and update — and turns those concepts into working prototypes just as quickly.

If you want to try the method, you can use my Claude skill.

Next project