Skill Tracer
Skills › BMAD Method › bmad-ux › experience-example-mobile.md

experience-example-mobile.md

112 lines · skills/bmad-ux/assets/experience-example-mobile.md at bd70c64

Open on GitHub
1---
2name: Quill
3status: final
4sources:
5 - ../prd-quill/prd-quill.md
6updated: 2025-09-02
7---
8
9# Quill — Experience Spine
11> Illustrative example. Single-surface mobile (iOS + Android parity). Consumer posture, calm by default. Paired with `design-example-mobile.md` (Quill DESIGN.md). Demonstrates: microcopy as gating discipline, Inspiration & Anti-patterns earning its place, Responsive & Platform omitted (single-surface).

Quill — Experience Spine

Illustrative example. Single-surface mobile (iOS + Android parity). Consumer posture, calm by default. Paired with design-example-mobile.md (Quill DESIGN.md). Demonstrates: microcopy as gating discipline, Inspiration & Anti-patterns earning its place, Responsive & Platform omitted (single-surface).
Raw lines 1 to 12
13## Foundation
15Single-surface mobile, iOS + Android with parity. No UI system named — inherits platform conventions for navigation, system gestures, dynamic type. `DESIGN.md` is the visual identity reference; this spine is the experience. Dark mode is the default surface; light is a setting.

Foundation

Single-surface mobile, iOS + Android with parity. No UI system named — inherits platform conventions for navigation, system gestures, dynamic type. DESIGN.md is the visual identity reference; this spine is the experience. Dark mode is the default surface; light is a setting.

Raw lines 13 to 16
17## Information Architecture
19| Surface | Reached from | Purpose |
20|---|---|---|
21| Today | App open (cold) | Today's prompt + entry composer |
22| Library | Tab bar | Past entries, searchable |
23| Entry detail | Library row tap | Read / edit one entry |
24| Settings | Today header gear | Account, export, theme |
26Bottom tab bar (Today / Library / Settings). No drawer. Modal stacks one level deep, never two.
28→ Composition reference: `mockups/today-cold.html`, `mockups/composer.html`. Spine wins on conflict.

Information Architecture

SurfaceReached fromPurpose
TodayApp open (cold)Today's prompt + entry composer
LibraryTab barPast entries, searchable
Entry detailLibrary row tapRead / edit one entry
SettingsToday header gearAccount, export, theme

Bottom tab bar (Today / Library / Settings). No drawer. Modal stacks one level deep, never two.

→ Composition reference: mockups/today-cold.html, mockups/composer.html. Spine wins on conflict.

Raw lines 17 to 29
30## Voice and Tone
32Microcopy. Brand voice and aesthetic posture live in `DESIGN.md`.
34| Do | Don't |
35|---|---|
36| "Today's prompt." | "Time to write!" |
37| "Saved." | "✓ Auto-saved successfully" |
38| "We couldn't reach the cloud — your work is on this device." | "Network error" |
39| Short, complete sentences. | Streak counters, encouragement, exclamation marks. |

Voice and Tone

Microcopy. Brand voice and aesthetic posture live in DESIGN.md.

DoDon't
"Today's prompt.""Time to write!"
"Saved.""✓ Auto-saved successfully"
"We couldn't reach the cloud — your work is on this device.""Network error"
Short, complete sentences.Streak counters, encouragement, exclamation marks.
Raw lines 30 to 40
41## Component Patterns
43Behavioral. Visual specs live in `DESIGN.md.Components`.
45| Component | Use | Behavioral rules |
46|---|---|---|
47| Prompt card | Today | One per day. Tap opens composer. |
48| Composer | Today + entry detail | No formatting toolbar in v1. Autosave on pause ≥ 600ms. |
49| Entry row | Library list | Tap → entry detail. Long-press reserved for system text selection. |
50| Save indicator | Composer header | Cycles `Editing…` → `Saved.` (≥ 800ms visible). |
51| Settings row | Settings list | Tap → detail or toggle. |

Component Patterns

Behavioral. Visual specs live in DESIGN.md.Components.

ComponentUseBehavioral rules
Prompt cardTodayOne per day. Tap opens composer.
ComposerToday + entry detailNo formatting toolbar in v1. Autosave on pause ≥ 600ms.
Entry rowLibrary listTap → entry detail. Long-press reserved for system text selection.
Save indicatorComposer headerCycles Editing… → Saved. (≥ 800ms visible).
Settings rowSettings listTap → detail or toggle.
Raw lines 41 to 52
53## State Patterns
55| State | Surface | Treatment |
56|---|---|---|
57| Cold open | Today | Show today's prompt (cached). If no cache, `Today's prompt is loading.` with skeleton. |
58| Empty library | Library | `No entries yet — Today's prompt is your first.` Link to Today. |
59| Search empty | Library search | `No matches.` No suggestions. |
60| Offline write | Composer | Save locally. No banner. Sync on next foreground. |
61| Sync error | Settings → Account | Surfaced here only. Never block writing. |
62| Focus | Composer | Native cursor + keyboard. No custom focus chrome. |

State Patterns

StateSurfaceTreatment
Cold openTodayShow today's prompt (cached). If no cache, Today's prompt is loading. with skeleton.
Empty libraryLibraryNo entries yet — Today's prompt is your first. Link to Today.
Search emptyLibrary searchNo matches. No suggestions.
Offline writeComposerSave locally. No banner. Sync on next foreground.
Sync errorSettings → AccountSurfaced here only. Never block writing.
FocusComposerNative cursor + keyboard. No custom focus chrome.
Raw lines 53 to 63
64## Interaction Primitives
66- Tap to act. Long-press reserved for system text selection.
67- Swipe-to-delete on entry rows (native pattern, confirm sheet).
68- Pull-to-refresh on Library only.
69- **Banned:** carousels, hero animations on open, badge counts, streaks, push-notification re-engagement.

Interaction Primitives

  • Tap to act. Long-press reserved for system text selection.
  • Swipe-to-delete on entry rows (native pattern, confirm sheet).
  • Pull-to-refresh on Library only.
  • Banned: carousels, hero animations on open, badge counts, streaks, push-notification re-engagement.
Raw lines 64 to 70
71## Accessibility Floor
73Behavioral. Visual contrast lives in `DESIGN.md`.
75- VoiceOver / TalkBack: every interactive element labeled with role + state. Save indicator announces `Saved` on transition.
76- Dynamic type honored through `DESIGN.md` typography tokens. UI must remain legible at largest setting — no truncated controls.
77- Reduce Motion: skip the save-indicator fade; show `Saved.` immediately.
78- Tap targets ≥ 44pt (iOS) / 48dp (Android).
79- Focus traversal follows reading order on every surface.

Accessibility Floor

Behavioral. Visual contrast lives in DESIGN.md.

  • VoiceOver / TalkBack: every interactive element labeled with role + state. Save indicator announces Saved on transition.
  • Dynamic type honored through DESIGN.md typography tokens. UI must remain legible at largest setting — no truncated controls.
  • Reduce Motion: skip the save-indicator fade; show Saved. immediately.
  • Tap targets ≥ 44pt (iOS) / 48dp (Android).
  • Focus traversal follows reading order on every surface.
Raw lines 71 to 80
81## Inspiration & Anti-patterns
83- **Lifted from Day One:** the single daily entry framing — one prompt, one composer, no inbox.
84- **Lifted from iA Writer:** the no-toolbar composer; formatting is a settings-level decision, not a per-entry one.
85- **Rejected — Streaks (Duolingo, most habit apps):** streaks weaponize the user's calendar. Quill's value is showing up *today*, not punishing missed days.
86- **Rejected — AI prompt suggestions inside the composer:** the composer is for writing, not negotiating with a model. AI lives only in the daily prompt generation.

Inspiration & Anti-patterns

  • Lifted from Day One: the single daily entry framing — one prompt, one composer, no inbox.
  • Lifted from iA Writer: the no-toolbar composer; formatting is a settings-level decision, not a per-entry one.
  • Rejected — Streaks (Duolingo, most habit apps): streaks weaponize the user's calendar. Quill's value is showing up today, not punishing missed days.
  • Rejected — AI prompt suggestions inside the composer: the composer is for writing, not negotiating with a model. AI lives only in the daily prompt generation.
Raw lines 81 to 87
88## Key Flows

Key Flows

Raw lines 88 to 89
90### Flow 1 — Daily write (Mira, late evening, after work)
921. Mira opens app.
932. Today surface shows today's prompt (cached if offline).
943. She taps the composer entry point.
954. Composer opens, keyboard active.
965. She writes; autosave fires on pause.
976. She taps Back.
987. **Climax:** Today surface shows `Saved.` and the entry's first line below the prompt — proof the day is captured.
100Failure: cold prompt fetch fails → composer still opens with cached generic prompt; banner on Today only after Mira returns.

Flow 1 — Daily write (Mira, late evening, after work)

  1. Mira opens app.
  2. Today surface shows today's prompt (cached if offline).
  3. She taps the composer entry point.
  4. Composer opens, keyboard active.
  5. She writes; autosave fires on pause.
  6. She taps Back.
  7. Climax: Today surface shows Saved. and the entry's first line below the prompt — proof the day is captured.

Failure: cold prompt fetch fails → composer still opens with cached generic prompt; banner on Today only after Mira returns.

Raw lines 90 to 101
102### Flow 2 — Recall past entry (Mira, three weeks later, looking for what she wrote about her mother)
1041. Mira taps Library.
1052. Scrolls or searches.
1063. Taps entry row.
1074. Entry detail opens in read mode.
1085. She taps anywhere to enter edit mode (cursor at tap point).
1096. Edits autosave.
1107. **Climax:** `Saved.` visible in entry header — the older self and the present self are in continuous conversation.
112Empty state: no entries → message routes back to Today.

Flow 2 — Recall past entry (Mira, three weeks later, looking for what she wrote about her mother)

  1. Mira taps Library.
  2. Scrolls or searches.
  3. Taps entry row.
  4. Entry detail opens in read mode.
  5. She taps anywhere to enter edit mode (cursor at tap point).
  6. Edits autosave.
  7. Climax: Saved. visible in entry header — the older self and the present self are in continuous conversation.

Empty state: no entries → message routes back to Today.

Raw lines 102 to 112