[Research] UX Analysis: Above/Below Fold, Onboarding Patterns, and Usability Studies

[jbdevprimary]

Summary

Our Canva brand kit has well-developed branding and screen designs, but we lack UX research to validate usability. This issue tracks the research needed to evolve our designs based on proven patterns.

Research Areas

1. Above/Below Fold Analysis

• Analyze what content should be immediately visible on app load
• Study mobile viewport heights across devices (iPhone SE to iPad Pro)
• Determine critical CTAs that must be above fold
• Test welcome screen fold behavior across screen sizes

2. Successful App Patterns

• Study onboarding flows from successful mobile apps (Notion, Linear, Figma mobile, etc.)
• Analyze multi-step onboarding patterns (skip behavior, progress indicators)
• Research mobile-first authentication flows
• Document what works for developer tool mobile apps

3. React Native Web Quirks

• Document React Native web rendering timing issues
• Analyze Pressable/TouchableOpacity behavior differences
• Test animation performance across browsers
• Identify scroll/visibility edge cases

4. Usability Studies

• Define user personas for ThumbCode
• Create task-based usability test scripts
• Plan remote usability testing sessions
• Document accessibility requirements (WCAG AA compliance)

Context

Several E2E tests are currently skipped pending this research:

• Dashboard visibility tests
• Full onboarding flow tests
• Chat page interaction tests
• Agents page interaction tests

See: `e2e/web/interactions.spec.ts` and `e2e/web/dashboard.spec.ts`

Deliverables

1. UX Research Document in `/memory-bank/`
2. Updated Canva designs based on findings
3. Re-enabled E2E tests with proper assertions
4. Mobile-first design guidelines

[jbdevprimary]

This research has been completed as part of PR #64 (Production UI/UX Research).

The comprehensive UX research report is available at memory-bank/UX-RESEARCH-REPORT.md and includes:

• Above/below fold analysis
• Thumb zone design principles
• Onboarding flow research (Notion, Linear, Figma)
• Developer tool mobile patterns
• Progressive disclosure model
• Full codebase audit

See PR #64 for the implementation roadmap and ongoing work.