Welcome to Your Personal Health Journey
Design a multi-step onboarding flow for a modern mobile health app called "My Life Coach". Target platform: mobile-first (iOS + Android), using React Native (or HTML/CSS responsive), with clean UI, rounded cards, smooth transitions. 💡 Use card-style UI, swipe or step-dots for navigation. Each screen = 1 step. Multi-select chips or radio button where appropriate. Stick a bottom CTA: "Next", and on last step: "Finish Onboarding". Total steps: 7 --- 🟩 Step 1a – Gender (radio buttons): Title: "What's your gender?" Options: - Male - Female - Other / Prefer not to say 🟩 Step 1b – Age Range (radio buttons): Title: "How old are you?" Options: - Under 18 - 18–24 - 25–34 - 35–44 - 45–54 - 55+ 🟩 Step 1c – Height (slider/input): Title: "What's your height?" Input: Slider from 120–220cm Or input field (number) 🟩 Step 1d – Weight (slider/input): Title: "What's your weight?" Input: Slider from 40–160kg Or input field (number) --- 🟦 Step 2 – Goal (multi-select chips): Title: "What are your fitness goals?" Options (choose multiple): - Lose fat - Maintain current shape - Gain muscle - Build endurance - Reduce stress - Improve energy --- 🟨 Step 3 – Activity Level (radio buttons): Title: "How active are you?" Options: - Low (sedentary lifestyle) - Moderate (light workouts 2–3x/week) - High (frequent workouts 4+ times/week) --- 🟪 Step 4 – Diet Preferences (multi-select chips): Title: "Do you follow a specific diet?" Options: - Eat Clean - Keto - Intermittent Fasting - Low Carb - High Protein - Vegetarian - Vegan - Gluten-Free - None --- 🟫 Step 5 – Allergies (multi-select chips with custom input): Title: "Any food allergies?" Options: - Dairy - Gluten - Nuts - Shellfish - Eggs - Soy - Pork - Beef Allow custom input with chip creation --- 🔵 Step 6 – Sleep / Wake Time (2 time pickers): Title: "Your usual sleep schedule" Fields: - Sleep Time: time picker (HH:mm) - Wake Time: time picker (HH:mm) Optional: Intermittent Fasting Window (12pm–8pm) --- 🔴 Step 7 – Stress Level (emoji slider): Title: "How would you rate your stress?" UI: slider or emoji (😌 → 😩) Label scale: Very Low → Very High --- ✅ Final CTA: "Finish Onboarding" - Button full-width - Save input data - Redirect to Home / Dashboard screen - Show welcome toast: "You're all set 🎉" Make the overall onboarding UI feel friendly, warm, professional. Use soft colors, emoji where suitable, rounded cards, floating CTA on each screen.
