@schilling.mark.a/software-methodology 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/copilot-instructions.md +106 -0
- package/LICENSE +21 -0
- package/README.md +174 -0
- package/atdd-workflow/SKILL.md +117 -0
- package/atdd-workflow/references/green-phase.md +38 -0
- package/atdd-workflow/references/red-phase.md +62 -0
- package/atdd-workflow/references/refactor-phase.md +75 -0
- package/bdd-specification/SKILL.md +88 -0
- package/bdd-specification/references/example-mapping.md +105 -0
- package/bdd-specification/references/gherkin-patterns.md +214 -0
- package/cicd-pipeline/SKILL.md +64 -0
- package/cicd-pipeline/references/deployment-rollback.md +176 -0
- package/cicd-pipeline/references/environment-promotion.md +159 -0
- package/cicd-pipeline/references/pipeline-stages.md +198 -0
- package/clean-code/SKILL.md +77 -0
- package/clean-code/references/behavioral-patterns.md +329 -0
- package/clean-code/references/creational-patterns.md +197 -0
- package/clean-code/references/enterprise-patterns.md +334 -0
- package/clean-code/references/solid.md +230 -0
- package/clean-code/references/structural-patterns.md +238 -0
- package/continuous-improvement/SKILL.md +69 -0
- package/continuous-improvement/references/measurement.md +133 -0
- package/continuous-improvement/references/process-update.md +118 -0
- package/continuous-improvement/references/root-cause-analysis.md +144 -0
- package/dist/atdd-workflow.skill +0 -0
- package/dist/bdd-specification.skill +0 -0
- package/dist/cicd-pipeline.skill +0 -0
- package/dist/clean-code.skill +0 -0
- package/dist/continuous-improvement.skill +0 -0
- package/dist/green-implementation.skill +0 -0
- package/dist/product-strategy.skill +0 -0
- package/dist/story-mapping.skill +0 -0
- package/dist/ui-design-system.skill +0 -0
- package/dist/ui-design-workflow.skill +0 -0
- package/dist/ux-design.skill +0 -0
- package/dist/ux-research.skill +0 -0
- package/docs/INTEGRATION.md +229 -0
- package/docs/QUICKSTART.md +126 -0
- package/docs/SHARING.md +828 -0
- package/docs/SKILLS.md +296 -0
- package/green-implementation/SKILL.md +155 -0
- package/green-implementation/references/angular-patterns.md +239 -0
- package/green-implementation/references/common-rejections.md +180 -0
- package/green-implementation/references/playwright-patterns.md +321 -0
- package/green-implementation/references/rxjs-patterns.md +161 -0
- package/package.json +57 -0
- package/product-strategy/SKILL.md +71 -0
- package/product-strategy/references/business-model-canvas.md +199 -0
- package/product-strategy/references/canvas-alignment.md +108 -0
- package/product-strategy/references/value-proposition-canvas.md +159 -0
- package/project-templates/context.md.template +56 -0
- package/project-templates/test-strategy.md.template +87 -0
- package/story-mapping/SKILL.md +104 -0
- package/story-mapping/references/backbone.md +66 -0
- package/story-mapping/references/release-planning.md +92 -0
- package/story-mapping/references/task-template.md +78 -0
- package/story-mapping/references/walking-skeleton.md +63 -0
- package/ui-design-system/SKILL.md +48 -0
- package/ui-design-system/references/accessibility.md +134 -0
- package/ui-design-system/references/components.md +257 -0
- package/ui-design-system/references/design-tokens.md +209 -0
- package/ui-design-system/references/layout.md +136 -0
- package/ui-design-system/references/typography.md +114 -0
- package/ui-design-workflow/SKILL.md +90 -0
- package/ui-design-workflow/references/acceptance-targets.md +144 -0
- package/ui-design-workflow/references/component-selection.md +108 -0
- package/ui-design-workflow/references/scenario-to-ui.md +151 -0
- package/ui-design-workflow/references/screen-flows.md +116 -0
- package/ux-design/SKILL.md +75 -0
- package/ux-design/references/information-architecture.md +144 -0
- package/ux-design/references/interaction-patterns.md +141 -0
- package/ux-design/references/onboarding.md +159 -0
- package/ux-design/references/usability-evaluation.md +132 -0
- package/ux-research/SKILL.md +75 -0
- package/ux-research/references/journey-mapping.md +168 -0
- package/ux-research/references/mental-models.md +106 -0
- package/ux-research/references/personas.md +102 -0
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# Usability Evaluation
|
|
2
|
+
|
|
3
|
+
## What Is a Usability Evaluation?
|
|
4
|
+
|
|
5
|
+
A structured review of a planned experience against established usability principles. Run it BEFORE screen flows are designed — catching problems at this stage costs nothing. Catching them after implementation costs a full redesign cycle.
|
|
6
|
+
|
|
7
|
+
This is not a visual design review. It is a behavioral review: Will users be able to accomplish their goals? Where will they get stuck? Where will they make mistakes?
|
|
8
|
+
|
|
9
|
+
## The 10 Heuristics
|
|
10
|
+
|
|
11
|
+
These are the evaluation criteria. For each planned screen or flow, check against all 10. Document any violations found.
|
|
12
|
+
|
|
13
|
+
### H1: Visibility of System Status
|
|
14
|
+
The product always keeps users informed about what is going on, through appropriate feedback within reasonable time.
|
|
15
|
+
|
|
16
|
+
**Check:** Does every action produce visible feedback? Does the user always know what state they're in? Is loading always indicated? Is the current location in the navigation always clear?
|
|
17
|
+
|
|
18
|
+
### H2: Match Between System and Real World
|
|
19
|
+
The product speaks the user's language — words, phrases, concepts familiar to the user. Information appears in a natural and logical order.
|
|
20
|
+
|
|
21
|
+
**Check:** Do all labels match the mental model vocabulary? Are navigation categories organized the way the user thinks about the domain? Do action labels describe the outcome, not the system operation?
|
|
22
|
+
|
|
23
|
+
### H3: User Control and Freedom
|
|
24
|
+
Users often choose system functions by mistake and need a clearly marked "emergency exit" to leave the unwanted state without having to go through a long procedure.
|
|
25
|
+
|
|
26
|
+
**Check:** Can the user undo every action? Is Cancel always available alongside Save? Can the user close or dismiss any modal, drawer, or overlay? Is there a way back from every dead end?
|
|
27
|
+
|
|
28
|
+
### H4: Consistency and Standards
|
|
29
|
+
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
|
|
30
|
+
|
|
31
|
+
**Check:** Do all buttons of the same type look and behave identically? Do all forms validate the same way? Do all error messages follow the same structure? Does terminology stay consistent across all screens?
|
|
32
|
+
|
|
33
|
+
### H5: Error Prevention
|
|
34
|
+
Even better than good error messages is careful design that prevents problems from occurring in the first place.
|
|
35
|
+
|
|
36
|
+
**Check:** Are required fields clearly marked before the user submits? Are invalid options removed or disabled rather than shown and then rejected? Does the system warn before destructive actions? Are ambiguous actions clarified before execution?
|
|
37
|
+
|
|
38
|
+
### H6: Recognition Rather Than Recall
|
|
39
|
+
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the interface to use another.
|
|
40
|
+
|
|
41
|
+
**Check:** Are options visible rather than requiring the user to recall them? Are defaults sensible? Is context preserved when navigating between screens? Are labels and instructions visible at the point of use, not hidden in a help page?
|
|
42
|
+
|
|
43
|
+
### H7: Flexibility and Efficiency of Use
|
|
44
|
+
Accelerators — unseen by the novice user — may often speed up interaction for expert users. The system should cater to both inexperienced and experienced users.
|
|
45
|
+
|
|
46
|
+
**Check:** Can expert users accomplish tasks faster (keyboard shortcuts, bulk actions, saved filters)? Does the default flow serve novice users without requiring them to know shortcuts? Are frequently used actions accessible without deep navigation?
|
|
47
|
+
|
|
48
|
+
### H8: Aesthetic and Minimalist Design
|
|
49
|
+
Dialogues should not contain irrelevant or rarely needed information. Every extra unit of information competes with relevant information and diminishes their relative visibility.
|
|
50
|
+
|
|
51
|
+
**Check:** Does every screen contain only information needed for the current task? Are there elements that exist for decoration rather than function? Can any screen be simplified without losing necessary capability?
|
|
52
|
+
|
|
53
|
+
### H9: Help Users Recognize, Diagnose, and Recover from Errors
|
|
54
|
+
Error messages should be expressed in plain language (not codes), precisely indicate the problem, and constructively suggest a solution.
|
|
55
|
+
|
|
56
|
+
**Check:** Do all error messages explain what went wrong in plain language? Do they suggest what to do next? Do they preserve the user's work? Is there a path forward from every error state? (See interaction-patterns.md Error Recovery for detail.)
|
|
57
|
+
|
|
58
|
+
### H10: Help and Documentation
|
|
59
|
+
Even though it is better if the system can be used without documentation, it may be necessary to provide help that is easy to search and focused on the user's task.
|
|
60
|
+
|
|
61
|
+
**Check:** Is the product usable without documentation for the primary persona's primary goal? Where help IS needed, is it contextual (at the point of use) rather than requiring the user to leave the task to find it? Are tooltips or inline explanations present for non-obvious controls?
|
|
62
|
+
|
|
63
|
+
## Severity Scoring
|
|
64
|
+
|
|
65
|
+
Each violation found gets a severity score. This determines priority.
|
|
66
|
+
|
|
67
|
+
| Score | Severity | Meaning |
|
|
68
|
+
|---|---|---|
|
|
69
|
+
| 0 | Not a problem | Evaluated but no usability issue exists |
|
|
70
|
+
| 1 | Cosmetic | Problem occurs but does not affect task completion |
|
|
71
|
+
| 2 | Minor | Occasional usability problem, workaround exists |
|
|
72
|
+
| 3 | Major | Usability problem, no obvious workaround, task completion is impaired |
|
|
73
|
+
| 4 | Catastrophic | Users cannot accomplish the task at all |
|
|
74
|
+
|
|
75
|
+
**Priority rule:**
|
|
76
|
+
- Score 4: Must fix before any screen is designed. Redesign the flow.
|
|
77
|
+
- Score 3: Must fix before implementation begins.
|
|
78
|
+
- Score 2: Fix before shipping. Can be addressed during design phase.
|
|
79
|
+
- Score 1: Fix if time permits. Does not block.
|
|
80
|
+
|
|
81
|
+
## Evaluation Report Format
|
|
82
|
+
|
|
83
|
+
Create: `/docs/ux-design/usability-evaluation/[feature-name].md`
|
|
84
|
+
|
|
85
|
+
```markdown
|
|
86
|
+
# Usability Evaluation: [Feature Name]
|
|
87
|
+
|
|
88
|
+
**Evaluated:** [Date]
|
|
89
|
+
**Personas evaluated for:** [List of personas]
|
|
90
|
+
**Scenarios evaluated:** [List of feature file scenarios]
|
|
91
|
+
**Evaluated by:** [Claude / team member]
|
|
92
|
+
|
|
93
|
+
## Summary
|
|
94
|
+
[1–2 sentences: overall usability health of this feature's planned experience.
|
|
95
|
+
How many violations found, how many are critical.]
|
|
96
|
+
|
|
97
|
+
## Violations Found
|
|
98
|
+
|
|
99
|
+
### [Violation Title]
|
|
100
|
+
- **Heuristic:** H[N] — [Heuristic name]
|
|
101
|
+
- **Severity:** [0–4]
|
|
102
|
+
- **Location:** [Which screen or flow step]
|
|
103
|
+
- **Description:** [What the problem is — specific, not generic]
|
|
104
|
+
- **Impact:** [What happens to the user if this isn't fixed]
|
|
105
|
+
- **Recommendation:** [Specific fix — not "make it better" but "change X to Y"]
|
|
106
|
+
|
|
107
|
+
### [Next Violation]
|
|
108
|
+
[Same structure]
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## Violations by Severity
|
|
113
|
+
|
|
114
|
+
| Severity | Count | Violations |
|
|
115
|
+
|---|---|---|
|
|
116
|
+
| 4 — Catastrophic | [N] | [titles] |
|
|
117
|
+
| 3 — Major | [N] | [titles] |
|
|
118
|
+
| 2 — Minor | [N] | [titles] |
|
|
119
|
+
| 1 — Cosmetic | [N] | [titles] |
|
|
120
|
+
|
|
121
|
+
## Clearance
|
|
122
|
+
|
|
123
|
+
- [ ] All severity 4 violations resolved — redesign before proceeding
|
|
124
|
+
- [ ] All severity 3 violations resolved — cleared for ui-design-workflow
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Rules
|
|
128
|
+
|
|
129
|
+
- Run evaluation after scenarios are written but before screen flows are designed
|
|
130
|
+
- Evaluate for the primary persona first. Then check if secondary personas can accomplish their goals with the same design
|
|
131
|
+
- A severity 4 violation means the planned flow must change. Do not proceed to screen design until it is resolved
|
|
132
|
+
- Document the evaluation even if no violations are found — it proves the design was checked
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ux-research
|
|
3
|
+
description: User experience research skill for defining personas, mental models, and user journey maps before product development begins. Use when starting a new product or feature set, when defining who the users are, when the user says "who are our users", "define personas", "map the user journey", or "understand our customers". Reads and updates the Value Proposition Canvas and Business Model Canvas. Output feeds directly into story-mapping skill — personas and journeys determine which activities and tasks exist.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# UX Research
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Discovery before design. Defines who the users are, how they think, what they currently do, and where they struggle. Every downstream decision — story maps, scenarios, screen flows — is grounded in this research. Without it, you are guessing.
|
|
11
|
+
|
|
12
|
+
## When to Run This Skill
|
|
13
|
+
|
|
14
|
+
- **New product:** Run fully before any story mapping begins
|
|
15
|
+
- **New feature set:** Run a focused version scoping only the affected user segment and journey
|
|
16
|
+
- **Existing product, new user segment:** Run personas and journey mapping for the new segment only
|
|
17
|
+
|
|
18
|
+
## Workflow
|
|
19
|
+
|
|
20
|
+
### Step 1: Define Personas
|
|
21
|
+
|
|
22
|
+
Personas are the cast of characters the product serves. Every subsequent design decision is made "for" a specific persona.
|
|
23
|
+
|
|
24
|
+
See `references/personas.md` for structure, how to derive them from the Value Proposition Canvas, and the file format.
|
|
25
|
+
|
|
26
|
+
Create: `/docs/ux-research/personas/[persona-name].md`
|
|
27
|
+
|
|
28
|
+
### Step 2: Map Mental Models
|
|
29
|
+
|
|
30
|
+
Mental models capture how each persona *thinks* about the problem domain — not how the system works, but how the user conceptualizes it. Designs that match mental models feel intuitive. Designs that conflict feel confusing.
|
|
31
|
+
|
|
32
|
+
See `references/mental-models.md` for how to identify mental models and how they constrain design decisions.
|
|
33
|
+
|
|
34
|
+
Create: `/docs/ux-research/mental-models/[persona-name]-[domain].md`
|
|
35
|
+
|
|
36
|
+
### Step 3: Map User Journeys
|
|
37
|
+
|
|
38
|
+
A journey map shows what a persona does, thinks, and feels across the full experience — before, during, and after interacting with the product. It reveals pain points the product must solve and moments where delight is possible.
|
|
39
|
+
|
|
40
|
+
See `references/journey-mapping.md` for structure, touchpoints, and the file format.
|
|
41
|
+
|
|
42
|
+
Create: `/docs/ux-research/journeys/[persona-name]-[goal].md`
|
|
43
|
+
|
|
44
|
+
### Step 4: Update Value Proposition Canvas
|
|
45
|
+
|
|
46
|
+
Research findings must flow back into the VPC. Personas reveal which customer jobs matter most. Journey maps reveal which pains are most painful and which gains are most valued.
|
|
47
|
+
|
|
48
|
+
Update `/docs/value-proposition-canvas.md` with findings before handing off to story-mapping.
|
|
49
|
+
|
|
50
|
+
## File Structure
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
docs/ux-research/
|
|
54
|
+
├── personas/
|
|
55
|
+
│ ├── [persona-name].md
|
|
56
|
+
│ └── [persona-name].md
|
|
57
|
+
├── mental-models/
|
|
58
|
+
│ ├── [persona-name]-[domain].md
|
|
59
|
+
│ └── [persona-name]-[domain].md
|
|
60
|
+
└── journeys/
|
|
61
|
+
├── [persona-name]-[goal].md
|
|
62
|
+
└── [persona-name]-[goal].md
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Integration
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
ux-research (this skill) → defines who, why, and how users think
|
|
69
|
+
↓
|
|
70
|
+
story-mapping → organizes work around user activities
|
|
71
|
+
↓
|
|
72
|
+
bdd-specification → writes scenarios
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Personas are referenced by name in story map tasks and Gherkin scenarios. Journey maps inform which activities appear on the backbone and which tasks are Must Have vs Could Have.
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# Journey Mapping
|
|
2
|
+
|
|
3
|
+
## What Is a Journey Map?
|
|
4
|
+
|
|
5
|
+
A journey map traces a specific persona through a specific goal — from the moment they realize they need something to the moment they've accomplished it. It captures what they do, what they think, what they feel, and where things break down.
|
|
6
|
+
|
|
7
|
+
Journey maps reveal two things no other method reveals:
|
|
8
|
+
1. **Pain points** — the moments where frustration is highest. These are the problems the product must solve.
|
|
9
|
+
2. **Delight opportunities** — the moments where a small improvement creates disproportionate satisfaction. These are where the product wins loyalty.
|
|
10
|
+
|
|
11
|
+
## Scope
|
|
12
|
+
|
|
13
|
+
One journey map per persona per goal. A goal is a single end-to-end accomplishment — not a feature, not a screen, but a thing the user wants to have done.
|
|
14
|
+
|
|
15
|
+
**Good goal:** "Get paid for consulting work"
|
|
16
|
+
**Bad goal (too broad):** "Run my business"
|
|
17
|
+
**Bad goal (too narrow, this is a task not a goal):** "Click the Send button"
|
|
18
|
+
|
|
19
|
+
## Journey Phases
|
|
20
|
+
|
|
21
|
+
Every journey has these phases. Not every phase has the same number of steps — some journeys have a long "Become Aware" phase and a short "Act" phase. Map what actually happens, don't force equal length.
|
|
22
|
+
|
|
23
|
+
### Phase 1: Become Aware
|
|
24
|
+
The persona realizes they have a need or a problem. This often happens outside the product entirely.
|
|
25
|
+
|
|
26
|
+
**Questions to answer:**
|
|
27
|
+
- What triggers the realization? (deadline approaching, colleague mentions it, pain point hits)
|
|
28
|
+
- What do they do first? (search online, ask someone, open a tool they already use)
|
|
29
|
+
- What information are they looking for?
|
|
30
|
+
|
|
31
|
+
### Phase 2: Decide
|
|
32
|
+
The persona evaluates options — including doing nothing or continuing their current workaround.
|
|
33
|
+
|
|
34
|
+
**Questions to answer:**
|
|
35
|
+
- What alternatives do they consider?
|
|
36
|
+
- What makes them choose one option over another?
|
|
37
|
+
- What builds or destroys trust at this stage?
|
|
38
|
+
|
|
39
|
+
### Phase 3: Act
|
|
40
|
+
The persona does the thing. This is where the product is most directly involved.
|
|
41
|
+
|
|
42
|
+
**Questions to answer:**
|
|
43
|
+
- What steps do they take?
|
|
44
|
+
- Where do they get stuck or confused?
|
|
45
|
+
- What information do they need at each step that they don't have?
|
|
46
|
+
- What do they expect to happen vs what actually happens?
|
|
47
|
+
|
|
48
|
+
### Phase 4: Verify
|
|
49
|
+
The persona checks that the thing worked. This is often overlooked in design but critical for trust.
|
|
50
|
+
|
|
51
|
+
**Questions to answer:**
|
|
52
|
+
- How does the persona know it worked?
|
|
53
|
+
- What confirmation do they need?
|
|
54
|
+
- What would make them doubt it worked?
|
|
55
|
+
|
|
56
|
+
### Phase 5: Reflect
|
|
57
|
+
The persona forms an opinion about the experience. This drives whether they come back, recommend the product, or look for alternatives.
|
|
58
|
+
|
|
59
|
+
**Questions to answer:**
|
|
60
|
+
- How do they feel about the experience overall?
|
|
61
|
+
- What would they tell someone else about it?
|
|
62
|
+
- What would make them do this again vs find another way?
|
|
63
|
+
|
|
64
|
+
## Touchpoints
|
|
65
|
+
|
|
66
|
+
A touchpoint is any point where the persona interacts with the product or with information related to the goal. Touchpoints include:
|
|
67
|
+
|
|
68
|
+
- The product itself (screens, features)
|
|
69
|
+
- Email communications (confirmations, reminders, receipts)
|
|
70
|
+
- External systems (bank statements, email inbox, calendar)
|
|
71
|
+
- Other people (colleagues, customers, accountants)
|
|
72
|
+
- Physical artifacts (printed invoices, paper records)
|
|
73
|
+
|
|
74
|
+
Map ALL touchpoints, not just the ones inside the product. The user's experience doesn't start when they open your app.
|
|
75
|
+
|
|
76
|
+
## Emotion Curve
|
|
77
|
+
|
|
78
|
+
At each step, note the persona's emotional state on a simple scale:
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
😤 Frustrated → 😐 Neutral → 😊 Satisfied → 😄 Delighted
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The emotion curve across the journey reveals the shape of the experience. A journey that starts frustrated and ends delighted is a success story. A journey that starts hopeful and ends frustrated is a churn risk.
|
|
85
|
+
|
|
86
|
+
## File Format
|
|
87
|
+
|
|
88
|
+
Create: `/docs/ux-research/journeys/[persona-name]-[goal].md`
|
|
89
|
+
|
|
90
|
+
```markdown
|
|
91
|
+
# Journey Map: [Persona Name] — [Goal]
|
|
92
|
+
|
|
93
|
+
**Persona:** [Link to persona file]
|
|
94
|
+
**Goal:** [The end-to-end accomplishment being mapped]
|
|
95
|
+
**Current state:** Before product / With product (map both if product exists)
|
|
96
|
+
|
|
97
|
+
## Journey Summary
|
|
98
|
+
[2–3 sentences describing the overall shape of this journey and where the biggest pain points are]
|
|
99
|
+
|
|
100
|
+
## Phase 1: Become Aware
|
|
101
|
+
|
|
102
|
+
### Steps
|
|
103
|
+
1. [What the persona does]
|
|
104
|
+
2. [What the persona does]
|
|
105
|
+
|
|
106
|
+
### Touchpoints
|
|
107
|
+
- [Touchpoint 1]
|
|
108
|
+
- [Touchpoint 2]
|
|
109
|
+
|
|
110
|
+
### Thoughts
|
|
111
|
+
- "[What the persona is thinking at this stage]"
|
|
112
|
+
|
|
113
|
+
### Feelings
|
|
114
|
+
😤 → 😐 (emotion at start → emotion at end of phase)
|
|
115
|
+
|
|
116
|
+
### Pain Points
|
|
117
|
+
- [What frustrates them here]
|
|
118
|
+
|
|
119
|
+
### Opportunities
|
|
120
|
+
- [What the product could do better here]
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## Phase 2: Decide
|
|
125
|
+
[Same structure as above]
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## Phase 3: Act
|
|
130
|
+
[Same structure — this is usually the longest phase]
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
## Phase 4: Verify
|
|
135
|
+
[Same structure]
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Phase 5: Reflect
|
|
140
|
+
[Same structure]
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## Summary
|
|
145
|
+
|
|
146
|
+
### Top Pain Points (ranked)
|
|
147
|
+
1. [Biggest pain — most frustration, most friction]
|
|
148
|
+
2. [Second biggest]
|
|
149
|
+
3. [Third biggest]
|
|
150
|
+
|
|
151
|
+
### Top Delight Opportunities (ranked)
|
|
152
|
+
1. [Biggest opportunity — highest impact, most feasible]
|
|
153
|
+
2. [Second biggest]
|
|
154
|
+
3. [Third biggest]
|
|
155
|
+
|
|
156
|
+
### Story Map Impact
|
|
157
|
+
[How does this journey inform the story map?]
|
|
158
|
+
- Activity [X] exists because of step [Y] in Phase [Z]
|
|
159
|
+
- Task [A] is Must Have because Pain Point [B] is the primary reason users struggle
|
|
160
|
+
- Task [C] is Could Have because it addresses a minor friction only
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Rules
|
|
164
|
+
|
|
165
|
+
- Map the CURRENT state first (how the persona does it today, without or with the existing product). Then map the FUTURE state (how the product should change the journey). Comparing the two reveals exactly what the product must do.
|
|
166
|
+
- Pain points in the current state become Must Have features. Delight opportunities become Should Have or Could Have.
|
|
167
|
+
- Journey maps are living documents. Revisit when user research reveals new information or when the product changes significantly.
|
|
168
|
+
- One journey map is not enough. Map at least the primary persona's most important goal. Ideally map each persona's primary goal.
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# Mental Models
|
|
2
|
+
|
|
3
|
+
## What Is a Mental Model?
|
|
4
|
+
|
|
5
|
+
A mental model is the internal framework a user has for understanding how something works. It is built from prior experience — other software they've used, physical analogies, and common sense. Users don't read documentation before forming mental models. They just start using the product and expect it to behave the way they already think about the problem.
|
|
6
|
+
|
|
7
|
+
**When the product matches the mental model:** The user feels the product is intuitive. They find things where they expect them. Actions produce expected results.
|
|
8
|
+
|
|
9
|
+
**When the product conflicts with the mental model:** The user feels confused. They look in the wrong place. They click the wrong button. They call it "unintuitive" — which actually means "it doesn't match how I already think about this."
|
|
10
|
+
|
|
11
|
+
## Why Mental Models Matter
|
|
12
|
+
|
|
13
|
+
Mental models are the single most important input to information architecture and interaction design. A product with beautiful visuals but wrong mental models will be abandoned. A product with simple visuals but correct mental models will feel effortless.
|
|
14
|
+
|
|
15
|
+
## How to Identify Mental Models
|
|
16
|
+
|
|
17
|
+
### Source 1: Existing Tools
|
|
18
|
+
|
|
19
|
+
What does the persona currently use to do this job? The mental model is embedded in that tool's structure.
|
|
20
|
+
|
|
21
|
+
**Example:** A business owner who currently invoices via a Word document thinks of invoices as documents — you create one, write on it, save it, print or email it. They do NOT think of invoices as database records with states and transitions.
|
|
22
|
+
|
|
23
|
+
**Design implication:** The invoice creation flow should feel like composing a document, not filling out a database form. The "Save" action should feel like saving a document, not submitting a record.
|
|
24
|
+
|
|
25
|
+
### Source 2: Physical Analogies
|
|
26
|
+
|
|
27
|
+
What physical object or process does this domain map to in the user's mind?
|
|
28
|
+
|
|
29
|
+
**Example:** Invoicing maps to "sending a bill" — a piece of paper you hand to someone expecting payment. Payment tracking maps to a "ledger" — a list of who owes what.
|
|
30
|
+
|
|
31
|
+
**Design implication:** Use metaphors that match. An invoice list looks like a stack of papers or a ledger. A payment status looks like a checkmark next to an amount, not an abstract state machine.
|
|
32
|
+
|
|
33
|
+
### Source 3: Common Software Patterns
|
|
34
|
+
|
|
35
|
+
Users carry mental models from widely-used software. Email, file systems, shopping carts, and social feeds have trained billions of users in specific patterns.
|
|
36
|
+
|
|
37
|
+
**Common mental models to leverage:**
|
|
38
|
+
- **Inbox:** Messages arrive. You open them. You act on them or archive them.
|
|
39
|
+
- **File system:** Things live in folders. You create, rename, move, delete.
|
|
40
|
+
- **Shopping cart:** You browse, add things, review, checkout.
|
|
41
|
+
- **Spreadsheet:** Data lives in rows and columns. You sort, filter, calculate.
|
|
42
|
+
|
|
43
|
+
If your domain maps to one of these, lean into the metaphor. Don't fight it.
|
|
44
|
+
|
|
45
|
+
## Mental Model Conflicts to Avoid
|
|
46
|
+
|
|
47
|
+
### Conflict 1: Mixed Metaphors
|
|
48
|
+
Using "inbox" metaphor for notifications but "file system" metaphor for the same data when accessed from a different screen. The user encounters the same thing in two incompatible mental frameworks.
|
|
49
|
+
|
|
50
|
+
**Rule:** One mental model per domain concept. Pick it. Be consistent everywhere.
|
|
51
|
+
|
|
52
|
+
### Conflict 2: System Mental Model ≠ User Mental Model
|
|
53
|
+
Designing the UI around how the database is structured rather than how the user thinks about the problem.
|
|
54
|
+
|
|
55
|
+
**Example (bad):** Invoice has states: DRAFT, PENDING_REVIEW, APPROVED, SENT, PAID, OVERDUE, CANCELLED. That's the system model. The user thinks: "I made an invoice. I sent it. They paid it." Three states, not seven.
|
|
56
|
+
|
|
57
|
+
**Rule:** The UI exposes the user's mental model. The system model lives behind the scenes.
|
|
58
|
+
|
|
59
|
+
### Conflict 3: Forcing a New Mental Model Without Justification
|
|
60
|
+
Inventing a novel interaction pattern when a familiar one exists. Users have to unlearn before they can learn. This costs trust.
|
|
61
|
+
|
|
62
|
+
**Rule:** Only introduce a new mental model when existing patterns genuinely cannot serve the need. And when you do, provide clear onboarding that explains the new way.
|
|
63
|
+
|
|
64
|
+
## File Format
|
|
65
|
+
|
|
66
|
+
Create: `/docs/ux-research/mental-models/[persona-name]-[domain].md`
|
|
67
|
+
|
|
68
|
+
```markdown
|
|
69
|
+
# Mental Model: [Persona Name] — [Domain]
|
|
70
|
+
|
|
71
|
+
**Persona:** [Link to persona file]
|
|
72
|
+
**Domain:** [What area of the product this covers — e.g., "invoicing", "payments"]
|
|
73
|
+
|
|
74
|
+
## Current Mental Model
|
|
75
|
+
[How does this persona currently think about this domain?
|
|
76
|
+
Describe the metaphor or framework they use.]
|
|
77
|
+
|
|
78
|
+
## Source
|
|
79
|
+
[Where does this mental model come from?]
|
|
80
|
+
- Existing tool: [tool name and how it shaped the model]
|
|
81
|
+
- Physical analogy: [what real-world object/process maps to this]
|
|
82
|
+
- Common software pattern: [inbox / file system / shopping cart / etc.]
|
|
83
|
+
|
|
84
|
+
## Key Expectations
|
|
85
|
+
[What does this mental model predict the product will do?]
|
|
86
|
+
- [Expectation 1 — "I expect to find X in Y because that's where Z puts it"]
|
|
87
|
+
- [Expectation 2]
|
|
88
|
+
|
|
89
|
+
## Design Constraints
|
|
90
|
+
[How does this mental model constrain UI decisions?]
|
|
91
|
+
- [Constraint 1 — "Navigation must use [structure] because that matches how the user thinks about it"]
|
|
92
|
+
- [Constraint 2]
|
|
93
|
+
|
|
94
|
+
## Where the System Model Differs
|
|
95
|
+
[Where does the technical reality conflict with the user's mental model?
|
|
96
|
+
This is where translation is needed — the UI must hide the system model and present the user model.]
|
|
97
|
+
- [Difference 1]
|
|
98
|
+
- [Difference 2]
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Integration with Downstream Skills
|
|
102
|
+
|
|
103
|
+
Mental models directly constrain:
|
|
104
|
+
- **story-mapping:** The backbone activities should match the user's mental model of what they do, not the system's internal process names
|
|
105
|
+
- **ux-design:** Information architecture must follow the mental model's structure
|
|
106
|
+
- **bdd-specification:** Gherkin scenarios should use language that matches the mental model — "When I send the invoice" not "When I transition the invoice to SENT state"
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Personas
|
|
2
|
+
|
|
3
|
+
## What Is a Persona?
|
|
4
|
+
|
|
5
|
+
A persona is a fictional but research-grounded character representing a distinct user segment. It is not a real person — it is a composite built from patterns in user data, business analysis, and domain knowledge. The persona becomes the subject of every design decision: "Would Sarah do this? Does this help Sarah?"
|
|
6
|
+
|
|
7
|
+
## Deriving Personas from the Value Proposition Canvas
|
|
8
|
+
|
|
9
|
+
The VPC already defines who the product serves. Personas make that concrete.
|
|
10
|
+
|
|
11
|
+
### Step 1: Identify User Segments from Customer Jobs
|
|
12
|
+
|
|
13
|
+
Read `/docs/value-proposition-canvas.md`. Each distinct type of person performing a customer job is a potential persona. Not every job needs its own persona — group jobs performed by the same type of person.
|
|
14
|
+
|
|
15
|
+
**Example:**
|
|
16
|
+
```
|
|
17
|
+
Customer Jobs:
|
|
18
|
+
- "Send invoices to customers quickly" → performed by business owners
|
|
19
|
+
- "Track who owes me money" → performed by business owners
|
|
20
|
+
- "Generate financial reports for accountant" → performed by business owners
|
|
21
|
+
- "Review and approve invoices" → performed by accountants
|
|
22
|
+
|
|
23
|
+
Personas:
|
|
24
|
+
- Sarah, the business owner (covers jobs 1, 2, 3)
|
|
25
|
+
- Marcus, the accountant (covers job 4)
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Step 2: Identify Pain Points Per Segment
|
|
29
|
+
|
|
30
|
+
For each persona, pull the pains from the VPC that apply to their jobs. These become the persona's frustrations and motivations.
|
|
31
|
+
|
|
32
|
+
### Step 3: Identify Goals Per Segment
|
|
33
|
+
|
|
34
|
+
Pull the gains from the VPC. These become what the persona wants to achieve — the definition of success for them.
|
|
35
|
+
|
|
36
|
+
## What Makes a Persona Useful
|
|
37
|
+
|
|
38
|
+
A useful persona answers these questions:
|
|
39
|
+
- What is this person trying to accomplish?
|
|
40
|
+
- What do they currently do (before this product exists)?
|
|
41
|
+
- What frustrates them about the current way?
|
|
42
|
+
- What would make their life better?
|
|
43
|
+
- How technically comfortable are they?
|
|
44
|
+
- When and where do they do this work?
|
|
45
|
+
|
|
46
|
+
A useless persona is just a name and a stock photo. If you can't answer the questions above, the persona is not grounded enough to make design decisions.
|
|
47
|
+
|
|
48
|
+
## Rules
|
|
49
|
+
|
|
50
|
+
- **2–4 personas per product.** More than 4 means the product is trying to serve too many different people. Focus.
|
|
51
|
+
- **One primary persona.** The product is optimized for this person. Other personas are secondary — they benefit but are not the design target.
|
|
52
|
+
- **Personas are not job titles.** "The small business owner" is a persona segment. "Sarah, who runs a 3-person consulting firm and does her own invoicing on her phone between client meetings" is a persona.
|
|
53
|
+
- **Personas change.** Revisit when the product enters a new market or user research reveals a new segment.
|
|
54
|
+
|
|
55
|
+
## File Format
|
|
56
|
+
|
|
57
|
+
Create: `/docs/ux-research/personas/[persona-name].md`
|
|
58
|
+
|
|
59
|
+
```markdown
|
|
60
|
+
# Persona: [Name]
|
|
61
|
+
|
|
62
|
+
**Segment:** [User segment this persona represents]
|
|
63
|
+
**Primary:** Yes / No
|
|
64
|
+
**Story map activities:** [Which backbone activities this persona performs]
|
|
65
|
+
|
|
66
|
+
## Background
|
|
67
|
+
[2–3 sentences. Who is this person in their daily life? What is their context?]
|
|
68
|
+
|
|
69
|
+
## Goals
|
|
70
|
+
[What does this persona want to accomplish with the product?]
|
|
71
|
+
- [Goal 1 — pulled from VPC gains]
|
|
72
|
+
- [Goal 2]
|
|
73
|
+
|
|
74
|
+
## Frustrations
|
|
75
|
+
[What currently gets in their way?]
|
|
76
|
+
- [Frustration 1 — pulled from VPC pains]
|
|
77
|
+
- [Frustration 2]
|
|
78
|
+
|
|
79
|
+
## Current Behavior
|
|
80
|
+
[What does this persona do RIGHT NOW to accomplish their goals, without this product?]
|
|
81
|
+
- [Current workaround 1]
|
|
82
|
+
- [Current workaround 2]
|
|
83
|
+
|
|
84
|
+
## Technical Comfort
|
|
85
|
+
- **Device:** [Primary device — phone, laptop, desktop]
|
|
86
|
+
- **Comfort level:** Low / Medium / High
|
|
87
|
+
- **Expectations:** [What does this persona expect software to do? e.g., "expects to find things quickly without reading instructions"]
|
|
88
|
+
|
|
89
|
+
## Quotes
|
|
90
|
+
[Representative statements this persona would make — in their voice, not the product's]
|
|
91
|
+
- "[I spend 30 minutes every Friday manually typing invoices into a spreadsheet...]"
|
|
92
|
+
- "[I always forget to follow up on unpaid invoices until it's too late...]"
|
|
93
|
+
|
|
94
|
+
## Design Implications
|
|
95
|
+
[How does this persona constrain or inform design decisions?]
|
|
96
|
+
- [e.g., "Mobile-first — Sarah is usually between meetings when she needs to send an invoice"]
|
|
97
|
+
- [e.g., "One-tap actions — Sarah has limited time and patience for multi-step flows"]
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Persona Priority Order
|
|
101
|
+
|
|
102
|
+
When design decisions conflict between personas, the primary persona wins. Document the trade-off — don't silently ignore secondary personas. Sometimes a secondary persona's need can be accommodated without compromising the primary experience.
|