01 –
Understanding the problem
ClassKid is a business platform for dance, music and activity studios. I design and research billing and invoicing, one of the most complex parts of the product: recurring tuition, proration, discounts, refunds and reconciliation. The design work had to keep pace with a fast engineering team, and every decision needed evidence from studio owners, competitors and real billing data.
CONSTRAINTS
Billing has dozens of edge cases, from partial payments and credits to refunds and voids, and every one needs a designed state, not just the happy path.
Studio and customer data is private, so research had to stay anonymized and every design had to use realistic sample data.
PROJECT TIMELINE
Ongoing since mid-2026, across more than a dozen billing and invoicing projects, from discovery to release.
TOOLS
Claude as a design partner at every step, from research to Figma to tickets.
- Claude Code with Figma builds on-brand screens, layout variants and every-state dialog sets directly in Figma, using the product’s real look and components.
- Claude Code with the product code, through a custom skill for building working prototypes against the real ClassKid front end.
- Claude for interview synthesis, competitor teardowns and analysis of anonymized billing exports.
- Claude in Chrome keeps Confluence charters, Jira epics and stories, and research surveys in step with the designs.
- Claude Docs and artifacts for research write-ups, roadmaps and presentation boards.
- Alongside Figma, FigJam, Confluence, Jira, Granola for interview notes and OpinionX for surveys.
02 –
Taking The Right Approach
Turned interviews into a decision. I synthesized five studio-admin interviews and a follow-up with a multi-studio finance controller into a research deck that reframed the problem: reconciliation trouble was really a timing problem, not either of the two problems we had set out to validate.
Opening board of the reconciliation research deck
Five charge reports on one shared sample dataset: four in competitor styles, one for ClassKid
Compared competitors side by side. With Claude, I rebuilt the charge reports of four leading competitors in Figma on one shared sample dataset, so layout choices could be compared directly with a ClassKid version.
The ClassKid version added what the others lacked: a payment status on every charge and paid versus outstanding totals.
Anonymized billing exports from real studios were analyzed with Claude to find patterns, such as studios that bill on the 15th instead of the 1st, which shaped how billing periods are shown.
Explored layouts at a breadth that was never practical by hand: five receipt types, from a standard invoice to a double refund, in four layout styles. Twenty frames, built in a single working session.
Once the team picked a direction, Claude carried each refinement across all the samples, so the variants never drifted apart.
Receipt detail explorations: five receipt types in four layout styles
The Send invoice dialog, designed for all seven invoice states
Designed every state, not just the happy path.
One Send invoice dialog per invoice state, from Draft to Void, grouped by whether the studio still has money to collect.
A bulk version sorts a mixed selection into send, remind and skip, and tells the admin exactly how many emails will go out.
Dialogs, labels and status names went in front of studio admins as talking pieces before anything was specified.
Closed the gap between design and engineering. Claude turned each chosen design into a project charter and a Jira epic with front-end and back-end stories and brief acceptance criteria, and linked every charter back to its Figma file so nothing was built from a stale screen.
Checkout line item discounts, designed and ticketed for front-end and back-end work
03 –
Final Results
Every project now starts with the options and every state on the table: 20 receipt layouts, a Send invoice dialog for all seven invoice states, and five competitor reports compared on the same sample data.
Research turned into a priority list the team works from: a ranked survey of 23 studio pain points, and a 1 to 10 rating question for customer interviews.
All 17 billing and invoicing project charters were audited and linked to their designs, and new features such as checkout line item discounts went straight from Figma to front-end and back-end stories.
Checkout line item discount
Reconciliation research deck