| name | ux-methodology-process |
| description | Use after audience research and reference site analysis. Applies laws of UX that determine page structure, section order, and user flow. Informs WHAT sections exist and HOW they're sequenced — not visual design. Output is refined page architecture ready for design optimization. |
UX Methodology: Process
Use evidence-based psychology to determine the structure of your page — what sections matter, why, and what order works best.
Distinction: This skill determines what the page contains and how it flows. ux-methodology-design then optimizes how to present that structure. Together they shape both substance and style.
When to Apply
- After audience research + reference sites — ready to design page architecture
- Your rough sections exist but you're not sure of the order
- Deciding which sections to include or cut
- Determining how to sequence information for this specific audience
- Balancing competing demands (e.g., educate vs. convert)
Workflow
Copy this checklist:
UX Process Design:
- [ ] 1. Map user mental model (Jakob's, Mental Model)
- [ ] 2. Define journey peaks and endings (Peak-End, Goal-Gradient)
- [ ] 3. Chunk information (Miller's, Chunking)
- [ ] 4. Determine section sequence (Serial Position, Zeigarnik)
- [ ] 5. Reduce choices per section (Hick's, Choice Overload)
- [ ] 6. Plan disclosure/progression (Paradox of Active User, Flow)
- [ ] 7. Match task pacing (Parkinson's, Flow)
- [ ] 8. Simplify ruthlessly (Occam's)
- [ ] 9. Document final architecture
Process Laws Reference
Mental Model & Expectations
Jakob's Law — Users expect your site to work like others they know.
- Use for: Section ordering, familiar patterns (Hero → CTA → Proof is expected)
- Application: "Our audience expects [reference site patterns]. Follow that pattern unless you have a reason to break it."
- In this phase: Determines what sections should exist and their default order
Mental Model — Users carry compressed beliefs about how systems work.
- Use for: Flow that matches how they think the process works
- Application: "In [audience]'s mind, the process is: problem → solution → proof → action. Structure sections in that order."
- In this phase: Shapes the logical progression of content
Journey Structure
Peak-End Rule — People remember emotional peaks and how it ends, not the average.
- Use for: Deciding where to place the most compelling content
- Application: "Place the emotional high-point (customer success story / breakthrough moment) here. End on a clear action or win."
- In this phase: Determines section placement, not just existence
Goal-Gradient Effect — Effort and motivation accelerate as users approach the goal.
- Use for: Section ordering — momentum builds toward conversion
- Application: "Put friction-light sections early, proof mid-page, the ask (CTA) near the end. Each section should feel closer to the goal."
- In this phase: Shapes the progression from awareness → consideration → commitment
Zeigarnik Effect — Unfinished tasks stay top-of-mind; completion feels satisfying.
- Use for: Deciding if you need a progress section or multi-step flow
- Application: "Show progress toward a goal: 'Step 1 of 3,' progress bars, or 'You're X% closer.' This keeps users engaged."
- In this phase: May create a new section type (progress tracker, milestones) or shape existing ones
Information Architecture
Miller's Law — Working memory holds ~7±2 items (about 5–9 chunks).
- Use for: How many sections total? How many choices per section?
- Application: "With 7±2 sections, users can hold the structure in mind. If you have 12 sections, group them into 5–7 category sections."
- In this phase: Determines ideal page architecture — 5–7 main sections is usually right; more requires grouping
Chunking — Break information into meaningful groups.
- Use for: Grouping related content into sections
- Application: "Group 'How it works,' 'Demo,' and 'Use cases' together rather than scattering them. Users process grouped information better."
- In this phase: Informs section clustering and hierarchy
Hick's Law — Decision time grows with number and complexity of choices.
- Use for: Limiting choices per section; breaking flows into steps
- Application: "If a section has 7+ options, break it into substeps or use progressive disclosure (show 3, reveal more)."
- In this phase: May split one section into multiple, or add progressive disclosure
Choice Overload — Too many options hurt decisions and satisfaction.
- Use for: Curating what options to show
- Application: "This section has 8 features. Show top 3 features, hide the rest behind 'See all.' Users choose better with fewer options."
- In this phase: Decides what content is primary vs. secondary/optional
Progression & Pacing
Serial Position Effect — First and last items in a series are remembered best.
- Use for: Deciding what goes in first and last position
- Application: "Hero section: make it your strongest value prop. Final CTA: make it your clearest call-to-action. Middle sections can be supportive."
- In this phase: Shapes hero content, final section content, and nav placement
Parkinson's Law — Tasks expand to fill available time.
- Use for: Pacing sections and forms to match user expectations
- Application: "A long-form section will feel slow. A multi-step form feels like more work. Match section 'weight' to importance."
- In this phase: May create sub-sections to break up dense content, or combine lightweight sections
Paradox of the Active User — Users skip detailed onboarding and dive in.
- Use for: Progressive disclosure — show essentials, hide details
- Application: "Instead of a long 'How it works' section, show the core flow visually, with a toggle for detailed steps."
- In this phase: Determines if a section needs multiple disclosure levels or collapsed details
Flow — Immersion when challenge matches skill.
- Use for: Balancing information density with user readiness
- Application: "Early sections assume less knowledge; later sections can go deeper. Match section complexity to journey stage."
- In this phase: Shapes how much detail/depth each section has relative to where it sits
Simplification
Occam's Razor — Among equal solutions, choose the one with fewest assumptions.
- Use for: Deciding what sections to cut
- Application: "Do you really need both 'Features' and 'Use cases' sections? Can one section do both? Cut it."
- In this phase: Ruthlessly removes sections that don't earn their place
Architecture Decision Workflow
Step 1: Define User Mental Model
Ask:
- What process does the user expect to follow?
- How do they think about the problem → solution journey?
- What familiar patterns have they seen elsewhere (reference sites)?
Example:
- Tech buyer expects: Problem → How it works → Proof → Pricing → Sign up
- Luxury traveler expects: Inspiration → Destination details → Personalization → Book
Step 2: Map Journey Peaks
Using Peak-End Rule + Goal-Gradient:
- Where is the emotional high-point? (Customer success story? Product demo? Breakthrough moment?)
- Where should that sit? (Usually mid-to-late journey, when they're engaged)
- What should the final section feel like? (Action, satisfaction, clarity)
Step 3: Chunk Content into Sections
Using Miller's Law + Chunking:
- How many sections total? (Aim for 5–7 main sections if possible)
- What belongs together? (Feature details? Proof? Social proof?)
- Is any section doing two jobs? (Can it be split or merged?)
Step 4: Decide Section Order
Using Serial Position + Zeigarnik + Jakob's Law:
- First section: Strongest value prop (uses Serial Position — first is remembered)
- Middle sections: Supporting information, proof, objection handling
- Final section: Clearest CTA (uses Serial Position — last is remembered)
- Progress: Do users need to see progress toward the goal? (Zeigarnik)
Step 5: Reduce Choices Per Section
Using Hick's Law + Choice Overload:
- How many options/choices does each section present?
- If >5, does it need progressive disclosure or sub-sections?
- Can you recommend a default?
Step 6: Plan Disclosure Levels
Using Paradox of Active User + Flow:
- What information is essential vs. detailed?
- Does this section need expandable sections ("See details")?
- Can the core message stand alone?
Step 7: Validate Against Audience
- Does this sequence match the audience's mental model (from audience-research)?
- Does this architecture echo patterns from successful reference sites?
- Are sections ordered by increasing commitment? (Progressive engagement)
Architecture Template
# Page Architecture: [Your Site]
## Overall Structure
**Primary goal:** [What's the one thing we want them to do?]
**User mental model:** [How they think about this process]
**Section count:** [Ideal: 5–7 main sections]
## Section Map
| Order | Section | Purpose | Choices offered | Disclosure level |
|-------|---------|---------|-----------------|------------------|
| 1 | Hero | Strongest value prop | None (just CTA) | Surface only |
| 2 | How it works | Show process | 1 CTA variant | Progressive disclosure |
| 3 | Social proof | Build confidence | See testimonials / case study | Expandable |
| 4 | Pricing | Show options | 3 tiers (primary + secondary) | Details on hover |
| 5 | FAQ | Address objections | Expandable categories | Collapsed by default |
| 6 | Final CTA | Conversion | Single, clear CTA | No additional choices |
## Journey Flow (Peak-End + Goal-Gradient)
1. **Arrival (Hero)** — Jakob's Law: familiar pattern, strong value prop
2. **Engagement (How it works)** — Paradox of Active User: show the path quickly
3. **Confidence (Proof)** — Peak-End Rule: emotional high-point here
4. **Consideration (Pricing/Options)** — Hick's Law: 3–5 options max, recommend one
5. **Resolution (FAQ)** — Address lingering objections
6. **Closure (Final CTA)** — Serial Position: strongest call-to-action; clear win
## Information Chunking (Miller's Law)
- **Primary sections:** 5 (easy to hold in mind)
- **Choices per section:** 3 (max; prevents Hick's Law overload)
- **Nav items:** 5 (matches primary section count)
## Disclosure Strategy (Paradox of Active User)
- **Hero:** Surface only
- **How it works:** Show core flow; expand for detailed steps
- **Case study:** Summary visible; click to expand
- **Pricing:** Show 3 main tiers; click for annual pricing / add-ons
- **FAQ:** Questions visible; answers hidden until clicked
## Simplification Check (Occam's Razor)
- Do we need both "Features" AND "How it works"? → Merged into "How it works"
- Do we need "Team" section for conversion? → Cut for now; add later
- Do we need "Blog" link in nav? → Link in footer only (Hick's Law: limit nav)
## Next Steps
- Validate this sequence with [audience-research findings]
- Compare against [reference sites] — do patterns match?
- Ready for /ux-methodology-design to optimize presentation
Common Patterns by Audience
Technical / Skeptical Audience (B2B SaaS, dev tools)
Hero (value prop)
→ Architecture / How it works (show the system)
→ Proof (benchmarks, GitHub stars, case studies)
→ Pricing
→ FAQ (objection handling)
→ CTA
Impulse / Emotional Audience (Luxury, lifestyle, creator tools)
Hero (inspiration)
→ Visual story / Demo (show the experience)
→ Social proof (testimonials, community)
→ How it works (brief, assume they want in)
→ Call to action
Small Business / Practical Audience
Hero (outcome: "Save 5 hours/week")
→ Proof (customer stories with results)
→ How it works (simple, not technical)
→ Pricing (clear, no surprises)
→ FAQ
→ CTA
Anti-Patterns
- No clear mental model match — audience expects X flow, you built Y flow
- Too many sections — 10+ sections overwhelm (use grouping or hide less critical ones)
- Choices scattered — "What should I do?" at every section instead of progressive narrowing
- Peak in wrong place — best content early, nothing surprises mid-journey
- No progress feeling — users can't tell if they're closer to the goal
- Disclosure mismatch — everything hidden (users don't know what's available) or nothing hidden (overwhelming)
- Hero → Pricing (no proof) — skips confidence building
- Ending without action — last section is generic footer, not a clear next step
Quality Gate
Before moving to ux-methodology-design:
