Documents – Page 20 – Memorres Information Center

Template: UX Flow Diagram

Purpose

To create a standardized structure for visualizing user flows:

Shows tasks, decisions, branches, loops, and outcomes.
Bridges task scenarios (EPIC 2.1) and wireframe mapping (EPIC 3).
Acts as the blueprint for wireflows and UI planning.

Table – Flow Mapping Fields

Flow Step ID	User Action / Task	System Response	Decision Point	Next Step(s)	Notes / Variants
F1	Click “Book Demo”	Load booking form	Y/N: Page load successful?	F2 (success) / Error path	Show loading state
F2	Fill form fields	Validate input	Y/N: Email valid?	F3 (valid) / Error path	Inline error handling
F3	Submit form	Trigger backend API	Y/N: Slot available?	F4 (confirm) / F5 (error)	Auto-check calendar availability
F4	Confirmation screen	Send email + calendar link	—	End	Confirmation email triggered
F5	Error shown	Suggest alternatives	Y/N: Retry?	F2 (retry) / End	Show alternate time slots

Symbols / Notation Guidelines

Circles → Start/End points.
Rectangles → User actions/tasks.
Diamonds → Decision points (Yes/No, Success/Fail).
Arrows → Direction of flow.
Dashed lines → Optional/alternate paths.

Usage Notes

Every decision point must have at least 2 branches (Yes/No, Success/Fail).
Always include edge cases (error, empty state, timeout).
Keep IDs (F1, F2, F3…) consistent → useful for linking to wireframes later.
Use flow notes column to document exceptions or dev clarifications.

Example (Simplified Visual Flow)

(Start) → [Book Demo Clicked] → (Form Loads?)  
            ↓ Yes                     ↓ No  
          [Fill Form]              [Error: Retry?]  
            ↓ Valid Input             ↳ Retry → [Fill Form][Submit Form]  
            ↓ Slot Available?  
          [Confirm Screen] → (End)  
            ↓ No  
          [Error: Suggest Slots] → (Retry Path)

Outcome: UX flows become standardized, repeatable, and dev-friendly, with both happy paths and edge cases accounted for before wireframing.

Crafting Effective User Journeys with Action–Emotion–System Tracing

1. Purpose

To provide a step-by-step methodology for creating user journey maps that capture not just what users do but also how they feel and how the system responds. This ensures journey maps are practical tools for design decisions, not decorative diagrams.

2. Why This Matters

Shallow maps = Just a list of steps → fail to reveal pain points.
Emotion-aware maps = Show where users feel frustrated, confused, or delighted.
System-aware maps = Show how backend or interface responses shape user experience.
Combining all three (Action + Emotion + System) gives design teams a diagnostic view: where to intervene, what to improve, and how to measure impact.

3. Step-by-Step Methodology

Step 1 – Define Journey Boundaries

What stage are you mapping? (Onboarding, checkout, dashboard use)
Where does the journey start and end?
Avoid “boiling the ocean” → keep to 5–7 stages.

Step 2 – Identify User Goal

Capture the primary user outcome at this stage.
Example: “Book a product demo” or “Set up first project.”

Step 3 – Break into Actions

Decompose the goal into tasks and sub-tasks (from Task Scenario Breakdown Sheet – EPIC 2.1).
Use neutral language: “enter details,” not “click button.”

Step 4 – Trace Emotions Alongside Actions

For each action, ask: “How is the user likely feeling here?”
Example:
- Filling form → Frustrated, bored
- Watching demo → Excited, hopeful

Step 5 – Document System Responses

For each action, note what the system does back.
Example:
- Submit form → Displays confirmation screen, sends email
- Timeout → Shows error message

Step 6 – Spot Friction & Design Opportunities

Cross-check emotions with system responses.
Frustration + weak system response = design gap.
Example: Form too long + no auto-fill → shorten form, add autofill.

Step 7 – Prioritize Fixes

Not every pain point = high priority.
Tag each opportunity as High/Medium/Low impact (business + user).

4. Practical Examples

Example A: SaaS Demo Booking

Action	Emotion	System Response	Opportunity
Visit landing page	Curious but skeptical	Hero loads with long text	Simplify hero messaging
Fill booking form	Frustrated	No inline validation	Shorten form, add validation
Submit form	Unsure if booked	Generic thank-you page	Add calendar invite + confirmation email

Example B: E-commerce Checkout

Action	Emotion	System Response	Opportunity
Add item to cart	Happy	Item shows in cart	Show free shipping threshold
Enter payment details	Nervous	Payment page loads slowly	Improve speed, show trust seals
Submit payment	Anxious	Spinner with no status	Show progress + fallback payment option

5. Dos & Don’ts

Do:

Ground journeys in real interviews/analytics, not guesses.
Capture positive emotions too (delight moments).
Use simple visuals (icons, arrows, color codes).
Always include opportunities column.

Don’t:

Map every microscopic click → keep it macro, goal-driven.
Write assumptions without validation.
Make static maps → update them after launches and feedback cycles.

6. Roles & Collaboration

Designer → Facilitates mapping, documents actions/emotions/systems.
PM → Validates business goals, ensures alignment with strategy.
Client/Stakeholder → Provides context on real user struggles.
QA/Dev (optional) → Spot technical/system dependencies early.

7. Toolkit & Templates

Task Scenario Breakdown Sheet (EPIC 2.1) → Inputs for journey stages.
User Journey Map Template (EPIC 2.2) → Core mapping tool.
UX Flow Diagram Template (EPIC 2.4) → Next stage after journey.
Heuristic Evaluation Grid (EPIC 2.10) → Validates mapped flows.

8. Quick Checklist for Every Journey Map

Goal defined clearly
5–7 stages mapped
Actions documented neutrally
Emotions captured (positive + negative)
System responses mapped
Pain points flagged
Design opportunities identified & prioritized

Template: User Journey Map

Purpose

To visualize the user’s experience across different stages, highlighting goals, actions, emotions, pain points, and system responses. This helps identify opportunities for smoother flows and better design interventions.

Table – User Journey Map

Stage	User Goal	User Actions	Emotions / Thoughts	Pain Points	System Touchpoints	Opportunities for Design
Awareness	Understand product value	Browse website, read landing page	Curious but skeptical	Info overload, unclear messaging	Website (landing page, hero section)	Simplify messaging, visual clarity
Consideration	Evaluate product fit	Compare features, watch demo video	Hopeful, weighing options	Hard to find demo info, unclear pricing	Website (features page, demo link)	Clear CTAs, transparent pricing
Conversion	Sign up for demo/trial	Fill form, confirm details	Excited but cautious	Form too long, unclear errors	Signup form, email confirmation	Shorter forms, inline validation
Onboarding	Start using product	Explore dashboard, guided tour	Overwhelmed initially	Too many features upfront	Dashboard, onboarding flow	Progressive onboarding, contextual tips
Retention	Use product regularly	Create docs, collaborate	Productive, engaged	Occasional bugs, slow performance	Web app, notifications	Optimize flows, fix performance issues

Usage Notes

Keep journeys simple but structured (5–7 stages max).
Map both user actions and system responses — this is key to spotting design gaps.
Use emotions/pain points to flag where UX improvements matter most.
Update journey maps at major milestones (launch, redesign, new feature).

Template: Task Scenario Breakdown Sheet

Purpose

To convert high-level user goals into actionable tasks, with all sub-decisions and alternate paths captured before drawing UX flows.

Table – Task Scenario Breakdown

User Goal	Task	Sub-Task(s)	Decision Points	Edge Cases / Exceptions	Sample Notes
Book a demo	Fill booking form	– Enter name – Enter email – Select time slot	– Confirm time zone? – Auto-check calendar availability?	– Email invalid – No slots available	Show inline error; suggest alternative slots
Create PRD	Start new doc	– Select template – Add project title	– Choose “AI Draft” vs “Blank”	– Template missing – User cancels midway	Save draft auto
Reset password	Initiate reset	– Enter email – Verify link	– Is email registered? – Token expired?	– Wrong email – Expired link	Provide help link + support contact
Checkout order	Add payment	– Enter card details – Apply promo code	– Card valid? – Promo eligibility?	– Payment failure – Promo expired	Retry payment, fallback to PayPal

Usage Notes

Always start from the user’s end-goal → break into tasks → break tasks into sub-tasks.
Document decisions (yes/no, conditional logic) alongside edge cases.
This sheet acts as the blueprint for UX Flow Diagrams (EPIC 2.4).
Keep language neutral, non-UI specific (avoid “click button” at this stage).

Template: Discovery Summary Presentation

Purpose

To present intake and discovery findings in a concise, visual format that can be shared with stakeholders and the internal team before UX planning begins.

Structure (Slide Outline)

Slide	Title	Content	Sample Example
1	Project Overview	Project name, requester, date, scope	“SaaS Landing Page Redesign – Aug 2025”
2	Business Goals	Primary + secondary business goals	“Increase demo sign-ups by 20%, reduce bounce rate”
3	User Snapshot (Persona Lite)	Snapshot of primary user goals, blockers, maturity	“Startup PM – Riya: needs quick PRD workflows, hates manual formatting”
4	Problem Framing	Business & user problems reframed into design challenge	“How might we communicate value in <30s to drive more demos?”
5	Problem Typology	Matrix category selected	“Conversion Issue + Experience Flow Gap”
6	Success Criteria	Agreed success metrics	“+20% sign-ups, bounce <40%, QA-ready Figma by day 10”
7	Risks & Constraints	Key risks and mitigation	“Tight timeline → lock content upfront; ensure accessibility AA compliance”
8	Intake Summary Checklist	Completed checklist status	All ☑ marked
9	Open Questions (If Any)	Unresolved points to carry into UX	“Mobile-first priority vs desktop-first”
10	Next Steps	Timeline, responsibilities, UX planning kickoff	“Wireframe planning starts Sep 1; Design Lead owns flow mapping”

Usage Notes

Keep it 1–2 slides per section max → deck should not exceed 12 slides.
Visuals (brief persona card, typology chart, goals box) preferred over plain text.
Shared in the Discovery Alignment Call, then finalized as a record.
Stored in project folder under Discovery → Summary Deck.

SOP: Running a Design Discovery Alignment Call

1. Purpose

To validate discovery findings with all stakeholders, close open questions, and gain alignment before UX planning begins.

2. Scope

Applies to all design projects where intake activities have been completed (brief, interview, goals, persona, checklist).

3. Step-by-Step Process

Stage A – Preparation

Review all intake documents (brief, interview notes, persona lite, success criteria).
Draft the Discovery Summary Presentation with key findings.
Prepare a list of open questions or unclear points.
Send meeting invite with agenda and pre-read slides (optional).

Stage B – Running the Call

Kickoff (5 mins)
- Introduce purpose: validate findings, confirm success criteria, align expectations.
Context Recap (10 mins)
- Present summary of intake: goals, user context, problem framing.
Open Items Discussion (15–20 mins)
- Walk through unclear points or conflicts.
- Document decisions in real time.
Validation of Success Criteria (10 mins)
- Confirm what “success” looks like for business, users, and design team.
Next Steps Agreement (5–10 mins)
- Align on timeline, scope, and responsibilities.

Stage C – Post-Call Actions

Update the Discovery Summary Presentation with validated inputs.
Circulate meeting notes + final deck to all stakeholders.
Store finalized summary in project folder.
Mark Intake Completeness Checklist as done.
Trigger handoff to UX Planning team.

4. Roles & Responsibilities

Design Lead → Facilitates call, presents summary, ensures alignment.
PM/Account Manager → Brings business context, confirms scope/timelines.
Client/Stakeholders → Validate goals, user context, constraints.
Designer Assigned → Capture notes and update documents.

5. Governance

No UX planning may start until this call has been completed and validated.
Major conflicts unresolved in call → escalate to Delivery Head.

Checklist: Design Intake Completeness

Purpose

To verify that all required intake activities are completed before moving into UX planning. This ensures design never starts with missing context or assumptions.

Intake Completeness Checklist

Item	Check	Status (☑/✗)	Notes
Design Brief	Completed Design Brief submitted
Stakeholder Interview	Notes captured with all key inputs
Problem Framing	Business & user problems reframed into a clear design challenge
Problem Typology	Categorized using Typology Matrix
Persona Lite	Persona Lite Sheet filled
Goals Defined	Design Goals & Success Criteria documented
Risks Noted	Risks & constraints identified
Alignment Call Scheduled	Discovery alignment call booked
Intake Summary	Draft of Discovery Summary Presentation prepared

Usage Notes

Must be checked by the Design Lead before handover to the UX team.
Keep it as a living checklist inside the project folder.
If any item is incomplete → project intake is considered not ready.

Template: Design Goals & Success Criteria Sheet

Purpose

To define what success means for a design project from the perspective of business, users, and the design team. This ensures that all parties measure outcomes, not just outputs.

Table – Goals & Success Criteria

Section	Field	Description	Sample Entry
Business Goals	Primary Business Goal	Core objective	“Increase SaaS demo sign-ups”
	Supporting Goals	Secondary aims	“Improve investor perception, reduce churn risk”
User Goals	Primary User Goal	What the user wants	“Understand value of product within 30s”
	Supporting Goals	Additional needs	“Seamless onboarding, easy collaboration”
Design Team Goals	Delivery Goal	What the team must ensure	“UI handoff-ready in 10 working days”
	Quality Goal	Quality benchmarks	“WCAG AA compliance, 0 major QA flags”
Success Metrics	Business Metric(s)	Quantitative outcome	“+20% demo bookings, bounce rate <40%”
	User Metric(s)	UX indicators	“Avg. task completion time <2 mins”
	Team Metric(s)	Process indicators	“All screens approved in QA before dev sync”
Risks & Watchouts	Key Risks	What may block success	“Overloaded dev sprints, unclear messaging”
	Mitigation	How to avoid risks	“Lock content in alignment call before design”

Usage Notes

To be filled during the intake stage, after persona and interview notes.
Should fit 1–2 pages max for clarity.
Must be approved in the discovery alignment call before design begins.

Template: Persona Lite Sheet (Discovery-Level)

Purpose

To create a quick snapshot of the target user during discovery.

This avoids assumptions and gives enough clarity to guide early UX flows — without investing time in full persona creation.

Table – Persona Lite Sheet

Section	Field	Description	Sample Entry
Basic Info	Persona Name	Lightweight, relatable label	“Startup PM – Riya”
	Segment	Broad classification	“SaaS Product Manager, Age 30–40”
Goals	Primary Goal	What this user wants to achieve	“Deliver PRDs quickly & accurately”
	Secondary Goals	Supporting aims	“Collaborate smoothly with devs, avoid rework”
Pain Points / Blockers	Key Frustrations	Problems in current context	“Too much manual formatting in PRDs, confusing templates”
	Digital Maturity	Comfort with tools/tech	“High – daily user of Jira, Confluence, Figma”
Behaviors	Typical Actions	How they approach tasks	“Search for templates, consult peers, iterate drafts”
	Tool Usage	Tools they rely on	“Jira, Confluence, Slack, Figma”
Environment & Constraints	Work Context	Setting/conditions of use	“Works in fast-paced startup, multiple roles to juggle”
	Constraints	Limitations they face	“Limited time, no design team support”
Design Implications	What Design Must Enable	Direct takeaways for designers	“Clarity, fewer steps, template-driven workflows”

Usage Notes

Must be created within the intake stage (after stakeholder interview, before UX planning).
Keep it 1-page max — discovery only.
Updated/refined later if the project requires full personas.
Store alongside Design Brief + Stakeholder Notes in MIC folder.

Framework: Design Problem Typology Matrix

Purpose

To classify design problems into clear categories, ensuring each request is approached with the right mindset, tools, and process. This avoids misdiagnosis (e.g., treating a conversion issue as a UI polish task).

Typology Matrix

Problem Type	Description	Example Triggers	Design Focus	Key Outputs
Conversion Issue	User isn’t taking desired actions	Low sign-ups, poor CTA clicks, high bounce	Clarity, persuasion, CTA hierarchy	Landing page redesign, improved CTA flows
MVP/Feature Launch	New feature/product needs design	MVP screens, new app module, beta launch	Task flows, usability, speed to market	Wireframes, UI screens, onboarding flow
UI Consistency Fix	Visual/UI alignment issues	Inconsistent spacing, token misuse, style drift	Alignment, system hygiene	Updated UI kit, corrected screens
Campaign Creative	Marketing-driven design need	Ads, banners, event pages	Visual punch, brand alignment, adaptability	Creative variations, campaign kit
Accessibility Gap	Barriers to inclusive design	Poor contrast, missing alt text, small tap zones	Inclusivity, WCAG standards	Accessible UI variants, compliance-ready screens
Experience Flow Gap	UX logic issues in flow	Confusing navigation, too many steps	Navigation clarity, decision simplification	Refined journey maps, wireflows
Rebranding/Identity Shift	Brand direction change	Logo, colors, tone update	Cohesion, new system rollout	New style guide, updated components

How to Use

After Stakeholder Interview → Review notes and ask: What kind of problem is this?
Match with Category → Pick 1–2 types (don’t overload).
Define Next Steps → Pull correct templates/SOPs based on category:
- Conversion → Jump to UX Planning & Flow Mapping (EPIC 2).
- UI Consistency Fix → Check against Component System Management (EPIC 10).
- Accessibility → Apply Accessibility Best Practices Guide (EPIC 6).
Validate in Alignment Call (EPIC 1.9).