UX/UI Designer for Health & fitness App & Website
Budget: £250 – £750 GBP
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.
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.