Website Prototypes Explained: Test an Idea Before Building the Service
Can you try a website idea before developing the whole thing? A prototype models enough of the experience to explore a question.
1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.
Prefer YouTube? Watch this video on our YouTube channel (opens in a new tab).
The six points in the video
This is a silent video. The headings, explanations and labels below reproduce the information on screen.
-
Step 1: Choose a learning question
Decide which uncertainty the prototype should help you investigate.
On-screen labels: Unclear task; Design assumption; Research question.
-
Step 2: Pick a suitable level
A paper sketch and a realistic interactive model answer different questions.
On-screen labels: Simple sketch; Clickable model; Code prototype.
-
Step 3: Include a useful task
Give the participant something realistic to attempt.
On-screen labels: Clear scenario; Meaningful task; Relevant content.
-
Step 4: Watch what happens
Notice where the participant hesitates, misunderstands or cannot continue.
On-screen labels: Observed behaviour; Points of confusion; Unexpected route.
-
Step 5: Keep its limits clear
A prototype can look convincing without having production security or reliability.
On-screen labels: Learning model; Limited implementation; Production work remains.
-
Step 6: Revise and try again
Use the findings to change the idea and check the next version.
On-screen labels: Recorded findings; Updated design; Another useful test.
A practical check for your business
Give a reviewer a specific task to attempt in the prototype. Record the assumed behaviour and compare it with what the participant actually understands before treating the design as finished.
Sources and further detail
Common questions
Can you try a website idea before developing the whole thing?
A prototype models enough of the experience to explore a question. Use what you learn to improve the next version.
Go further
More video tips
All 205 videos →
Design Systems Explained: Shared Styles, Components and Guidance
Design systems, explained.
Design Tokens Explained: Named Values That Keep Website Styles Consistent
Design tokens, explained.