More
Сhoose

Creative

Thoughtful

Excellence

hectorosunadesign.com

FitNudge — All-in-One Fitness App UI/UX Case Study

Read more
  • Project: FitNudge — Mobile Fitness Companion App
  • Role: Product Designer · UX Researcher · UI Designer
  • Date: 2025
  • Scope: User Research, Information Architecture, Wireframes, Design System, Figma Prototyping, Accessibility
Objective

Build an all-in-one fitness app that keeps users consistent by unifying movement, nutrition, wellness, progress, and community—reducing app-switching and increasing accountability with personalized nudges.

Survey (Google Forms) Information Architecture
Problem Statement

People struggle to stay consistent with fitness because tools are fragmented and lack personalization. FitNudge asks: How might we design the ultimate personal fitness companion to support long-term commitment? The solution: a single mobile app combining customized workouts, nutrition, holistic wellness, and community engagement.

User Research Highlights
  • 20 survey participants in 48 hours (IG/Discord/Facebook).
  • 75% female; 50% aged 25–35; 2 with dietary restrictions.
  • 75% train 3–6 days/week; most use a wearable or app.
  • Top goals: build muscle, lose fat, age well.
Frustrations & Pain Points
  • Consistency drops when routines/schedules change.
  • Cost vs. value mismatch; progress not visible.
  • Low customization and app-switching fatigue.
Survey-Driven Insights
  • 35% use fitness apps; 35% use reward systems.
  • 25% have an accountability partner; 15% have a coach.
  • 45% track nutrition; 55% do not.
Personas

Jessica Brown, 29 — Marketing Coordinator (Austin, TX)

  • Motivation: 4–5 workouts/week; mix of lifting & yoga; values journaling.
  • Goals: Build muscle, lose fat, maintain consistency & balance.
  • Pain: Loses motivation without personalization/community; tracking can feel like a chore.
  • Prefs: Journaling, mood tracking, dashboards, reward systems.

Adrian Cruz, 31 — UX Designer (Los Angeles, CA)

  • Motivation: 4–5 lifting sessions/week; loves efficient, clean tools.
  • Goals: Gain muscle, avoid burnout/injuries, stay consistent.
  • Pain: Generic apps; poor wearable sync; over/under-tracking nutrition.
  • Prefs: Clean UI, progress graphs, gym-specific libraries.
MVP — Key Features
  • Onboarding & Personalization: goals, experience, preferences → tailored guidance.
  • Movement: build plans, daily logs, weekly splits, progressive-overload suggestions, wearable sync.
  • Nutrition: macro targets from weight/goals, daily meal logs, weekly check-ins, saved/curated recipes.
  • Wellness: meditations, breathing, journal prompts, sleep tips.
  • Progress: calendar, graphs, trends, algorithm updates, badges & challenges.
  • Community: friends, groups, forums, monthly challenges, playlist sharing.
Naming

After exploring ElevateYou, Self-Evidence, LevelUp, FitPulse, VibeUp, we chose FitNudge—a companion that nudges users with personalized recommendations and accountability.

Information Architecture

Bottom nav: Programs, Progress, Library, Community; top-level Profile. Programs → My Nutrition, My Movement, My Wellbeing. The structure emphasizes personalization, simplicity, and relevance.

View IA in Figma
Process
  • Research → requirements & success metrics (consistency, CTR to logs, challenges joined).
  • IA & user flows → low-fidelity wireframes → high-fidelity prototypes in Figma.
  • Design system foundations: tokens, type scale, spacing, components (variants & Auto Layout).
  • Accessibility: WCAG-aligned contrast, focus states, clear affordances.
Registration / Onboarding Wireframes

Simple 3-step flow with social sign-in, clear input hierarchy, and a success confirmation to reduce friction and set expectations.

View Wireframes
Movement Wireframes

Today’s workout, set logging, media/description, notes, and swipe to complete—optimized for fast, focused sessions.

View Wireframes
Wellness Wireframe

Clear navigation and error-recovery affordances; modular categories for stress, hydration, sleep, and journaling.

View Wireframes
Nutrition & Progress Wireframes

Intuitive logging for meals and weight plus trend views for calories, macros, and body metrics to reinforce habit loops.

View Wireframes
Community Wireframes

Social accountability via groups, progress posts, and playlist sharing—lightweight and fun to sustain motivation.

View Wireframes
High-Fidelity Prototypes (Figma)

Onboarding:

Open Prototype

Movement:

Open Prototype

Nutrition:

Open Prototype
Accessibility & Quality
  • WCAG-aligned color contrast, visible focus states, semantic hierarchy.
  • Mobile-first patterns; thumb-friendly tap targets; concise microcopy.
  • Design tokens + components (variants & constraints) for consistency and speed.
Impact

FitNudge consolidates fragmented tools into a personalized, habit-forming experience. The system is ready for usability testing and iteration—built to scale features, reduce app-switching, and improve consistency through nudges, progress feedback, and community accountability.

Need research-driven mobile UI that users love?

Let’s turn fitness goals into daily habits.