Artifact ยท Planning

Prototype Test

prototype testusability testprototype testingtask based usability testux researchclick test

Prototype Test is a usability test tool for product and design teams. Pick a prototype from your board, write a few tasks, and everyone on the board tries them in the live prototype.

Use Prototype Test together on your board.

Record the path you expect for each task. Each task ends by itself when the tester reaches the goal, so nobody has to say they are done. Results stay hidden until the person who started the test ends it.

Then see who got there directly or another way, where people gave up, how long it took, how easy it felt, the paths people took and where they tapped, including taps that hit nothing.

  • The prototype from your board. Test the prototype you already have on the board. Nothing to export or upload, and older prototypes work too.
  • Expected path. Record the path once, and results split into people who went straight there and people who got there another way.
  • Tasks end by themselves. Reaching the goal screen or the goal tap finishes the task, so the time and path are exact.
  • Taps on each screen. See where people tapped on every screen, with taps that hit nothing shown in a different colour, and a count for each spot.
  • Where people gave up. For every task, see the screen people were on when they said they were stuck.
  • Download the results. Save every task's success, paths, misclicks and ease as a Markdown file to share in a report or a ticket.

How to use Prototype Test.

1

Pick the prototype

Choose a prototype on your board. The test reads its screens, so you can set goals and read results by screen name.

2

Write the tasks

Add up to 5 tasks, written the way a person would think of them, like You need new running shoes. Add a pair to your cart.

3

Record the expected path

Click through the prototype the way you expect people to. The screens you pass become the expected path and your last tap becomes the goal. Or just choose the screen that ends the task.

4

Try it yourself first

Take the test the way testers will see it. Nothing is recorded, so you can check the tasks read well and end where you expect.

5

Start the test

Press Start test. Everyone else on the board sees a short intro, then each task with the live prototype beside it or below it.

6

People try each task

Testers use the prototype as they would the real thing. A task ends when they reach the goal, or when they say they are stuck. After each task they can rate how easy it was.

7

End the test and read the results

Press End test and show results. See each task's success, misclicks, time and ease, then open a task for its paths and the taps on each screen.

Who uses Prototype Test.

A designer checking a new flow

Before the design goes to build, see whether people can finish checkout or sign up without help, and where they hesitate.

A product team settling a debate

Replace opinions about a flow with paths and tap maps from people who actually tried it.

A UX workshop or class

Run a live usability test together and walk through the paths and the taps that hit nothing.

A remote team testing during a call

Everyone takes the test on their own screen, then the results open for the whole team at once.

Add Prototype Test to your board.

Use on a board opens a new board with Prototype Test already on it. To add it to a board you already have, follow these steps. Each copy keeps its own data, so a vote on one board never changes another.

1

Open your board

Open the MockFlow board you want to use it on.

2

Add it from the Artifact Library

Click Add anything (the plus button) in the toolbar at the bottom of the board, switch to Artifacts and pick Prototype Test under Planning. Adding it does not use AI credits.

3

Use it together

Click Interact with Component (the hand button), or switch the board to Play mode. Everyone on the board uses the same app, and Reset shared data clears it for the next session.

Questions about Prototype Test.

What is a prototype test?
A prototype test asks people to do real tasks in a clickable prototype, and records whether they managed, how long it took and the way they went. It shows where a flow is hard before it is built.
Which prototypes can I test?
Prototypes made in MockFlow on your board. Each one opens live inside the test, so people tap through it as they would the real app.
Do I have to record a path?
No. Without a path, a task ends when the tester reaches the goal screen. Recording a path adds the split between direct and another way, and lets a tap end the task.
Who can take the test?
Everyone who can edit the board. People who can only view see the test running, and see the results once it ends.
Can people see each other's results?
Not until the person who started the test ends it. Then the results open for everyone on the board.
Does it use AI?
No. The results come straight from what people did in the prototype.
How do I add it to a board?
Press the plus button in the bottom toolbar, choose Add anything, then Artifacts, and pick Prototype Test. Adding it uses no AI credits. You can also press Use on a board on this page to open a new board with it already on.
Get started

Use Prototype Test with your team.

Included on Plus and MaxChange it with AI on Max
New to MockFlow

Sign up free, open a board and see what your team can use together.

MCPBrainstorm with MockFlow MCP

Add MockFlow as an MCP connector in Claude, Cursor, or any MCP-compatible AI assistant to generate flowcharts, mindmaps, architecture diagrams, and 16 types of visualizations.

Desktop App MCP Powerful
CLI Web MCP Developer
Loginless Web MCP Easiest

Built into the MockFlow Desktop App. AI creates visuals directly on your open canvas — no URLs, no waiting.

1
Open Desktop App → open a MockFlow project
2
In Claude Code / Cursor, run:
claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp
3
Ask: "Create a flowchart for..."

Best for: Designers, product teams, daily MockFlow users.

Download Desktop App →

Install from npm, log in via browser (OAuth), and boards are saved to your MockFlow account.

1
npm install -g @mockflow/ideaboard-mcp
2
mockflow-ideaboard-mcp login
3
mockflow-ideaboard-mcp

Best for: Developers using Claude Code, Cursor, or VS Code Copilot.

npm Package →

Add MockFlow as a connector in Claude.ai or ChatGPT. No installation, no account required. A new board is created and you get a shareable URL.

1
Open Claude.ai → Settings → Connectors
2
Paste this URL: https://app.mockflow.com/ideaboard/mcp
3
Ask Claude to create a flowchart — done!

Best for: Managers, marketers, anyone using Claude.ai or ChatGPT in the browser.

Welcome back

Don't have an account? Sign up

Faster ways in

Sign in with an account you already use.