Fitness Website How It Works Section Examples

30 real how it works sections from 23 fitness websites

There are 30 how it works sections here, cut from 23 live fitness websites such as Superpower, Headspace and Strava. 12% of the health & fitness sites in the library have a how it works section, higher than the 6% across all websites. 96% of them are light-themed and the most common headline fonts are Nb international pro webfont (1), Headspace Apercu (1) and Boathouse (1).

At a glance

How it works sections: 30
Sites: 23 of 192 health & fitness sites (12%)
Library-wide: 6% of all websites have one
Per site: 1.3 on average
Light / dark: 96% light · 4% dark
Top heading fonts: Nb international pro webfont (1), Headspace Apercu (1) and Boathouse (1)
Accent colours: blue 9neutral 4orange 4
Leading sites: Superpower, Headspace and Strava

What makes a good how it works section on a fitness website

How-it-works sections reduce a product to three or four steps, each with a small visual, so a visitor can picture using it. Health and fitness products pair aspirational imagery with proof: outcomes, credentials and membership pricing. Compare these examples with how it works sections from every industry, or see the full homepages on the fitness website templates page.

What these 30 how it works sections have in common

On average each one carries 3.8 images or icons, 1.0 buttons and 0.7 links. 4% sit on a dark background, and 41% are taller than half their width — most are compact bands rather than full screens. Headlines range from “Your Complete Care journey” (Parsley Health), “360° clean, three simple steps, A system for every need.” (Oral-B) to “How Maple works” (Maple).

7 how it works sections worth studying

Superpower — “How it works”: It starts with an advanced health check, then so much more. 1 Build your baseline Your first blood draw gives you a comprehensive view of your… (1 buttons, 5 images, background #ffffff).
Headspace: Who we are Think of Headspace as your everyday mental health companion, making it easy to put your mind first with personalized support – from self-guided… (0 buttons, 6 images).
Strava — “It's easy to get started.”: Sign up or log in to your free Strava account. If you’re already subscribed, cancel your current plan first. Add up to three more members. Share… (0 buttons, 3 images, background #ffffff).
Runna — “How it works”: Runna is simple, intuitive, and designed for runners of all levels. Whether you're training for your first 5K or looking to smash a marathon PB, you'll… (1 buttons, 4 images, background #ffffff).
Ultrahuman — “How it works”: Submit a brief application for an Ultrahuman Ring AIR developer kit. Applications will be reviewed and priority will be given to applicants creating an app that… (1 buttons, 4 images, background #eeeeee).
Talkspace — “How to get started”: 1 After we receive your application, we’ll reach out via email. 2 You'll have access to a variety of live, asynchronous, and self guided training resources.… (2 buttons, 8 images, background #ffffff).
Massage Envy — “The six steps to Massage Envy franchise ownership:”: Introduction Call with the Sales Team Review Franchise Disclosure Document Complete an Application (0 buttons, 4 images, background #e0fcff).

How to use these how it works references

Count the steps and look at how each is illustrated; three or four steps with one visual each is the common pattern. For a health or fitness brand, look at how outcomes, credentials and membership offers are balanced with aspiration. Start with Superpower, Headspace and Strava, click a section to open it at full size and copy its build prompt, palette and fonts.