Chris Kirkman
My process — beginning to finish

From a business problem to shipped, working product.

Eight phases I've run for two decades — research to release. What makes it different: I don't hand a spec over a wall. I write the production code, and I design with AI — so the work explores wider, ships faster, and survives contact with engineering.

I ship real HTML & CSS I design with AI
I stay in the file

Design that compiles.

Twenty years in, I still write production HTML5 & CSS3, build prototypes in real code, and pair with engineers. The handoff isn't a wall — it's a conversation, and half the time I'm on both sides of it. Designs that account for the medium ship faster and break less.

I design with AI

Compressed, not cheapened.

AI didn't replace my process — it collapsed the slow parts. Research synthesis, ten exploration directions, code scaffolding — done in the time one used to take. I bring the human judgment to the decisions that matter, and the craft bar keeps going up while the timeline comes down.

The arc

Eight phases, one straight line.

00Discovery & Alignment
01Research & Requirements
02Information Architecture
03Wireframing & UX
04Visual Design & Systems
05Prototyping
06Front-end & Handoff
07Test, Ship & Measure
Method & tools AI-accelerated Hands-on code
00
Phase 00 · Set the target

Discovery & Alignment

Before a single pixel: what's the business actually trying to move, and how will we know we did? I run stakeholder workshops, pin down success metrics and constraints, and write the brief everyone signs off on. Alignment here is the cheapest it will ever be.

Deliverables
Problem statement · Success metrics · Scope & constraints · Project brief
Stakeholder workshops Jobs-to-be-done FigJam / Miro
01
Phase 01 · Learn the truth

Research & Requirements

User interviews, competitive audits, analytics, support tickets — the evidence. This is where AI earns its keep: I cluster interview transcripts and feedback into themes in an afternoon instead of a fortnight, then bring human judgment to what the patterns actually mean.

Deliverables
Research insights · Personas · Requirements · Opportunity map
User interviews Heuristic audit AI synthesis Agentic research
02
Phase 02 · Build the skeleton

Information Architecture

Structure before surface. I inventory the content, map the flows, and model the navigation so the product makes sense before it looks like anything. Get the bones right and every later phase moves faster — get them wrong and no amount of visual polish saves it.

Deliverables
Sitemaps · User flows · Content model · Navigation system
Sitemaps User flows Card sorting
03
Phase 03 · Shape the experience

Wireframing & UX

Low-fidelity layouts that pressure-test interaction patterns and edge cases before the visuals can hide them. I use AI to spin up ten structural variations and stress flows quickly — then it's human taste that picks the one with the strongest experience strategy underneath.

Deliverables
Wireframes · Flow prototypes · Interaction notes · Edge-case map
Figma Lo-fi prototyping AI variations Generative UI
04
Phase 04 · Make it desirable

Visual Design & Design Systems

Now the look and feel — type, color, motion, hierarchy — layered onto a structure that already works. I don't design screens, I build the system: tokens and components the whole team ships on, accessible to WCAG AA, consistent across every surface.

Deliverables
Hi-fi UI · Design system · Tokens · Component specs
Figma Design tokens WCAG AA AI system automation
05
Phase 05 · Make it real

Prototyping

Static comps lie about feel. I build clickable prototypes — frequently in real code, not just Figma — so timing, motion, and responsiveness get tested for true. AI scaffolds the boilerplate; I shape the interaction. Stakeholders touch the thing, not a slideshow of it.

Deliverables
Interactive prototype · Motion specs · Validated interactions
HTML / CSS React Figma / Framer AI scaffolding
06
Phase 06 · Ship the pixels

Front-end Development & Handoff

This is the part most design leaders skip — I don't. I write production HTML5 & CSS3, deliver responsive, standards-based front-end, and pair with engineers through implementation. Because I speak their language, the design that ships is the design that was approved.

Deliverables
Responsive front-end · Component code · Handoff docs · Eng pairing
HTML5 / CSS3 Responsive Git Storybook
07
Phase 07 · Prove it worked

Test, Ship & Measure

Usability testing, QA, launch — then back to the metrics we set in phase 00. Did it move the number? The loop doesn't end at ship; it feeds the next iteration. A process that can't measure its own outcome is just decoration.

Deliverables
Usability results · Live launch · Analytics dashboards · Iteration backlog
Usability testing A/B tests Analytics AI insight loops
What stays constant

Tools change. These don't.

Needs ↔ goals

Every decision connects a real user need to a real business goal. If it serves neither, it doesn't ship.

Lead from the front

I run the team and stay in the work. The point of a team isn't to stop making — it's to multiply what gets made.

Leave it better

Eagle Scout rule, applied to products: hand it off in better shape than you found it — code, system, and team included.