2.26 | on-ground | user testing + webflow

Due Today:

  • P1 Process – 1 persona
  • 1 prototype 6 sections. 
  • Read Chapter 15 in Duckett’s HTML & CSS. (Be sure you are caught up on Ch 1, 2, 3, 4, 5, 10, 11, 12, 13, 18, pp.183–188 + pp. 407–416 + pp.431–440)

For Today:

  • User Testing Workshop on Prototypes
  • Introduction to Webflow

Self Tests

User Testing

Today’s user testing focuses on how the story unfolds as someone scrolls. We are looking at information architecture, narrative pacing, scroll psychology,  clarity of navigation. Keep in mind this is simulated, not real user data. AI is not the authority. Compare AI feedback with real-person feedback. AI may make assumptions. You should validate or reject feedback with justification. If you disagree with it, defend your design decisions. Keep in mind: If the structure is weak at low fidelity it will not be fixed with typography later.

Part 1: User testing with 3 peers. Take notes. Look for patterns (not one-time opinions).

  • Navigation & Flow: Is the navigation intuitive? Does the story unfold logically? Are any section transitions confusing?
  • Story Clarity & Engagement: Is the tone clear even without final styling? Where does attention drop? What sections feel strongest or weakest?
  • Interactivity & Usability: Are clickable areas obvious? Does the page feel easy to move through?
  • Visual Layout & Structure: Does the section breakdown support the narrative?
    Should any sections be combined or split? Is there a better order for the content?

    Part 2: AI-Assisted Simulated User Testing
    Now, test your structure using AI as a simulated user. Open (free) ChatGPT.
    Paste:
  • Your persona’s content
  • A clear, concise outline of your prototype structure (nav labels, section titles, 1-2 sentences per section).

Your Content:

User Persona: [Paste persona]

Site Structure (add more sections as needed):
Nav items:
1. Home
2. Beginning
3. Conflict
4. Turning Point
5. Resolution
6. Reflection

Section Breakdown:
Section 1: Header introducing the story + short intro paragraph.
Section 2: Background context.
Section 3: Main narrative rising tension.
Section 4: Turning point moment.
Section 5: Outcome.
Section 6: Closing reflection + citation.

Goal:
Create an emotional storytelling experience that feels [insert keywords] and [insert keywords].

Prompt #1:

You are roleplaying as the following persona:

[PASTE PERSONA - reference above]

Read the site structure carefully.

Do not comment on typography, color, or styling.
Focus only on content flow, clarity, pacing, and navigation structure.

1. What do you notice first?
2. Does the section order feel logical?
3. Where might you lose interest?
4. Is anything confusing or redundant?
5. What structural change would improve the experience?

Respond in first person as the persona.

Then, run a second prompt:

Now step out of the persona.

Act as a UX designer reviewing this low-fidelity prototype.

Identify:
– Structural weaknesses
– Navigation issues
– Sections that need clearer purpose
– Opportunities to combine or divide content
- Whether the structure supports the stated emotional goal

Keep feedback specific and actionable.

Part 3: On your Medium, Identify patterns from both human + AI feedback.

  • Were there similarities?
  • Were there differences?
  • Did AI share anything your peers did not?

Write:

  • 3 specific structural action items (revisions you will implement).
  • Defend 1 structural decision you are choosing not to change.

Once complete, refine storyboard and begin setting up style tiles.

Intro to Webflow

Download to this handout to take notes or refer to while using. We will do an introductory demo together in class. I would also like for you to watch additional Webflow Training here training videos Getting Started, Web Structure, and Element Basics.

webflow

Style Tiles


Style Tiles are a design tool for compiling fonts, colors, image style, brand keywords, and UI elements. Both should be entirely different. Should include typographic plan.

Project 1 Timeline:

t 3.3 week 6 2 style tiles
tr 3.5 week 7 mobile/tablet/desktop mockups (3 mockups total + must include logo) using selected style tile for homepage
t 3.17 week 7 revised mobile/tablet/desktop mockups + dev plan (wireframes)
tr3.31Final Project Due Date

Due Next Class

    • Make sure you prototype link is posted to your Medium.
    • 2 Style Tiles 
    • Blog 2
    • Refine Storyboard (do not need to set up another prototype) – upload revisions to your Mediun.