🧩 Screen-by-Screen UX Deliverables – HIGH Neuroacoustic MVP
Screen | Purpose / User Goal | Core UI Components | Key Interactions / Micro-animations | Notes for Dev & Audio Integration | Copy & Tone Notes |
1. Splash / Entry | Introduce brand identity and science-meets-serenity concept | - HIGH logo animation- Tagline: “Change your mental state on demand.”- CTA “Begin”- Optional Learn More link | - Logo fade-in with subtle wave shimmer- Gradient pulse synced to low-Hz ambient tone | Static or looping 5-sec ambient intro sound (AI-generated) | Tone = calm, confident, scientific (“powered by AI & neuroscience”) |
2. Mode Selection | Let users choose their desired state quickly | - 4 state cards or radial selector:Calm / Focus / Sleep / High Energy- Descriptive subtext- Colour-coded gradient per mode | - Tap → expands card and gently pulses- Background gradient morphs to mode colour | Selecting mode triggers internal mode_id for backend sound generation prompt | Use verbs: “Relax,” “Focus,” “Sleep,” “Energise” — short, actionable, friendly |
3. Generation Screen | Convey real-time AI sound creation | - Animated waveform / particle field- Text: “Generating your personalised sound…”- Progress spinner or percentage | - Pulsating wave amplitude increases until completion- Text flickers through micro-phrases: “Analysing,” “Mixing layers,” “Finalising” | Hook to backend endpoint for generation status; auto-progress after success | Maintain anticipation but calm pacing (“Your sound is almost ready…”) |
4. Session Preparation | Give setup guidance before playback | - Mode summary (e.g. “Focus • 10 Hz • 30 min”)- Tips: “Use headphones”, “Set volume low”- CTA: “Start Session”- Optional toggle: “Breathing overlay” | - Fade-in checklist icons- Start button glows softly on hover | When pressed, trigger audio pre-load and set playback parameters | Tone = instructive yet gentle (“Settle in, we’ll guide your focus.”) |
5. Listening Experience | Deliver immersive playback with transparency | - Central reactive visual (wave, sphere, or ring animation)- Top: Mode + Hz + timer- Bottom controls: pause / stop / adjust intensity- Nudge banner (appears once mid-session) | - Visual pulses to entrainment rate- Light glow on beat frequency- Smooth fade when pausing/resuming | Audio player syncs with visual BPM; support for monaural/isochronic layers | Copy minimal: one-line nudge only (“Too wired? Try Calm.”) |
6. Feedback Screen | Capture quick subjective response | - Question prompt: “How did that feel?”- 2–3 sliders or emoji scales (e.g., Relaxed / Focused / Intensity)- CTA “Save Feedback”- Optional micro-task trigger | - Sliders animate with spring physics- Confirmation checkmark animation | Feedback stored via API to user profile; tie to mode_id for next session tuning | Keep human, short (“Got it — we’ll fine-tune your next track.”) |
7. Summary / Results | Reinforce completion & progress | - Session recap card: Mode, Duration, Date- Trend sparkline (last 5 sessions)- CTA: “Replay” / “Try Another Mode” / “Share” | - Graph line animates upward- Confetti-like pulse (soft light, not party) | Pulls last 5 feedback entries for quick visualisation | Motivational tone (“Your mind learned today — great work.”) |
8. Dashboard / History (optional v1.1) | Show behavioural insights & encourage retention | - Weekly minutes graph- Average calm/focus score- Quick start buttons for favourite modes | - Bar chart grows on load- Floating CTA “Start New Session” | Connects to Supabase or similar DB for session logs | Informative yet personal (“You focused best on Thursday at 2 PM.”) |
9. Safety / Info / Settings | Provide transparency & trust | - Tabs: About / Safety / Terms- Text blocks + icons- Volume / theme toggles | - Accordion expansion for FAQs- Subtle hover glow | Static page; link accessible during or after sessions | Neutral, factual tone (“May support focus and relaxation; not a treatment.”) |
🧠 Global UI & Interaction System
Element | Spec / Guideline |
Colour System | Each mental state has a dedicated gradient palette:Calm – lavender → blue; Focus – teal → aqua; Sleep – navy → indigo; High Energy – amber → magenta. |
Typography | Manrope or Inter. Use bold for mode titles, light for body text. |
Motion Timing | Ease-in-out, 600–1000 ms. Never abrupt. |
Icon Style | Rounded line icons; minimal. |
Accessibility | Min 16 pt text, 48 px tap areas, WCAG AA contrast. |
Audio-Reactive Visuals | BPM or frequency-linked animation parameter for DAW export testing. |
Copywriting Rules | Use “may help,” “may support,” “can guide.” Avoid therapeutic claims. |
🧾 Deliverables Checklist (for Figma handoff)
- App map (flow diagram + states).
- Wireframes (Lo-Fi) – all 9 screens.
- Component library – buttons, sliders, modals, cards, gradients.
- Hi-Fi visual system – colour, type, shadows, motion specs.
- Prototyped transitions – especially 3→4 (Generation→Playback).
- Audio-sync spec sheet – Hz→visual pulse rate mapping.
- Style guide page – tone, voice, spacing, icon grid.