--- title: "How it works section design: variants and examples | Kombai" description: "A how it works section explains a product in a few numbered steps, so people see what happens after they sign up before they commit." canonical_url: https://kombai.com/glossary/how-it-works/ author: "The Kombai Team" --- # How it works A how it works section explains a product in a few numbered steps, so people see what happens after they sign up before they commit. - Also called: steps section, process - Platforms: Web, Mobile - In the Kombai gallery: [63 web designs](https://kombai.com/gallery/web/how-it-works/), [37 mobile designs](https://kombai.com/gallery/mobile/how-it-works/) - [Cadenza Outreach](https://kombai.com/gallery/inspirations/how-it-works-web-1/) (Web) - [Halcyon Health](https://kombai.com/gallery/inspirations/how-it-works-ios-1/) (Mobile) - [Firnley](https://kombai.com/gallery/inspirations/how-it-works-web-7/) (Web) ## What is a how it works section? A how it works section lays out a product or service as a short sequence of steps, each with a number, a title, a line of text and often a picture. It answers "what happens after I sign up?" before people commit, so the first step feels small and the result feels close. - Steps are numbered in the order people do them, usually three or four. - Each step names one action, and the last one lands on a result. ## When to use how it works - **A new kind of product.** People need to see the process before they trust it. - **Services with stages.** Testing kits, hiring and onboarding: anything that happens over days. - **A short path to value.** When three or four steps really get people to a result. ## When not to use one - **A list of features.** If the steps can come in any order, it is a feature section. - **Long procedures.** Ten steps belong in the docs or a guided setup, not on a landing page. - **Live setup inside the app.** Use a checklist or a progress indicator that tracks what is done. ## Anatomy 1. **Heading**: Names the result 2. **Step number**: Shows the order 3. **Step title**: One action, verb first 4. **Step text**: A line or two of detail 5. **Visual**: Shows the step happening 6. **States**: Step, selected, focus ## Variants We sorted every how it works design in the Kombai gallery and found five patterns. ### 1. Numbered columns The default. Three to five steps side by side, each with a number or icon, a short title and a line of text. - [Woadwick](https://kombai.com/gallery/inspirations/how-it-works-web-10/) (Web) - [Denwold](https://kombai.com/gallery/inspirations/how-it-works-web-25/) (Web) - [Selvane](https://kombai.com/gallery/inspirations/how-it-works-web-11/) (Web) ### 2. Steps with pictures Each step pairs its text with a photo or illustration, in columns or in alternating rows. - [Marrow](https://kombai.com/gallery/inspirations/how-it-works-web-2/) (Web) - [Norlume home energy](https://kombai.com/gallery/inspirations/how-it-works-web-26/) (Web) - [Selva](https://kombai.com/gallery/inspirations/how-it-works-web-5/) (Web) ### 3. Steps on a timeline The steps sit along a line, down the page or across it, often with a day or a duration at each stop. - [Cirqua](https://kombai.com/gallery/inspirations/how-it-works-web-8/) (Web) - [Thrumwell](https://kombai.com/gallery/inspirations/how-it-works-web-12/) (Web) - [Okalis](https://kombai.com/gallery/inspirations/how-it-works-web-21/) (Web) ### 4. Stacked step cards On mobile, the steps stack as numbered cards or rows, usually with one button at the bottom to start. - [Orbitary](https://kombai.com/gallery/inspirations/how-it-works-ios-5/) (Mobile) - [Glyphway](https://kombai.com/gallery/inspirations/how-it-works-ios-8/) (Mobile) - [Kernwell](https://kombai.com/gallery/inspirations/how-it-works-ios-10/) (Mobile) ### 5. Steps over a product shot Each step comes with a screenshot or mock of the product, so people see where in the app it happens. - [Almicant](https://kombai.com/gallery/inspirations/how-it-works-web-15/) (Web) - [How Lodeway works](https://kombai.com/gallery/inspirations/how-it-works-web-14/) (Web) - [Zovrik](https://kombai.com/gallery/inspirations/how-it-works-web-34/) (Web) ## Where how it works sections show up ### Product landing pages Three or four steps that show how quickly people get from signup to a result. - [Quensal](https://kombai.com/gallery/inspirations/how-it-works-web-33/) (Web) - [Glostra](https://kombai.com/gallery/inspirations/how-it-works-web-22/) (Web) - [Porvant](https://kombai.com/gallery/inspirations/how-it-works-web-23/) (Web) ### Hiring process Careers pages lay out each interview stage, often with how long it takes. - [Tandem Hiring](https://kombai.com/gallery/inspirations/how-it-works-web-4/) (Web) - [Havstead](https://kombai.com/gallery/inspirations/how-it-works-web-24/) (Web) - [Relaybird](https://kombai.com/gallery/inspirations/how-it-works-ios-6/) (Mobile) ### Partner programs Referral and partner pages walk through the path from applying to getting paid. - [Verve AI](https://kombai.com/gallery/inspirations/how-it-works-web-6/) (Web) - [Rowbray](https://kombai.com/gallery/inspirations/how-it-works-web-29/) (Web) - [Antumbra](https://kombai.com/gallery/inspirations/how-it-works-web-54/) (Web) ### App onboarding Setup screens list the few steps to a working account, then point at the first one. - [Minutefox](https://kombai.com/gallery/inspirations/how-it-works-ios-11/) (Mobile) - [Vela Max](https://kombai.com/gallery/inspirations/how-it-works-ios-3/) (Mobile) - [Archivebay](https://kombai.com/gallery/inspirations/how-it-works-ios-28/) (Mobile) ## How it works vs similar components | | [How it works](https://kombai.com/glossary/how-it-works/) | [Feature section](https://kombai.com/glossary/feature-section/) | [Timeline](https://kombai.com/glossary/timeline/) | [Progress indicator](https://kombai.com/glossary/progress-indicator/) | |---|---|---|---|---| | Shows | The steps to a result | What the product can do | Events in time order | Where people are in a task | | Order | Fixed and numbered | Any order | By date | Fixed, and it moves | | Best for | Explaining a process before signup | Listing capabilities | History, activity and changelogs | Multi-step forms and setup | ## Build notes - Write the steps as an ordered list (
    ), so the order is in the markup, not only in the numbers. - Start each step title with a verb, and keep the text to one or two lines. - If picking a step swaps a picture, build it as tabs: a vertical tablist, with Up and Down arrows between steps. - Mark purely decorative step pictures as decorative (alt="" or aria-hidden), and describe the ones that carry meaning. - Don't auto-advance the steps. Anything that moves on its own for more than five seconds needs a pause control. - End on one button that starts step one, like "Book my blood draw". ## FAQ ### How many steps should a how it works section have? Three or four. Those are the most common counts in the Kombai gallery, and they fit in one row on a desktop screen. If you need more, group them into stages, or move the detail into a guide. ### Should the steps be numbered? Yes, when the order matters, which is the point of the section. If any step could come first, you have a list of features, and a feature section fits better. ### Where does a how it works section go on a page? After the hero and the main features, and before pricing. By then people know what the product is, and the steps show them how they would start. ### Should the steps animate as people scroll? They can reveal on scroll, but keep every step readable without the animation, and switch it off for people who turn on reduced motion. Never make people wait for a step to appear. ## Related terms - [Feature section](https://kombai.com/glossary/feature-section/) - [Timeline](https://kombai.com/glossary/timeline/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) - [Tabs](https://kombai.com/glossary/tabs/) ## References - [MDN: The ordered list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol) - [WAI-ARIA Authoring Practices: Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) - [WCAG 2.2: Understanding pause, stop, hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)