01
One loop, not a suite
Version 2 focuses on a single loop: capture, prioritise, follow up, retain. Everything on screen serves it.
Cut: v1's storefront builder
← All work
Product prototype · sample data, simulated AI
FITFLOW AI
Every lead followed up. Every client kept.
An interactive product prototype for fitness influencers and creators who coach their followers. A Today queue says who to message and why, sequences pause when someone replies, and every AI draft explains its reasoning. The creator always presses send.
- Role
- Problem and users, product definition, UX/UI, design system, motion
- Status
- Live interactive prototype
- Stack
- Figma, Next.js, TypeScript, Tailwind, GSAP
1The problem
Fitness creators lose interested leads and slipping clients in their DMs and spreadsheets.
2My role
Problem and users, product definition, UX and UI, a Figma design system and motion.
3Outcome
A live interactive prototype: nine working screens, a Figma file and a narrated walkthrough. No user research yet.
01
The problem
Fitness creators build an audience long before they build a business. Enquiries arrive as DMs and comments, and follow-ups live in memory.
Interested people rarely say no; they go quiet when nobody checks back in. Clients drift the same way after a tough week.
Who it's for
Fitness influencers and creators, including coaches and trainers with a following, who run their business from Instagram DMs, WhatsApp and spreadsheets. (A design hypothesis: no research yet.)
02
Research
Status, honestly
Design hypotheses only: no interviews or usability tests yet. The problem statements and persona are labelled as hypotheses.
- Target user and problem framed from how creators sell coaching through DMs, WhatsApp and spreadsheets
- Scope decisions written down: what FITFLOW should not do (payments, real data, sending messages)
03 · User flow
One loop: capture, prioritise, follow up, retain
Step 1 / 4
04
Key decisions
02
Today, ranked
The home screen is a queue of who to message and why: replies first, then due steps, overdue leads and slipping clients, each with one action.
03
AI drafts, people decide
Every draft opens with “Why this draft”: the signals it used and the checks it ran. Nothing is ever sent by the product.
04
A system, designed in Figma first
Light and dark themes, one lime accent for primary actions, Geist type, one easing curve. Every colour token in code is mirrored by a variable in the Figma file.
05
How it evolved
From a template to one clear job
Real screens from the project's history, in order.
1 / 5 · v1 landingThe first prototype sold everything at once (storefronts, offers, a CRM) on a dark look that read like an AI-made template.
06
Final interface
Real screens from the live product.
07
UI explorations
From template to product
The first version looked too much like an AI-made template; it was pushed toward a cleaner, Figma-based product design with light and dark themes.
No WebGL
Restrained CSS 3D with spring parallax was chosen over WebGL for the product shots.
08
Technical architecture
A prototype that behaves like the product
In the browser
In the browser · step 1
Seed data
A deterministic sample-data generator with dates relative to today.
- No backend, no accounts, no messages ever sent
- Every route pre-rendered
- Unit tests on the logic and a browser interaction test
09
Try it
fitflow-showcase.vercel.app/appOpen ↗
10
Challenges
Looking like a template
The first pass read as generic; the redesign started in Figma with tokens and a single accent.
Simulated AI, honestly
Drafts come from templates, so every screen and the README say the AI is simulated.
11
What's next
- →Interviews with fitness creators who sell coaching online
- →A real model behind the drafts, with the same explanations
- →Usability testing of the Today queue
A portfolio prototype: fictional creator, sample data, simulated AI; no messages are ever sent. Built with Claude Code under my direction.
Next project
Creators Store →
Keep every rupee.