Product

From concept to first interactive prototype

How we get from a fuzzy idea to something people can click—before we polish

February 18, 2025

By Manweba

The first prototype is not a mini launch. It is a question machine: Does the flow make sense? Where do people stall? What assumption dies on contact with a real click?

Name the job before the UI

Write who it is for, what they are trying to finish, and what blocks them today. Two short personas and one success metric beat a moodboard that nobody can defend.

Every later debate—“should this be a modal?”—gets answered against that job, not taste.

Job-to-be-done before pixels

Who is this for (role + context), in one sentence
What they are trying to finish—not which screens they might visit
What blocks them today (tools, policy, confusion, missing data)
One success metric you can observe in a prototype session
What is explicitly out of scope for this first clickable pass

Sketch wide, wire narrow

Crazy 8s or a whiteboard pass comes before Figma. Explore eight shapes of the idea in minutes so you do not fall in love with the first box you drew.

Then wire the full path—including empty, error, and loading—in grayscale. Color arguments can wait.

Make it clickable fast

A multi-step flow with local state is enough to test orientation. Fake the data. Fake the API. Real questions die in static comps.

Step flow with progress

jsx

1import { useState } from 'react';
2import { motion, AnimatePresence } from 'motion/react';
3
4const steps = ['Welcome', 'Profile', 'Preferences', 'Done'];
5
6export function OnboardingFlow({ StepViews }) {
7  const [step, setStep] = useState(0);
8  const progress = ((step + 1) / steps.length) * 100;
9  const View = StepViews[step];
10
11  return (
12    <div className="mx-auto max-w-xl p-8">
13      <div className="mb-8 h-2 overflow-hidden rounded-full bg-white/10">
14        <motion.div
15          className="h-full bg-teal-500"
16          animate={{ width: `${progress}%` }}
17          transition={{ duration: 0.25 }}
18        />
19      </div>
20
21      <AnimatePresence mode="wait">
22        <motion.div
23          key={step}
24          initial={{ opacity: 0, x: 16 }}
25          animate={{ opacity: 1, x: 0 }}
26          exit={{ opacity: 0, x: -16 }}
27          transition={{ duration: 0.25 }}
28        >
29          <View />
30        </motion.div>
31      </AnimatePresence>
32
33      <div className="mt-8 flex gap-3">
34        {step > 0 &&&(
35          <button type="button" onClick={() =>=setStep((s) =>=s - 1)}>
36            Back
37          </button>
38        )}
39        <button
40          type="button"
41          onClick={() =>=setStep((s) =>=Math.min(s + 1, steps.length - 1))}
42        >
43          {step ====steps.length - 1 ? 'Finish' : 'Continue'}
44        </button>
45      </div>
46    </div>
47  );
48}

Loading code…

Watch five people, then triage

Give a concrete task. Do not narrate. Note where they hesitate or invent their own path. A handful of sessions usually exposes the structural problems; polish can wait.

Bucket findings: must-fix (blocks the job), should-fix (friction), later (taste). Rebuild only what the evidence demands, then test again.

Triage buckets after five sessions

Must-fix: blocks finishing the job—change the structure
Should-fix: friction that slows people without stopping them
Later: taste, polish, and “nice to have” labels
Ignore: one-off confusion that vanishes when the task is clearer

Final thoughts

Speed to a testable click beats speed to a pretty deck. Validate the job, wire the ugly truth, watch people struggle, then earn the right to polish.

Product

Website SEO that actually moves leads (not just rankings)

Structure, speed, intent pages, and tracking—SEO as a growth system, not a checklist theater

Read Article

Product

Client portal vs shared Drive: when custom software is worth it

Auth, roles, and workflows that turn scattered files into a product your clients trust

Read Article

Ready to build something this considered?

Browse services Start a project

1import { useState } from 'react';
2import { motion, AnimatePresence } from 'motion/react';
3
4const steps = ['Welcome', 'Profile', 'Preferences', 'Done'];
5
6export function OnboardingFlow({ StepViews }) {
7  const [step, setStep] = useState(0);
8  const progress = ((step + 1) / steps.length) * 100;
9  const View = StepViews[step];
10
11  return (
12    <div className="mx-auto max-w-xl p-8">
13      <div className="mb-8 h-2 overflow-hidden rounded-full bg-white/10">
14        <motion.div
15          className="h-full bg-teal-500"
16          animate={{ width: `${progress}%` }}
17          transition={{ duration: 0.25 }}
18        />
19      </div>
20
21      <AnimatePresence mode="wait">
22        <motion.div
23          key={step}
24          initial={{ opacity: 0, x: 16 }}
25          animate={{ opacity: 1, x: 0 }}
26          exit={{ opacity: 0, x: -16 }}
27          transition={{ duration: 0.25 }}
28        >
29          <View />
30        </motion.div>
31      </AnimatePresence>
32
33      <div className="mt-8 flex gap-3">
34        {step > 0 &&&(
35          <button type="button" onClick={() =>=setStep((s) =>=s - 1)}>
36            Back
37          </button>
38        )}
39        <button
40          type="button"
41          onClick={() =>=setStep((s) =>=Math.min(s + 1, steps.length - 1))}
42        >
43          {step ====steps.length - 1 ? 'Finish' : 'Continue'}
44        </button>
45      </div>
46    </div>
47  );
48}

Name the job before the UI

Sketch wide, wire narrow

Make it clickable fast

Watch five people, then triage

Final thoughts

Related Articles

Website SEO that actually moves leads (not just rankings)

Client portal vs shared Drive: when custom software is worth it