Welcome to Week 2: Prompting the Project with Userflow!

This week introduces task-oriented UX design through user flow charts, UML-inspired process thinking, and descriptive user flows. You will learn how to turn flow logic into practical prompts by building app structure first, adding page sections, and implementing one user flow at a time, then apply that process in the demo and assignments. Let's get started!

This week, we will complete the second mini project and start working on the course project.

What you will need:

  • Cursor
  • Netlify or similar web hosting service
  • Figma Design
  • FigJam or similar to draw user flows
  • Willingness to experiment and iterate on your designs

Task-Oriented UX Design

Task-oriented design focuses on helping users complete specific goals and tasks efficiently, rather than organizing interfaces around features or objects. In vibe coding, that same approach gives AI clearer boundaries, which makes prompts more focused and the resulting product easier to manage.

Why it matters

When you design around tasks, you can create products that are easier to use, easier to maintain, and better aligned with real user needs.

User Goals First

Start with what the user needs to accomplish, not just the features the product might contain.

Simplified Workflows

Break tasks into logical steps and remove unnecessary screens or decisions.

Context-Aware Design

Guide users based on where they are in the workflow and what they need next.

Better Prompting

Describe one task at a time so AI tools can generate screens and logic that match the actual goal.

User Flow: Introduction

A user flow describes the step-by-step path a person takes to complete a task within a product. It shows how a user moves through screens, makes decisions, and receives feedback from the system.

What a user flow includes

  • Starting point: where the user begins the task.
  • User actions: what the user clicks, enters, selects, or decides.
  • System responses: what the product shows or does after each action.
  • Decision points: moments where the user can choose different paths.
  • End point: the final result, such as completing a booking or submitting a form.

Video: User Flow Charts

User flow charts help turn abstract goals into clear interaction logic. They show how a system is structured, what happens next, and how screens relate to each other.

UML and flow examples

User flow charts are closely related to UML activity diagrams. UML (Unified Modeling Language) is a standard visual language for modeling software systems, while user flow charts adapt similar process logic to show how users move through tasks, decisions, and outcomes in an interface.

UML blocks diagram
UML uses blocks, arrows, and labels to describe how a system behaves.
UML example diagram
An example of UML diagram, which represents the system process of downloading a file from a P2P network. This is an important step in software design. With this diagram, a developer can implement complex codebase.

User flow in HCI

A user flow helps answer questions like: where does the user start, what action happens first, what does the system show in response, and what happens if something goes wrong?

User flow chart shapes example

Video:User Flows

Site Map

A site map is a simple map of your product's pages and how they connect. Think of it as a blueprint before you design details: it helps you decide what pages are needed, how users move from one page to another, and where each task should start and end.

Before creating UI screens, use a site map to check whether your structure is complete and logical. A clear site map should answer these questions:

  • What are the main pages in the product?
  • Which page is the entry point, and where does each flow end?
  • How does a user move between pages to complete a task?
  • Are there missing pages, dead ends, or unnecessary navigation steps?

Examples of Site Maps

Site map annotation example
A site map can be annotated to show structure and navigation relationships.

Site map example
An example of a site map showing the structure of a college website.

Video:Descriptive User Flows

Descriptive user flows are detailed narratives that explain the steps a user takes to complete a task in a product. They help ensure that the design and development teams have a clear understanding of the user's journey.

Example: Basic site structure


* Home Page: /
* Building List Page: /buildinglist
* Building: /building
* Space Page: /space
* Confirmation Page: /confirm`

Example:Basic elements to each page


* Home Page: /
  * Section: Coming Reservations #sectionComingReservation
    * Sub Section: Reservation Card List
    * Button: “View Reservation History”
  * Section: Pined Spaces #sectionPinedSpaces
* Building List Page: /buildinglist
  * Section: List of Building Cards #sectionBuildingList
* Building: /building
  * Section: List of Space Cards in Current Building  #sectionSpaceList
* Space Page: /space
  * Section: Space information of current space  #sectionSapceInfo
  * Section: Date, Time and Duration picker   #sectionPickers
  * Button: “Preview”
* Confirmation Page: /confirm
  * Section: Reservation Details  #sectionReserveDetails
  * Button: “Back Home”
  * Button: “Add to Calendar”

Example: Userflow


* START: User is on any one following pages: home (/) or a specific building screen (/building);
* User click on a space card;
* System navigate to space page (/space);
* User selects date, time and duration of the reservation;
* User click on "Preview" button;
* Space page shows a preview pop up with a "Reserve" button;
* User clicks "Reserve" button to submit or close button to edit the reservation;
* After "Reserve" button is clicked, the system navigate to confirmation page (/confirm) showing success message;
* (Optional) User clicks "Back to Home" button to return to home (/);
* (Optional) User clicks "Add to Calendar" button to add the reservation to their calendar;
* END.

Prompting for project initialization with site structure and user flow

Do not ask AI to “make the whole app.” Ask it to first create the structure, then the page components, then one user flow at a time.

Step 1. Initiate the Basic file structure

Help me intialize a multipage web application with following blank pages. Do not use any framework. You should only use HTML, css and JS.
`
* Home Page: /
* Building List Page: /buildinglist
* Building: /building
* Space Page: /space
* Confirmation Page: /confirm`

This will generate the initial file structure for your web application.

Step 2. Add basic elements to each page

Please add some elements to each page based on following. Please create some mockup data if needed.
`
* Home Page: /
  * Section: Coming Reservations #sectionComingReservation
    * Sub Section: Reservation Card List
    * Button: “View Reservation History”
  * Section: Pined Spaces #sectionPinedSpaces
* Building List Page: /buildinglist
  * Section: List of Building Cards #sectionBuildingList
* Building: /building
  * Section: List of Space Cards in Current Building  #sectionSpaceList
* Space Page: /space
  * Section: Space information of current space  #sectionSapceInfo
  * Section: Date, Time and Duration picker   #sectionPickers
  * Button: “Preview”
* Confirmation Page: /confirm
  * Section: Reservation Details  #sectionReserveDetails
  * Button: “Back Home”
  * Button: “Add to Calendar”
`

Step 3. Implement each user flow

Please implement a feature that support following user flow:
`
* START: User is on any one following pages: home (/) or a specific building screen (/building);
* User click on a space card;
* System navigate to space page (/space);
* User selects date, time and duration of the reservation;
* User click on "Preview" button;
* Space page shows a preview pop up with a "Reserve" button;
* User clicks "Reserve" button to submit or close button to edit the reservation;
* After "Reserve" button is clicked, the system navigate to confirmation page (/confirm) showing success message;
* (Optional) User clicks "Back to Home" button to return to home (/);
* (Optional) User clicks "Add to Calendar" button to add the reservation to their calendar;
* END.
`

Demo: Progressive Prompting with Site Structure and User Flow

In this demo, we'll walk through how to use the site structure and user flow to create more effective prompts for your AI interactions.

What is included in this demo?

  • Multi-agent management [1:10]
  • First step in project initialization: create basic file structure [1:30]
  • Second step in project initialization: add basic content to each page [2:40]
  • Implement the first user flow: make a reservation [3:56]
  • Implement the second user flow in a new agent: reservation management [4:49]
  • Debug the preview issue on local server [5:40]
  • Edit details in the design mode in Cursor integrated browser [6:25]
  • Save date locally [8:25]
  • Update the interaction to improve usability [12:00]
  • Additional updates in details using design mode [12:57]
  • Fix bugs on content and style display [13:25]
  • Preview with local server [14:36]

Resources

Preview Published application at https://userflow-prompting-demo.pages.dev/. I deployed this application to Cloudflare Pages, which is another free that you can publish your static website.

Source Code of the published project is available here: https://github.com/hua3467/userflow-prompting-demo.

What to Do This Week

⚠ NOTE

You have two assignments to submit this week.

1. Mini Project

  1. Complete course content for week 2 at ai.aaronyang.me/week/week-2
  2. Select a new topic or redo your previous project.
  3. Choose 2 - 3 user tasks and define the user flows for them.
  4. Write descriptive user flows, site structure based on your user flow charts.
  5. Vibe code a multi-page web application based on three steps demonstrated in the course.
  6. Your web application must be functional.
  7. Create a new project on Netlify or any other hosting service and publish your web application.
  8. Submittion following to Canvas: https://canvas.iastate.edu/courses/127779/assignments/2814318
  9. A. Images of all charts you created (10)

    B. Descriptive web structure and user flows (20)

    C. 5 - 7 major prompts you used to initiate the project, update the page, or debug issues.(20)

    D. For each prompt you provide, specify how well it works. If it is not working well, explain the challenges you had.(20)

    E. Include the link to your published web app on Netlify or any other hosting. The app should be multi-page and functional.(50)

2. Course Project

You only need to submit once for the course project in the entire semester. I will view this file each week to check your progress.

  1. Create a new Figma Design file and name it with YOUR_NAME-ARTGR4840/5840.
  2. Select a topic for your course project.

Create a new page in your Figma Design file, and add following:

  • Identify the 4 - 5 user tasks for your course project.
  • Create a user flow diagram for each user task.
  • Write descriptive user flow for each user task.
  • Create a sitemap for your project.
  • Based on your userflow, identify screens and UI elements, and describe web structure.
  • Submit a shareable link to your Figma Design file: https://canvas.iastate.edu/courses/127779/assignments/2814319 (30 points)

Design Topics for your reference

Here are some design topics to help you get started with your mini project or course project. You can use these as inspiration or modify them to fit your specific goals.

Campus Quiet Space Finder

Students find quiet places on campus based on noise level, seat availability, outlet access, and study purpose.

  • Choose a study goal, such as solo reading, group work, or online meeting.
  • Filter spaces by noise level, capacity, distance, and available amenities.
  • View details for a selected space, including photos, rules, and peak hours.
  • Save a favorite space for future use.
  • Check in or mark whether the space is currently crowded.

Shared Apartment Chore Planner

Roommates create, assign, and track household chores so responsibilities are visible and fair.

  • Add recurring chores such as dishes, trash, bathroom cleaning, or vacuuming.
  • Assign chores to roommates based on availability or rotation.
  • Mark chores as completed with optional photo proof.
  • View a weekly fairness score or contribution summary.
  • Send a friendly reminder when a task is overdue.

Personal Budget Splitter

Users plan a simple monthly budget by dividing income into categories such as food, rent, transportation, savings, and entertainment.

  • Enter monthly income or available spending money.
  • Create budget categories and assign spending limits.
  • Add expenses to a category.
  • View remaining money with a visual progress bar.
  • Adjust category limits when overspending happens.

Event RSVP Organizer

Users create a small event page, invite guests, collect RSVPs, and manage basic event logistics.

  • Create an event with title, date, time, location, and description.
  • Add guests manually or from a mock contact list.
  • Track RSVP status: going, maybe, or not going.
  • Collect guest preferences such as food restrictions or plus-one needs.
  • View a final attendee summary before the event.

Course Schedule Builder

Students select courses and build a weekly class schedule while checking time conflicts and workload balance.

  • Browse a list of available courses with meeting times.
  • Add courses to a weekly calendar view.
  • Detect schedule conflicts automatically.
  • Compare credit load and estimated weekly workload.
  • Save a preferred schedule plan.

Meal Prep Planner

Users plan meals for the week, generate a grocery list, and track preparation progress.

  • Select meals for each day of the week.
  • Filter recipes by dietary preference, cooking time, or budget.
  • Generate a grocery list from selected meals.
  • Mark ingredients as already owned or need to buy.
  • Track which meals have been cooked or packed.

Library Book Pickup System

Users search for books, reserve available copies, and schedule a pickup time at the library.

  • Search books by title, author, course, or topic.
  • View book availability and location in the library.
  • Reserve an available book.
  • Select a pickup time window.
  • Cancel or modify an existing reservation.

Fitness Habit Micro-Coach

Users choose small daily fitness goals and receive simple progress feedback based on completed activities.

  • Select a fitness goal, such as stretching, walking, hydration, or strength training.
  • Set a daily target amount or duration.
  • Log completed activities.
  • View streaks and weekly progress.
  • Adjust the goal difficulty based on recent performance.

Museum Visit Companion

Visitors create a personalized museum route based on their interests, available time, and accessibility needs.

  • Choose interests such as modern art, history, science, or interactive exhibits.
  • Enter available visit time.
  • Generate a suggested route through selected exhibits.
  • View exhibit details, location, and estimated viewing time.
  • Save favorite exhibits to revisit later.

Lost and Found Reporter

Users report lost or found items and browse possible matches using category, location, date, and item details.

  • Submit a lost item report with description, location, and date.
  • Submit a found item report with photo and pickup location.
  • Browse matching items by category or location.
  • Compare item details to confirm a possible match.
  • Send a claim request or contact the item holder.

Study Group Matcher

Students find or create study groups based on course, topic, meeting style, and availability.

  • Select a course and topic that needs study support.
  • Set preferred meeting time, group size, and format.
  • Browse existing study groups.
  • Join a group or request to join.
  • Create a new group when no good match exists.

Pet Care Routine Tracker

Pet owners manage daily care tasks such as feeding, walking, medication, grooming, and vet appointments.

  • Add one or more pets with basic care needs.
  • Create recurring care tasks for each pet.
  • Mark tasks as completed.
  • View upcoming care reminders.
  • Track notes about health, behavior, or appetite.

Local Volunteer Opportunity Finder

Users find volunteer opportunities based on interests, skills, location, and available time.

  • Select interest areas such as animals, environment, education, or food support.
  • Filter opportunities by date, distance, and time commitment.
  • View organization details and role requirements.
  • Sign up for a volunteer shift.
  • Track completed volunteer hours.

Outfit Planner for Weather

Users plan outfits based on weather, occasion, comfort preference, and available wardrobe items.

  • Select the day, occasion, and expected activity level.
  • View weather-based clothing suggestions.
  • Choose clothing items from a mock wardrobe.
  • Save an outfit for later.
  • Rate whether the outfit worked well after wearing it.

Digital Subscription Manager

Users track streaming, software, and membership subscriptions to understand monthly costs and renewal dates.

  • Add a subscription with price, billing cycle, and renewal date.
  • Categorize subscriptions by entertainment, education, software, or shopping.
  • View total monthly and yearly cost.
  • Receive a reminder before renewal.
  • Mark a subscription as canceled or paused.

Recipe Substitution Helper

Users enter a missing ingredient and receive possible substitutions based on recipe type, dietary needs, and flavor impact.

  • Enter the missing ingredient.
  • Select the recipe type, such as baking, soup, sauce, or salad.
  • Choose dietary restrictions or preferences.
  • Compare recommended substitutions.
  • Save a substitution note for future cooking.

Travel Packing Checklist

Users generate a packing checklist based on trip length, weather, activities, and travel type.

  • Enter destination, trip length, and travel purpose.
  • Select planned activities such as hiking, business meetings, beach, or city walking.
  • Generate a categorized packing list.
  • Check off packed items.
  • Add custom items or remove unnecessary suggestions.

Portfolio Project Organizer

Design students organize portfolio projects by tracking case study sections, assets, feedback, and publishing status.

  • Create a new portfolio project entry.
  • Add required case study sections such as problem, process, solution, and reflection.
  • Upload or link mock images and design artifacts.
  • Track feedback from peers or instructors.
  • Mark the project as draft, reviewing, or ready to publish.

Accessibility Issue Reporter

Users report accessibility problems in a building, website, or public space and track whether the issue has been reviewed.

  • Select issue type, such as visual, mobility, hearing, cognitive, or digital accessibility.
  • Add location, description, and optional photo.
  • Rate severity and urgency.
  • Submit the report to a mock review queue.
  • Track report status from submitted to resolved.

Campus Food Line Estimator

Students check dining locations, report current wait times, and decide where to eat based on time, menu, and crowd level.

  • Browse campus food locations.
  • View current estimated wait time and crowd level.
  • Filter by food type, price, or distance.
  • Report a current line length.
  • Save favorite food spots for quick access.