Flow B: Verbal Specification
Activates when: User chooses to describe the page through discussion
Introduction
**Great! Let's build the page concept through conversation.**
We'll define:
- Page sections (what areas exist?)
- Section purposes (why does each section exist?)
- Key objects (what interactive elements?)
- User flow (how do they move through the page?)
This creates a conceptual specification - the page where concept meets description.
SUBSTEP B1: Identify Sections
What are the main SECTIONS of this page?
Think about areas/blocks, like:
- Header/Navigation
- Hero/Banner
- Content areas
- Forms
- Footer
List the sections from top to bottom:
Store sections_list
SUBSTEP B2: Section Purposes
**Now let's define each section's purpose:**
For each section in sections_list:
{{section.name}}
What is the PURPOSE of this section?
- What should the user understand/do here?
- Why does this section exist?
Purpose:
Store section.purpose
End
SUBSTEP B3: Key Objects
What are the KEY INTERACTIVE OBJECTS on this page?
Think about:
- Buttons (CTAs, actions)
- Forms (inputs, selectors)
- Links (navigation, external)
- Media (images, videos)
List the most important interactive elements:
Store key_objects
SUBSTEP B4: User Flow
How does the user move through this page?
- Where do they enter?
- What's their first action?
- What's the desired outcome?
- Where do they go next?
Describe the flow:
Store user_flow
SUBSTEP B5: Generate Specification
**Creating conceptual specification...**
Generate page specification document:
- Page name and purpose
- Navigation (prev/next)
- For each section:
- Section name
- Section purpose
- Status: "CONCEPTUAL - Needs visualization"
- For each key object:
- Object name
- Object type
- Object purpose
- Status: "CONCEPTUAL - Needs specification"
- User flow description
- Next steps: "Create visualization (sketch/wireframe)"
Save to: C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md
Completion
✅ **Conceptual page specification created!**
**What we defined:**
- {{sections_list.length}} sections with purposes
- {{key_objects.length}} key interactive objects
- Complete user flow
**Status:** CONCEPTUAL - Ready for visualization
**Next steps:**
1. Create sketch/wireframe based on this concept
2. Upload visualization
3. Run Page Process Workshop to enhance specification
Or:
[A] Create ASCII layout now (quick visual)
[B] Done - I'll create sketch later
[C] Actually, let's refine the concept more
Choice: