Spec27: a platform for engineers to test AI agents.
Safe Intelligence makes Spec27, a platform for engineering teams that build AI agents: each test checks an agent against a written specification and shows where it fails. The product worked, but a first test meant five separate forms, one after another, and the menus were organised by data type. At North we audited the product, and I led the redesign from that audit to the screens in code that Safe Intelligence's engineers shipped.
Two dates, two phases
Safe Intelligence had a conference a few weeks out and a relaunch after it. Phase 1 was an express redesign for the conference: the core flow, the most critical screens and the navigation, in a neutral look with no brand. Phase 2 added the brand and a new way to build specifications.
An internal audit, then design and build together
A full design process didn't fit in the time to the conference. We ran an internal audit as a team to choose what to fix first: the core flow from an empty project to a first test, the screens it depends on, and the navigation.
Design and development then ran almost in parallel, adapting as we went. The release had no brand, but it was much clearer than the product Safe Intelligence had. In its feedback, Safe Intelligence valued that we adapted to what the project needed.
From a wizard to a loop
During the brand work, Safe Intelligence proposed a new way to build a specification, the set of rules an agent is tested against. Instead of sequential steps, a loop: write the rules, run them against the agent, read what fails, rewrite. Their first version worked, but it had many parameters and was hard to use.
I started with low-fi wireframes on top of the system they had built, to order the editor and its actions. A built-in test agent, also proposed by Safe Intelligence, lets people start before connecting their own.
We should be guiding users, not forcing users.Safe Intelligence, design feedback
A style guide in a week and a half
Then the brand. I proposed a first style guide, with colour, type, logo and components, and tested it on the product in a week and a half, so the product had a base that scales. The screen concepts with the new look were built on it.
Where the product changed
Three places in the platform, before and after. The after screens come from the prototype the build followed.
Before. Counts of every resource type and a grid of eval cards, with nothing saying what to do next.
After. What is running now, what needs attention, and the next step for each: run, review or fix.
Before. A first test meant five separate forms, in this order: project, agent, test data, specification and eval.
After. An empty project opens on its onboarding: create a specification, build it in the editor and run it against the built-in test agent.
Before. The final result of a test, with its scores and parameters, sat four levels down: reaching it took four screens.
After. Results are grouped by eval, agent and specification on one page, and the detail opens in drop-downs and side drawers without leaving it.
500+ sign-ups at the conference
The redesign had to be ready for Safe Intelligence's conference. It was: the product was presented there and brought more than 500 sign-ups, and Safe Intelligence renewed with North for a new phase.
What I'd read in the new phase, with real usage.
Screens in code, ready for the conference
At the engineers' request, I delivered the design as HTML prototypes with the styles, built with AI agents, instead of static screens in Figma. Safe Intelligence's engineer integrated them in time for the conference.
The new phase is starting now, and usage metrics will come from it.
Spec27: a platform for engineers to test AI agents.
Safe Intelligence makes Spec27, a platform for engineering teams that build AI agents: each test checks an agent against a written specification and shows where it fails. The product worked, but a first test meant five separate forms, one after another, and the menus were organised by data type. At North we audited the product, and I led the redesign from that audit to the screens in code that Safe Intelligence's engineers shipped.
Two dates, two phases
Safe Intelligence had a conference a few weeks out and a relaunch after it. Phase 1 was an express redesign for the conference: the core flow, the most critical screens and the navigation, in a neutral look with no brand. Phase 2 added the brand and a new way to build specifications.
An internal audit, then design and build together
A full design process didn't fit in the time to the conference. We ran an internal audit as a team to choose what to fix first: the core flow from an empty project to a first test, the screens it depends on, and the navigation.
Design and development then ran almost in parallel, adapting as we went. The release had no brand, but it was much clearer than the product Safe Intelligence had. In its feedback, Safe Intelligence valued that we adapted to what the project needed.
From a wizard to a loop
During the brand work, Safe Intelligence proposed a new way to build a specification, the set of rules an agent is tested against. Instead of sequential steps, a loop: write the rules, run them against the agent, read what fails, rewrite. Their first version worked, but it had many parameters and was hard to use.
I started with low-fi wireframes on top of the system they had built, to order the editor and its actions. A built-in test agent, also proposed by Safe Intelligence, lets people start before connecting their own.
We should be guiding users, not forcing users.Safe Intelligence, design feedback
A style guide in a week and a half
Then the brand. I proposed a first style guide, with colour, type, logo and components, and tested it on the product in a week and a half, so the product had a base that scales. The screen concepts with the new look were built on it.
Where the product changed
Three places in the platform, before and after. The after screens come from the prototype the build followed.
Before. Counts of every resource type and a grid of eval cards, with nothing saying what to do next.
After. What is running now, what needs attention, and the next step for each: run, review or fix.
Before. A first test meant five separate forms, in this order: project, agent, test data, specification and eval.
After. An empty project opens on its onboarding: create a specification, build it in the editor and run it against the built-in test agent.
Before. The final result of a test, with its scores and parameters, sat four levels down: reaching it took four screens.
After. Results are grouped by eval, agent and specification on one page, and the detail opens in drop-downs and side drawers without leaving it.
500+ sign-ups at the conference
The redesign had to be ready for Safe Intelligence's conference. It was: the product was presented there and brought more than 500 sign-ups, and Safe Intelligence renewed with North for a new phase.
What I'd read in the new phase, with real usage.
Screens in code, ready for the conference
At the engineers' request, I delivered the design as HTML prototypes with the styles, built with AI agents, instead of static screens in Figma. Safe Intelligence's engineer integrated them in time for the conference.
The new phase is starting now, and usage metrics will come from it.