Angi design recommendations (canonical UI/UX issue)

[mps]

Problem statement

The current UX for talk-easy (focused on conversation/communication practice workflows) appears functional but likely has avoidable friction around first-run clarity, primary action prominence, and ongoing engagement loops. We need one canonical UI/UX issue to track concrete recommendations and execution quality.

Concrete findings

1. Hierarchy ambiguity: Primary action and secondary controls compete visually, making the core next step less obvious.
2. State communication gaps: Empty/loading/success/error states are inconsistent, reducing user confidence when data is delayed or unavailable.
3. Engagement drop-off risk: Progress, streak, and feedback moments are under-emphasized, which weakens habit reinforcement over time.
4. Input ergonomics debt: High-frequency forms and numeric/text entry patterns require extra taps and context switching.

UX recommendations

• Establish a clear single primary CTA per screen with predictable placement and contrast.
• Standardize system state patterns (loading skeleton, empty-state guidance, error recovery CTA, success confirmation).
• Promote motivational surfaces (progress, streaks, milestones) into top-third layout zones on key tabs.
• Reduce input friction using inline pickers, stepper/keypad affordances, and remembered defaults.
• Improve accessibility baseline: Dynamic Type resilience, tappable target size, VoiceOver labels, and color-contrast compliance.

Implementation guidance

• Create/update a lightweight design token map for spacing, typography scale, color roles, and component states.
• Refactor top 3 user flows first (onboarding, primary daily action, review/history) before broad visual polish.
• Introduce reusable UI components for cards, status banners, empty states, and CTA bars to avoid per-screen drift.
• Add instrumentation for funnel steps, abandon points, and repeat-use rates to validate UX impact.
• Ship in phased PRs to keep scope reviewable and reduce regression risk.

Acceptance criteria

• Core flows define one clear primary action per screen and remove competing emphasis.
• Empty/loading/error/success states are implemented consistently across critical screens.
• Top motivation/progress element is visibly prominent in primary app surfaces.
• High-frequency data entry takes fewer taps than current baseline (documented before/after).
• Accessibility checks pass for Dynamic Type, VoiceOver labels, minimum target size, and contrast.
• Analytics events exist for key UX funnel steps and are validated in debug/QA.

Notes

This is the canonical Angi tracking issue for talk-easy. Follow-up audits and implementation PRs should link back here.