Men’s Health Get Back in Shape App

Offering a personalized workout program tailored to all fitness levels.

Men’s Health aimed to develop an app based on a series of 20 day workouts designed to help users rebuild their fitness with ease. The app needed to deliver structured, on-the-go programs tailored to all fitness levels, offering personalized guidance and motivation to help users get back in shape anytime, anywhere.

Role:

Lead Product Designer

Industry:

Fitness

Duration:

6 months

Collaborating with two designers and fitness experts at Men’s Health, we developed the app based on subscriber testing to identify user needs. Over 130 exercises were crafted with expert input, photographed, and transformed into animated GIFs with added tips for quick for guidance. Featuring tailored plans, progress tracking, and an intuitive design, the app offered easy use in gyms or on the go, empowering users to achieve their fitness goals with confidence.

Primary design focus areas:

Personalized Fitness Plans:

We used a Swedish-inspired design with clean aesthetics and strategic colors, customizing navigation for iOS and Android to ensure a cohesive, user-friendly experience.

Visual Design:

By allowing users to log reps, track performance, and monitor progress over time, the app fosters a sense of achievement and supports long-term user retention and goal completion.

Progress Tracking:

The app tailors workout plans to the user's fitness level through a guided fitness assessment with real-time feedback, ensuring users begin with exercises suited to their abilities and goals.

Our high-fidelity wires needed upgrades based on testing

Based on these wires here is some of the feedback:

  • Incorporate progress indicators or gamified elements, such as streak trackers and badges, to boost user engagement.

  • Enable auto-advance to transition seamlessly between workouts, reducing reliance on manual buttons.

  • During rest periods, display inspirational quotes to encourage self-care and reflection between sets.

  • Integrate more Swedish design into the UI elements, enhancing the visuals with a bold, graphic, and playful style of Men’s Health.

Based on feedback, we upgraded the UI to a bold, playful design including:

  • Personalized Experience: User-specific welcome, progress tracking, and motivational tips.

  • Progress Tracking: Visual weight logs and motivational messages.

  • Exercise Guidance: Step-by-step instructions with images and tips.

  • Timers & Indicators: Countdown timers and progress bars for tracking.

  • Motivation: Inspirational quotes during rest periods.

  • Accessibility: Alternative exercise options for all fitness levels.

  • Clean UI: Intuitive navigation and minimalist design.

  • Brand Integration: Bold Men’s Health branding and cohesive color palette.

Challenge to Address: Exercise rendering demanded special focus, with the following key objectives prioritized to enhance build quality:

  • Performance Testing: Evaluate GIF playback across diverse Android and iOS devices to ensure smooth performance and proper scaling on various screen sizes and resolutions.

  • Optimization: Minimize GIF file sizes to reduce loading times and prevent animation lag, particularly on lower-end Android devices.

We considered future features like syncing with fitness trackers for automatic data input, optional voice guidance for exercises, immediate feedback after the fitness test as things to look out for as we continued perfecting the app.

Check out the prototype created in figma.

Other Projects