App & Website – Designer Requirements Summary This document summarises **design requirements only** for a designer working on **both the mobile app and the marketing website**. It focuses on UX, UI, tone, and structural expectations — not development or technical implementation. The designer will be responsible for creating a **cohesive visual system** used across the app and website. --- ## 1. Overall Design Principles (Applies to App & Website) **Core qualities** * Calm, supportive, and non-intimidating * Clear, simple, and confidence-building * Ethical, non-judgmental, and non-extreme **Must avoid** * Aggressive fitness imagery * Diet culture language or visuals * Cluttered screens * Social-media-style layouts **Tone & Feel** * Friendly and encouraging * Educational rather than prescriptive * Inclusive of beginners and vulnerable users --- ## 2. Brand & Visual Direction **Style guidance** * Clean, modern, minimal * Soft colour palette (not harsh or high-contrast) * Clear typography prioritising readability * Icons over heavy illustrations where possible **Accessibility** * Strong contrast for readability * Clear font sizing * Touch-friendly spacing --- ## 3. App Design Requirements ### Target Platforms * iOS * Android ### App Structure **Primary navigation tabs** * Workouts * Diet * Anxiety * Goals * Progress * Booking (business users) * Learn **Design rules** * One primary purpose per screen * Minimal choices per screen * Clear hierarchy (primary action always obvious) --- ### Key App Flows to Design **Onboarding (under 5 minutes)** * Friendly, low-friction data collection * Clear progress indicators * Safety-focused messaging **Workout experience** * Time-based workout presentation * Clear start / pause / finish states * Simple exercise cards (video + key cues) **Recovery & wellbeing** * Calm presentation for sleep and tiredness inputs * Anxiety button with guided breathing flow **Goals & progress** * Visual progress indicators (calendar, muscle coverage) * Encouraging feedback (no shame-based visuals) **Booking & messaging (business users)** * Simple calendar view * Clear separation between consumer and business features --- ### App Visual Components Needed * Buttons (primary / secondary) * Cards (workouts, exercises, goals) * Progress indicators * Icons for workouts, diet, recovery, anxiety * Empty states (friendly, reassuring) * Error and safety warning states (supportive tone) --- ## 4. Marketing Website Design Requirements ### Website Purpose * Explain the app clearly * Build trust * Drive downloads and sign-ups The website **explains**. The app **delivers**. --- ### Website Pages to Design (MVP) * Home (conversion-focused) * How It Works * Features * Pricing * For Gyms & PTs * FAQ * Contact --- ### Website UX Requirements **Home page** * Clear value proposition above the fold * Two clear CTAs: * Get the App * For Gyms & PTs * App mockups used prominently **Content style** * Short sections * Plain language * No technical explanations --- ### Website Visual Requirements * Mobile-first layouts * Fast-loading, lightweight visuals * Consistent design system with the app * Clear CTA placement on every page --- ## 5. Things Explicitly Out of Scope for Design * Medical visuals or diagnostics * Extreme body transformation imagery * Social feeds or community walls * Detailed workout plans or calculators on the website --- ## 6. Designer Deliverables Expected **App** * High-fidelity mobile designs (iOS-first, adaptable to Android) * Core user flows * Component library / design system **Website** * Responsive page designs (mobile, tablet, desktop) * Homepage and all MVP pages * Shared design language with the app **General** * Figma files (or equivalent) * Reusable components and styles * Clear handoff-ready designs for developers --- ## 7. Success Criteria for Design * User understands purpose of app/website immediately * App feels supportive, not overwhelming * Navigation feels obvious without explanation * Website converts without feeling sales-heavy * Design supports safety and wellbeing goals --- ## 8. Open to Designer Input * Colour palette suggestions * Typography choices * Icon style * Micro-interactions and motion (kept subtle) Designer creativity is encouraged **within the safety-first, calm framework** described above.