Keep testing
simple.
checkout-v3.html
& product, solo
2026
Four things happen. That's the whole tool.
Freeform discovery, or scripted validation.
The tester link is the same shape either way. What changes is how much structure you ask the tester to follow, and how much quantitative data you get back.
Exploration
MODE · EXPLORATIONDrop testers in with an optional prompt. Good for early concepts, directional feedback, vibe checks: when you want to see what they notice before you tell them what to do.
Guided tasks
MODE · GUIDEDUp to 10 ordered steps. Each task tracks completion, time-to-done, and "I'm stuck" signals. Good for validating specific flows: checkout, onboarding, a new settings page.
How guided mode actually feels. Both sides, step by step.
Two independent walkthroughs running in parallel. On the left, the maker's side: configure the test, share the link, get the report. On the right, the tester's side: welcome, tasks, post-session questions. Click through each at your own pace.
What testers see. Intake → prototype → post.
Three screens, in order. Intake is four fixed-choice questions: no free-text, no PII. The prototype is your file. Post-session is where the qualitative gold gets captured: what they tried, whether they succeeded, what confused them, how easy it felt.
Before we start.
All fixed-choice. No name, email, or IP collected.
Your file, inside the wrapper.
The prototype renders full-frame. A persistent task panel sits along the bottom in guided mode. In exploration mode, just an end-session button.
A few quick questions.
Their own words. This is where you find out why the click heatmap looks the way it does.
Not a dashboard. The data, simplified. You decide.
The report answers two questions, in order: what happened? · in their own words, why? No recommendations: the tool counts and surfaces patterns, you decide what to do. The success bar and session table are live; click through and try it.
Note: numbers, quotes, and session IDs below are sample data for illustration. The tool itself is live, but this report isn't a real test.
What they tried to do
What confused them
| Session | Age | Device | Tech | Success | Ease | Time | |
|---|---|---|---|---|---|---|---|
| ▸ | 4f2a-b9c1-5e77… | 25–34 | Desktop | Power user | Yes | 4 | 3m 14s |
|
Intent
"I wanted the cheapest option that still let me invite a teammate. Pro seemed right but I second-guessed it."
Confusion
(no answer)
Task timings
T1 · done · 9s
T2 · done · 31s
T3 · done · 14s
|
|||||||
| ▸ | a1c5-02de-8814… | 45–54 | Laptop | Get by | Partial | 2 | 5m 02s |
|
Intent
"Trying to find the seat count for the Team plan, couldn't tell if 'team' meant 3 people or 30."
Confusion
"The 'Team' plan has team pricing but no mention of seats. I didn't know how many people I could invite."
Task timings
T1 · done · 14s
T2 · stuck · 2m 18s
T3 · done · 22s
|
|||||||
| ▸ | e73b-9102-22aa… | 18–24 | Phone | Comfortable | Yes | 4 | 2m 41s |
|
Intent
"Tried to apply my student email but couldn't find where to paste it."
Confusion
"The discount field is buried under 'More options'. I almost gave up."
Task timings
T1 · done · 8s
T2 · done · 1m 12s
T3 · done · 11s
|
|||||||
| ▸ | c84f-551a-99ef… | 35–44 | Desktop | I build software | No | 2 | 4m 38s |
|
Intent
"Wanted to apply the student discount. Gave up after two minutes."
Confusion
"Discount input wasn't where I'd expect. I looked in the cart, the plan page, the profile. Never found it."
Task timings
T1 · done · 10s
T2 · abandoned · 2m 04s
T3 · not reached
|
|||||||
| ▸ | 9b0d-dd71-4012… | 55+ | Laptop | Get by | Partial | 3 | 6m 12s |
|
Intent
"Comparing the plans carefully. I don't buy things I don't understand."
Confusion
"Saved payment showed but said 'expired'. I couldn't tell if it'd actually charge."
Task timings
T1 · done · 22s
T2 · stuck · 3m 44s
T3 · done · 48s
|
|||||||
Why it works this way. And what I'm living with.
Every tool is the product of a handful of early decisions. These are the ones that shaped The Playground, including the ones I'd reconsider with more time.
HTML only, no Figma integration.
D01Figma's mirror protocol doesn't cooperate with iframes, and owning a Figma integration means owning its breakages. HTML prototypes (whether exported from Figma, hand-coded, or generated by AI tools) render cleanly inside the wrapper.
Built on Clarity + Netlify, not a custom stack.
D02Microsoft Clarity already records sessions, generates heatmaps, and surfaces rage-click events, and it's free. Netlify Forms handles submissions without a backend. Rolling my own would have meant weeks of infrastructure work for worse results.
Two modes, not one.
D03I started with exploration mode only. It was simpler and fit the "unmoderated testing" framing. But for validating specific flows I kept wanting to measure completion rates. Adding guided tasks took a weekend and doubled the tool's usefulness for flow-specific work.
Dropped the role question from intake.
D04The original intake asked for role as free text. I removed it because (a) free text invited PII, testers were typing company names and real people's names, and (b) for unmoderated testing, role didn't change how I interpreted sessions nearly as much as tech comfort and device did.
No auth on share links.
D05Anyone with the tester URL can participate. I shipped without auth because the tool is used with existing recruitment channels, I'm not posting links in public Slacks, and building a password layer would have delayed the first real test by a week.
One deploy pipeline, not per-prototype.
D06Every prototype lives under the same Netlify site, served via /t?proto=<slug>. New prototypes get committed to a folder and deployed incrementally: no per-prototype site, no per-prototype DNS.
Known gaps. Roughly in priority order.
Every tool has a backlog of things the creator can see clearly but hasn't built yet. These are mine.
Thanks for reading.
That's the whole thing.
If you build, ship, or hire for design-engineering-product crossover roles and something here caught your eye, I'd love to hear what.