Doorslam

Conversational design for a GCSE revision platform, with an AI tutor that helps parents and teenagers plan revision together.

Role: Lead product designer
Scope: Design system, UX, AI tutor
Stack: React, TypeScript, Supabase
Year: [YEAR]

Doorslam cover: Conversational design for a revision focused AI tutor, beside the mobile dashboard — (Doorslam — revision, without the door slam)

(01 — The brief)

A working prototype that needed to become a product.

The client had built a functional prototype with Claude Code but needed help to make it scalable and ready for launch, including a subject-specific AI tutor grounded in course content (retrieval-augmented, so it only answers from the syllabus).

Problem and solution panels: the original prototype dashboard beside the redesigned subjects screen — (Before and after — from prototype to product)

(02 — Approach)

An AI-ready design system

Electric Indigo and Lime Burst on DM Sans, built on shadcn/ui with a token layer and a DESIGN.md the AI coding tools read before writing UI.

Refined UX for two audiences

Parents get a weekly story and next best action; students get subjects, timetable, rewards and focus mode.

A two-fold AI tutor

One assistant helps parents check progress and adjust the plan, another helps students when they’re stuck, both grounded in the syllabus.

Code Connect from day one

Figma components map to the React codebase, so design and build stay in step as the product grows.

Designing the conversation, not just the chat box.

(AI tutor)

Conversational layer mapping: intents such as conceptual question, stuck on question, hint request and checking work — (Conversational layer mapping)

Example conversation flow: a parent asks how their child is getting on with Biology — (Parent assistant — progress enquiry)

Three AI tutor screens showing a progress conversation and scheduling a new revision session — (AI tutor UI — from question to booked session)

A system the codebase can read.

(Design system)

(Code Connect and DESIGN.md)

Updated dashboard on desktop and mobile — (Updated UI — desktop and mobile)

React component architecture showing where new code lives — (React architecture — where new code lives)

(03 — Outcome)

[OUTCOME — launch status and what changed for families.]

[00]

[METRIC — e.g. sessions planned]

[00]

[METRIC — e.g. tutor conversations]

[00]

[METRIC — e.g. weeks to launch]

(Next project)IRONFORM Customs