Competitive Insight Share

Find a partner (someone NOT in your problem space)

  1. Each person shares (3 min each):"The one insight from my competitive analysis that will most influence my design is..."
    "My app will be different because..."
  2. Partner asks one probing question
  3. Switch and repeat

Prayer

Annika, will you pray for us today?

Unit D: Neue App

Your user flow is a prompt — AI turns your thinking into working code

Today

Competitive Insight Share
Synthesis → Differentiation
User Flows
Annotated Sketches
Combining Artifacts → AI Prototype
Work Session

By the end of today...

Differentiation

You'll articulate what makes your app different from competitors

User Flow

You'll create a traditional user flow diagram

Sketches

You'll sketch annotated wireframes

Synthesis

You'll combine these into an AI prompt and generate a working prototype

Why this matters

You've done the research. Today your app comes to life.

AI tools can turn your user flows and sketches into working code in minutes — but only if you give them clear inputs.

Your flow is your prompt. The clearer your thinking, the better the output.

Today marks the shift

Forming Intent → Rendering Intent

Forming

Research, validation, competitive analysis

Rendering

User flows, prototypes, working code

Your user flow is the bridge. AI accelerates the rendering.

From Research to Prototype

Competitive insights → User flow → Sketches → Working code

The "So What?" Question

You have a positioning matrix and four competitor analyses — now what?

Every competitive insight should answer:

"So what does this mean for MY design?"

"All four competitors have cluttered dashboards"
→
"My app will have a focused, single-task home screen"

Finding Your Gap

  1. Look at your positioning matrix — where is the empty space?
  2. Look at competitor weaknesses — what pain points can you solve better?

Differentiation = gap in the market + something you can execute

User Flow as AI Prompt

The clearer your flow, the better the output

User flow ≠ feature list

A user flow maps how someone moves through your app to accomplish a goal.

Entry point
→
Core screens (3-4)
→
Decision points
→
Success state

Start with the "happy path" — the ideal case where everything works.

Your flow is your prompt

AI needs to understand your intent. A clear, annotated user flow tells AI: "Here's what I want the user to experience."

Messy flow

= messy AI output

Clear flow

= useful AI output

What makes a good user flow for AI?

  1. Specific screen names: "Home Dashboard" not "Screen 1"
  2. Clear actions: "User taps 'Start Workout'" not "User proceeds"
  3. Annotations: What each screen shows and does
  4. Success criteria: What does "done" look like?

Annotated Sketches

Thinking tools that become AI input

Why we still sketch

Sketching is faster than words for spatial problems.

Quick paper sketches (15-20 min) help you think through layout and hierarchy.

  1. Phone scale (index cards work great)
  2. Real content — not "lorem ipsum"
  3. Tap targets marked
  4. Visual hierarchy visible

Annotate your sketches

Annotations make your sketches useful as AI input.

  1. Label key elements — not just boxes, but what they are
  2. Mark tap targets — with where they go ("→ Workout Selection")
  3. Add brief notes — what happens on this screen

An annotated sketch tells AI both what it looks like AND what it does.

Combining Your Artifacts

Traditional skills, new application

What each artifact tells AI

User Flow Diagram

Screen sequence

Navigation logic

Decision points

Annotated Sketches

Layout structure

Visual hierarchy

UI elements & tap targets

Text Prompt

App purpose & context

Style direction

Tech requirements

Upload the visuals directly. The text prompt adds what they don't show.

Combining your artifacts

Visual inputs (upload directly)

• User flow diagram (image)

• Annotated sketches (photos)

AI can see these — don't describe them in text

Text prompt (contextual glue)

• App description & purpose

• Target user context

• Style direction (colors, mood)

• Tech stack (React, mobile-first)

Don't describe what's in the images — add what's NOT visible.

Example prompt

Build a fitness tracking app in React. Target user is a busy professional who wants quick 15-minute workouts.

[Attach: user flow diagram]

[Attach: annotated sketches]

Style: Clean, minimal, dark mode. Rounded corners, lots of whitespace. Energetic but not aggressive.

Notice: no description of the flow or layout — AI sees that in the images.

AI Prototyping Tools

ToolBest for
Figma MakeAlready in Figma — easiest access, quick UI generation
V0React/Next.js, strong UI generation, iterative prompting
LovableFull-stack MVPs, instant deploy, complex apps
Bolt.newQuick prototypes, simple interactions

Start with Figma Make — you already have access.

Demo: From Artifacts to Code

  1. Show a user flow diagram + annotated sketches
  2. Write the contextual prompt (what's NOT in the visuals)
  3. Upload everything to AI tool
  4. See the output — discuss what worked

What context is missing from these visuals? What would you add?

D4: User Flow + Sketches + AI Prototype

Due Wednesday, Mar 11 @ 5:15pm

User Flow

Traditional diagram: core function in 3-4 screens

Specific screen names, clear actions

Annotated Sketches

Paper sketches with labels and tap targets

Photos/scans showing your process

AI Prototype

Working coded prototype from your synthesis

Deployed link showing core flow

Bring your AI prototype to class Wednesday — you'll test it

Next up

Work session (60 min)

  • 10 min: Write your differentiation strategy
  • 12 min: Create user flow diagram
  • 12 min: Quick annotated sketches at phone scale
  • 6 min: Write contextual prompt (what visuals don't show)
  • 20 min: AI prototyping — upload, iterate, refine

D4: User Flow + Sketches + AI Prototype — due Wed, Mar 11 @ 5:15pm

Bring your AI prototype to class — you'll test it on Day 18

1 /