diff --git a/launch/roadmaps/v1.0.1-experience-brief.md b/launch/roadmaps/v1.0.1-experience-brief.md index 31739f4..db26a70 100644 --- a/launch/roadmaps/v1.0.1-experience-brief.md +++ b/launch/roadmaps/v1.0.1-experience-brief.md @@ -1,6 +1,6 @@ # Focus Seed 1.0.1 Experience Brief -Status: approved product direction, visual route not yet selected. +Status: approved product and design principles, visual route not yet selected. ## Product Intent @@ -16,9 +16,11 @@ Every screen and feature should strengthen this loop. Generic feature accumulati ## Design Principles -1. One coherent visual language - - Do not mix clay, cyberpunk, glass, paper, and flat Material styles indiscriminately. - - Select one primary direction after reviewing three complete visual routes. +1. Coherence without genre constraints + - Clay, cyberpunk, glass, paper, floating surfaces, editorial layouts, and other labels are exploration vocabulary, not requirements or exclusions. + - Derive the visual language from the product's calm focus loop, information hierarchy, interaction needs, audience, accessibility, localization, and performance constraints. + - Select one primary visual grammar after reviewing three complete routes. A small secondary contrast is welcome when it makes a meaningful state, reward, or transition clearer and more memorable. + - Do not mix styles casually or pursue novelty at the expense of clarity. Every visible difference must have a product reason. - The chosen route must work in light/dark mode, on low-end Android devices, and across supported languages. 2. Interaction before decoration @@ -54,21 +56,30 @@ Every screen and feature should strengthen this loop. Generic feature accumulati ## Visual Direction Gate -Before implementation, create and review exactly three full-screen directions using the same Today and Timer content: +Before implementation, create and review exactly three materially different full-screen directions using the same Today and Timer content. Generate these routes from the product brief each time rather than filling fixed style categories. -1. Organic Clay Growth, recommended starting point - - Soft dimensional seed/growth objects, restrained tactile depth, calm teal and warm yellow. - - Strong brand fit without turning the whole UI into toy-like clay controls. +The routes may use any visual tradition or combination that has a defensible product rationale. Organic clay, quiet precision, botanical editorial, cyberpunk, glass, paper, spatial depth, or a new hybrid are examples only. No genre receives automatic preference or rejection. -2. Quiet Precision - - Crisp typography, calm surfaces, subtle floating depth, high information clarity. - - Best for long-term productivity credibility and accessibility. +Each route must show how its visual choices improve: -3. Botanical Editorial - - More expressive type and organic composition, grounded by functional controls. - - Stronger emotional identity but higher localization and layout risk. +- Task clarity and one-handed ease of use +- Calmness, comfort, and low cognitive load +- Immediate tap, state, transition, and completion feedback +- Brand recognition and the seed-growth metaphor +- Accessibility, localization, dark mode, and responsive layouts +- Smooth rendering and restrained battery use on ordinary Android devices -Cyberpunk is not the default recommendation for this product. It can look striking, but its high-energy visual language conflicts with calm focus and broad global accessibility unless research demonstrates a specific audience fit. +Evaluate the three routes with the same weighted scorecard: + +- Usability and task clarity: 30% +- Comfort and cognitive load: 20% +- Interaction and motion coherence: 15% +- Visual hierarchy and readability: 15% +- Distinctiveness and emotional appeal: 10% +- Accessibility and global adaptability: 5% +- Performance feasibility: 5% + +The highest score is not automatically selected. Resolve any weak core-flow score first, then use informed visual judgment to choose the most compelling complete experience. The chosen visual route must define: @@ -77,6 +88,7 @@ The chosen visual route must define: - Surface/elevation model - Icon treatment - Illustration/growth system +- Rules for deliberate visual contrast and where it is not allowed - Navigation and tab behavior - Dialog, sheet, menu, snackbar, empty, loading, error, success, and destructive states - Motion curves and durations