Understanding User Prototypes

A user prototype is a simplified model of a product or feature that simulates user interaction. It acts as the bridge between concept and code—the playground where assumptions meet reality.

Prototypes come in various forms:

• Low-fidelity prototypes are quick and rough. Think sketches on whiteboards, wireframes in Miro, or basic clickable flows in Figma. They prioritise speed and structure over polish.

• High-fidelity prototypes mimic the real product’s look and feel, sometimes incorporating live data. They are ideal for testing visual hierarchy, tone, and usability before development.

  
  

For more information on user prototyping, check out this article: User vs. Feasibility Prototypes: Understanding Their Impact in Product Development.

The Importance of User Prototypes

Building without prototyping is akin to composing music without ever hearing it played. Here are five reasons every product manager should prioritise prototypes:

1. Usability testing: Real users reveal friction points that no slide deck can.

2. Early user feedback: Prototypes validate whether the problem—and proposed solution—truly resonates.

3. Reduced build cost and risk: Design iterations are far cheaper than engineering rework.

4. Validated assumptions: Tangible artefacts quickly expose weak hypotheses.

5. Stakeholder alignment: Prototypes unify product, design, and engineering around a shared vision of success.

   
   

How AI Enhances User Prototyping

1) Automate User-Flow Mapping

Large language models (LLMs) and AI features in whiteboarding/design tools can transform a brief into structured, visual flows in minutes.

What you provide: Goals, personas, constraints, success metrics.

What you receive:

• Happy paths (e.g., discovery → selection → checkout → confirmation)

• Branches (guest vs signed-in, one-off vs subscription, mobile vs desktop)

• Edge cases (out of stock, failed payment, invalid postcode)

• Importable artefacts (bulleted steps, Mermaid diagrams, JSON trees, step tables)

  
  

Example

Suppose you plan to launch a business offering specialty coffee through a mobile app. You can use the following prompt to create a user flow:

You are a senior UX strategist. Create a concise “happy-path” user flow for a UK D2C e-commerce site selling high-grade specialty coffee beans.

Goal: A first-time visitor buys a single 250g bag OR starts a flexible subscription.

Personas: Coffee Enthusiast, Gift Buyer, Subscription Seeker.

Constraints: UK shipping; grind options (whole bean/espresso/filter/French press); guest checkout allowed; payments (card, Apple/Google Pay, PayPal).

Output: A Mermaid flowchart and a bullet list of steps with short labels (≤4 words), each step tagged with {owner: PM/Design/Eng, risk: low/med/high}. Keep it lean.

A Mermaid flowchart illustrating a step-by-step online coffee purchasing process, from exploring options on the landing page to selecting a grind size, choosing buy type (one-off or subscription), checking out, and finalizing the order with payment and confirmation.

2) Generate Wireframes and Layouts

AI design assistants (and LLMs paired with Figma/Framer plug-ins) can turn a brief into low-fidelity wireframes—frames with boxes for images, headings, CTAs, and notes—within minutes.

Provide:

• Goal: e.g., “increase first-time purchase”

• Personas/Jobs: Who and why

• Content blocks: Hero, navigation, product grid, trust signals

• Constraints: Mobile-first, accessibility basics, UK English, express checkout

  
  

The output includes draft layouts you can edit. These are simple frames with boxes for images, headings, CTAs, and notes. You can iterate by asking for alternatives (“more product-led,” “less text,” “move reviews up”).

Sample Prompt

For the same specialty coffee business, your sample prompt for a mobile app might be:

You are a senior UX designer. Generate a mobile-first, low-fidelity wireframe for the homepage of a UK D2C specialty coffee brand. Goal: Drive a first purchase of a 250g bag or a subscription. Personas: Coffee Enthusiast, Subscription Seeker. Must-have sections (in order): Announcement bar (free delivery threshold), Header (logo left, search, basket, account; compact navigation), Hero (1-sentence value proposition; primary CTA “Shop Beans”; secondary “Find My Coffee” quiz), Featured Beans 2×2 grid (image placeholder, name, tasting notes, price, one-click Add), “Help Me Choose” mini-wizard (brew method, roast, flavour) → filtered product listing page, Subscription explainer (save %, flexible cadence, pause/skip), Trust signals (star rating, roast-date freshness, certifications, roaster story), Content rows (Brew Guides, Gifts, Best Sellers), Newsletter (small), Footer. Constraints: Accessibility-friendly, minimal copy placeholders, avoid brand styling, clear CTAs. Output: (1) numbered list of sections with brief annotations, (2) a simple box layout diagram per section (text labels only), (3) a second variant that is “subscription-led” (subscription strip above hero).

Mobile-first wireframe mockups for a UK specialty coffee brand generated by Google's Stitch using ChatGPT prompt.

3) Generate a Full Application Prototype

AI models like Anthropic’s Claude, OpenAI’s GPT-5, and similar LLM-based design assistants can now help product managers and designers generate end-to-end prototypes of digital applications—from concept to interactive mock-ups—by combining natural-language prompts, structured UI descriptions, and auto-generated assets or code.

In essence, the product manager provides the intent, and the AI constructs a functional simulation around it.

For instance, you can request Claude to develop a Tetris game, and it will generate the code for you automatically.

Click on the link (https://claude.ai/public/artifacts/d4804021-9718-48e6-aeee-8b9939074918) if you wish to explore the application created by Claude in detail.

Tetris game interface created by Claude, showcasing classic gameplay features such as live controls, scoring, and level tracking on a sleek digital platform.

Challenges and Limitations of AI in Prototyping

As powerful as AI is, product managers must remain vigilant.

• Data bias: AI inherits imperfections from its training data. Unchecked, this can perpetuate poor UX decisions.

• Over-automation: An over-reliance on AI can dull creativity, leading to generic or soulless interfaces.

• Hallucinations: Models occasionally invent details that aren’t feasible or desirable.

• Legal and ethical issues: Be wary of privacy breaches or copyright misuse when feeding customer data into AI tools.

• Skill gaps: Product managers must learn the basics of prompt engineering and critically evaluate AI outputs.

  
  

Conclusion: The Product Manager as Conductor

AI isn’t here to replace product managers—it’s here to elevate them. Think of your product process as an orchestra. You, the product manager, are the conductor: setting the tempo, guiding emotion, and ensuring harmony between design, engineering, and user needs. AI is the orchestra itself—a collection of powerful instruments that can play faster, louder, and with astonishing precision.

However, it’s still your vision, your ear for nuance, and your sense of timing that turn noise into music. Use AI boldly, but thoughtfully. When product managers and AI play in sync, the result isn’t just faster prototypes; it’s smarter, more human-centred innovation.

What’s Next in This Series

Over the coming weeks, we will publish hands-on guides with copy-paste prompts and templates:

1. Automating user flows with ChatGPT + Mermaid (happy paths, edge cases, instrumentation).

2. Wireframing with AI assistance using tools such as Google’s Stitch.

3. End-to-end prototypes with LLMs (e.g., Claude).