How I Prototyped an AI Copilot Using Only Coding Agents

Overview

The one where I lead the product design team to rapidly iterate on an AI feature, that reduced time to investment, and an effort that introduced design engineering worflows to a startup

Discovery
& Research

I started by questioning the brief, that solutionised an AI first feature without any user insights. I interviewed existing users and wider pool of wealthy investors, to uncover an existing problem, that can be solved with AI

User ResearchExplorationCompetitive landscape

Phase 02

Setting
Product Design Principles

Next I worked closely with the product manager to agree on a set of experience principles, and wrote the story story of the product. This helped to set the direction for the feature, and the narrative which will be used to get an internal buy-in

RoadmapPositioningMetrics

Phase 03

Interface
Design

After that, I sketched out initial screens and designed key moments of the investment deal co-pilot in Figma. After this, I worked directly in Claude Code (using Conductor & paper) to create a real coded prototype, deployed only for anyone to test

UI DesignPrototypingDesign System

Phase 04

Testing
& Refining

After that, I validated the design decisions and behaviours with a limited testing group on staging server. Lot of my effort was on dialing in the backend LLM model weights, response length, and response to edge cases such as misuse, or escalating issues to customer service.

User testingSynthetic Users

Product story

We are designing a conversation. Not another chatbot. To do this, we will create a copilot that exists as a layer over the invest experience. We want to create a premium, trustworthy design.

Product principles

Calm experience

No mascot, no chat bubbles in candy colours, no typing-dots theatre. The copilot uses the same serif/sans hierarchy, the same card system, the same restrained blue as the rest of the product

Calm experience

No mascot, no chat bubbles in candy colours, no typing-dots theatre. The copilot uses the same serif/sans hierarchy, the same card system, the same restrained blue as the rest of the product

The deal stays in view

Everything rises as a bottom sheet over the deal page. The assistant behaves like a lens you hold over the deal rather than a room you walk into

The deal stays in view

Everything rises as a bottom sheet over the deal page. The assistant behaves like a lens you hold over the deal rather than a room you walk into

One question per screen

We use conversational pacing, and it's what keeps the copilot feeling natural, and like an advisor. The chat window has a clever use of spacing, to allow the responses to space to breathe

One question per screen

We use conversational pacing, and it's what keeps the copilot feeling natural, and like an advisor. The chat window has a clever use of spacing, to allow the responses to space to breathe