Lifestyle Website How It Works Section Examples

42 real how it works sections from 34 lifestyle websites

There are 42 how it works sections here, cut from 34 live lifestyle websites such as Bumble, Readwise and Bloomscape. 11% of the lifestyle sites in the library have a how it works section, higher than the 6% across all websites. 100% of them are light-themed and the most common headline fonts are Bumble Sans (1), Charter (1) and Nib (1).

At a glance

How it works sections: 42
Sites: 34 of 303 lifestyle sites (11%)
Library-wide: 6% of all websites have one
Per site: 1.2 on average
Light / dark: 100% light · 0% dark
Top heading fonts: Bumble Sans (1), Charter (1) and Nib (1)
Accent colours: blue 16yellow 5green 3
Leading sites: Bumble, Readwise and Bloomscape

What makes a good how it works section on a lifestyle 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. Lifestyle brands sell a feeling: editorial layouts, generous whitespace and photography over feature lists. Compare these examples with how it works sections from every industry, or see the full homepages on the lifestyle website templates page.

What these 42 how it works sections have in common

On average each one carries 3.5 images or icons, 1.2 buttons and 1.5 links. 0% sit on a dark background, and 34% are taller than half their width — most are compact bands rather than full screens. Headlines range from “How it works” (Meetup), “How-to Videos” (VCA Animal Hospitals) to “Learn About Rinnai” (Rinnai).

7 how it works sections worth studying

Bumble — “Our Story”: We started with one bold move. Today, we’re building the most trusted and effective place to find love. Scroll to explore 2014 We flipped dating norms… (3 buttons, 3 images).
Readwise — “Here's how Readwise works:”: Sync your highlights from Kindle, Instapaper, Apple Books, and more. the best parts easily through a daily email & app. Recall more and grow your knowledge… (0 buttons, 3 images, background #ffffff).
Bloomscape — “What kind of plant parent are you?”: FIND YOUR PERFECT PLANT Tell us about your space and we'll match you with plants that will thrive. (0 buttons, 0 images, background #fcf9f3).
Urban Stems: Your package will arrive in an UrbanStems branded box with all products tightly secured. All orders come with a personalized notecard from the sender included in… (0 buttons, 12 images, background #f8f8f8).
Timeleft — “How it works”: Meet new people in your city, your way. Pick between dinners, drinks, or runs. Each meetup has its own vibe, so you can find what fits… (0 buttons, 4 images, background #f7f3ed).
Big O Tires — “STEP 1”: HomeLowest Tire Price Guarantee Provide us with a current, local advertisement or written estimate. We'll match the total price, Now that´s a Big O Yes Provide… (1 buttons, 3 images).
Fixter — “How it works”: Car maintenance, made easy in 4 steps Benefit from our pre-negotiated rates, book a time, and we’ll take care of the rest. Our fully insured drivers… (2 buttons, 11 images, background #ffffff).

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 lifestyle brand, look at editorial layouts and how photography sets the mood before any product. Start with Bumble, Readwise and Bloomscape, click a section to open it at full size and copy its build prompt, palette and fonts.