Day 2 presentation1 / 16

Zero to MVP AI Bootcamp

Clickable lead experience

Turn the blueprint into a public journey that a visitor can complete without explanation.

Today you ship

A responsive public prototype with a lead form, sample recommendation, and peer-tested journey.

Scroll to move through the presentation.

Learning objectives2 / 16

By the end of today

  1. 1Translate the shared journey into the minimum screens and states.
  2. 2Create clear lead questions and helpful validation.
  3. 3Use realistic sample results before connecting AI or a database.
  4. 4Review AI-generated interface changes in small steps.
  5. 5Publish the prototype and fix its biggest usability problem.
Run of show3 / 16

Today’s learning path

  1. Module 130 min

    Map the visitor journey

  2. Module 245 min

    Build the form with AI

  3. Module 330 min

    Make the result believable

  4. Module 430 min

    Observe and improve

  5. Guided build

    AI Lead Assistant · Stage 2

    Build, test, checkpoint, and ship.

Module 1 · Learn · 30 min4 / 16

Map the visitor journey

A good journey gives the visitor one clear decision at a time. Before coding, decide what they see when they begin, answer, wait, succeed, or encounter a problem.

A real example

The visitor opens the introduction, answers six questions, reviews the answers, submits, waits briefly, and sees one recommendation with a next action.

Technical terms

User journey
The sequence of steps a person takes to reach an outcome.
State
What the interface shows at a particular moment.
Module 1 · Apply it5 / 16

Apply the concept

Sketch the entire journey in no more than five frames.

  1. 1Draw the start, form, review, waiting, and result screens.
  2. 2Write the one main action available on each screen.
  3. 3Add error and retry paths without creating dead ends.
  4. 4Remove any screen that does not help the visitor reach the recommendation.

Use this prompt

Turn this AI Lead Assistant journey into at most five screens. For each screen, list its purpose, visible information, primary action, and possible error state. Keep it suitable for a complete beginner.

Success looks like

A partner can follow the screen map from beginning to result without asking where to click next.

Watch for

  • If a screen has several equally important buttons, choose one primary action.
  • If the map becomes larger than five screens, combine steps or move optional information after the result.
Module 2 · Learn · 45 min6 / 16

Build the form with AI

A form is a conversation. Each question should be easy to understand, explain why it matters, and help the assistant produce a better recommendation.

A real example

Instead of asking 'Budget?', ask 'What budget have you set aside for this project?' and provide realistic ranges the visitor can choose.

Technical terms

Validation
A check that required information is present and usable.
Component
A reusable part of an interface, such as a question field or button.
Module 2 · Apply it7 / 16

Apply the concept

Build one form section, review it in the browser, and request one targeted correction.

  1. 1Build the form shell with a title and progress indicator.
  2. 2Add one question and verify its label and keyboard behavior.
  3. 3Repeat the approved pattern for the remaining questions.
  4. 4Add clear validation and preserve earlier answers when navigating back.

Use this prompt

Build one accessible lead-question component using the existing project styles. It needs a visible label, helpful example, required-field message, keyboard support, and no database connection. Show me the changed files when done.

Success looks like

All six questions are readable, usable with keyboard or touch, and clearly explain missing information.

Watch for

  • If the AI redesigns unrelated pages, revert and restrict the request to one component.
  • If validation appears before the visitor interacts, ask for messages only after submit or leaving the field.
Module 3 · Learn · 30 min8 / 16

Make the result believable

Before using real AI, prove that the result screen communicates value. A useful recommendation tells the visitor what fits, why it fits, and what to do next.

A real example

Recommended: Website Audit. Why: your site receives traffic but few inquiries. Next step: book a 30-minute review with the agency.

Technical terms

Sample data
Realistic example information used before live services are connected.
Empty state
The helpful screen shown when no result or records exist yet.
Module 3 · Apply it9 / 16

Apply the concept

Create three realistic lead submissions and matching sample recommendations.

  1. 1Write three lead profiles with different needs.
  2. 2Create one recommendation for each profile.
  3. 3Design the result around recommendation, reason, confidence, and next step.
  4. 4Check short, long, incomplete, and unavailable-result states.

Use this prompt

Create a responsive recommendation card using sample data. Show recommended service, two-sentence reason, confidence label, and next-step button. Include loading, unavailable-result, and retry states. Do not connect an AI service yet.

Success looks like

A visitor can explain the recommendation and next action after viewing the result for ten seconds.

Watch for

  • If the result reads like generic marketing, connect every sentence to an answer the visitor gave.
  • If long text breaks the layout, test with a result twice as long as the ideal example.
Module 4 · Learn · 30 min10 / 16

Observe and improve

Usability testing is watching what people do, not asking whether they like the design. Silence reveals where the product fails to explain itself.

A real example

Ask a partner to find the best service for their business. Do not tell them where to start. Record every pause, wrong click, and question.

Technical terms

Usability test
Observing someone attempt a realistic task with the product.
Blocker
A problem that prevents the person from completing the main journey.
Module 4 · Apply it11 / 16

Apply the concept

Run a five-minute peer test and fix one high-impact issue.

  1. 1Give the tester one realistic goal.
  2. 2Observe without teaching, defending, or taking control.
  3. 3Write down hesitation, wrong actions, questions, and failures.
  4. 4Fix the first blocker and run the same task again.

Use this prompt

Here are my usability-test notes. Group them into blockers, confusion, and polish. Recommend only the single highest-impact fix and define how I should verify it.

Success looks like

The second tester completes the core journey with less hesitation and no help at the corrected point.

Watch for

  • If the tester asks what to do, answer with 'What would you try?' and keep observing.
  • Do not fix five things at once; one verified improvement is more valuable than several guesses.
Guided project12 / 16

Build brief

AI Lead Assistant · Stage 2

Build and publish the complete visitor-facing journey using realistic sample recommendations.

User story

As a potential customer, I can answer a few clear questions and receive a useful next-step recommendation.

Guided build · Part 113 / 16

Build it step by step

1

Create the journey shell

Build the shared page structure and navigation for the visitor flow.

2

Add lead questions

Implement the six questions with labels, examples, and required-field feedback.

3

Show progress

Make the current step, remaining effort, and back action easy to understand.

Guided build · Part 214 / 16

Build it step by step

4

Render a sample result

Display the recommended service, explanation, confidence, and next action.

5

Complete every state

Add loading, empty, validation, error, retry, and reset experiences.

6

Publish and peer test

Open the public link on another device and fix the first observed blocker.

Ship checkpoint15 / 16

Do not ship until

  • A visitor understands the product purpose within five seconds.
  • The full lead journey works without dead ends or instructor explanation.
  • The form works at mobile and desktop widths.
  • The recommendation clearly explains the next step.
  • The public link loads and the top peer-test issue is fixed.
Wrap and prepare16 / 16

Ship it. Show it. Prepare the next move.

Before the next day

  • Write the exact job the AI performs for each submitted lead.
  • Prepare the business services, matching rules, and facts the AI may use.
  • List five requests the assistant should refuse or redirect.
All presentationsOpen Day 3