- “How It Works” pages are critical to users considering consumables-subscription services
- A well-organized “How It Works” page should be optimized for easy scanning to showcase basic subscription service details
- Failure to properly structure the “How It Works” page can result in users failing to grasp how a particular service works — and thus more likely to consider a competitor’s service instead
The variety of service options across subscription-service sites can often vary widely from site to site. Therefore, according to our Premium UX Research, “How It Works” pages for these sites need to provide users with detailed information on the subscription-service basics and any unique features offered by the site.
Our large-scale user testing revealed that how information is presented to users matters just as much as what specific information is provided — when it comes to how easy it is for users to conceptualize the variety of plans and other subscription-service offerings available on a given subscription-service site.
Consequently, the “How It Works” page on a subscription-service site can actually contain all the subscription-service information users are looking for but — if that information is difficult to access due to a poor layout or insufficiently noticeable text styling — some users will be left without a sufficient enough grasp of the service essentials to feel comfortable using the subscription service.
In this article we’ll discuss 3 design patterns that worked well for structuring “How It Works” pages:
- Using text blocks accompanied by images or icons to showcase basic service details
- Using grid layouts for displaying the variety of available subscription plan options
- Including embedded FAQs at the bottom of the page for page-specific and common questions
Additionally, we’ll discuss 1 layout and 1 style pitfall to avoid.
1) Text Blocks Accompanied by Images or Icons to Showcase Basic Service Details
It’s important to keep in mind that the “How It Works” page will be many users’ first exposure to the subscription site’s service details — and potentially users’ first experience of the site, such as if they happen to arrive on the site via an external link (e.g., a social media link).
Consequently, users are often in an exploratory mindset — looking to get an idea of the subscription site’s overall service options without getting overwhelmed with too much detail.
Our large-scale user testing revealed that, to introduce users to the subscription-service basics, text blocks which included headers and short descriptions, accompanied by images or icons (or both), are a good way to quickly provide users with basic information about how the subscription service works.
This layout — very similar to a “Product Highlights” layout for product page descriptions (e.g., see Apple’s product page for an example) — offers a nonintimidating way for users to get acquainted to the subscription service or food box subscription service.
The approach of using headlines, text blocks, and images serves to break the subscription-service information into easily digestible chunks, which primes users to learn more about the subscription site’s service details.
Typically, this layout is the first used on the “How It Works” page, since it serves as the introduction to the service.
2) Grid Layouts for Displaying the Variety Of Plan Options
Once users have a basic understanding of how the consumables-subscription service works, many users are ready to get into more detail regarding the different subscription-service options available.
Our large-scale user testing revealed that, when there are a number of options for users to choose from — for example, meals categorized by dietary preference, or different food subscription boxes to choose from — displaying them using a grid format allows users to easily compare available options and plans.
Indeed, an approach that focuses on progressive disclosure works well on the “How It Works” page, as users will first want to scan the different available options for an overview, before getting into more specific details about each option.
Therefore, rather than provide the full details for each subscription-service option, instead provide each option’s name as a headline accompanied with a basic, 2-to-3 line description — including a sufficiently visible link (or button) where users can learn more about each option.
Furthermore, a grid format effectively showcases the diversity of subscription-service options available using comparatively little space.
For example, during our testing of meal kit subscriptions, many users began to get excited about trying the plan when they realized the subscription service included tailored dietary options — for example, when users saw that meal kit sites offered “Carb Conscious” options, or when food subscription boxes allowed users to select “mostly beef”, “mostly chicken”, or some custom combination of meat for their subscription order.
This grid layout of specific plan options is often best placed in the middle of the “How It Works” page, directly after the subscription-service overview.
3) Embedded Faqs at the Bottom of the Page
Finally, once they’ve have gotten a basic introduction to the subscription service and learned a bit more about the different subscription options available to them, some users will still have specific questions that haven’t yet been answered by the “How It Works” page.
Testing revealed that making the final section of the “How It Works” page consist of embedded FAQs — that is, a short list of page-specific FAQs — was a good way to address some common user questions for the basic information every “How It Works” page needs.
In a previous round of testing, FAQs were observed to be very helpful to users considering small product catalog, direct-to-consumer sites.
Similarly, FAQs were observed to be a good way to provide additional, sometimes crucial information to users considering signing up for an unfamiliar site’s subscription service.
One word of caution: as embedded FAQs are often the most information-dense section on the “How It Works” page, this section can easily become an overwhelming and intimidating info dump for users — the despised “wall of text” that users are discouraged from reading.
While most users anticipate that FAQ sections will consist of a large amount of text, it’s crucial that the text is broken up by styling the questions very differently from the answers, and using progressive disclosure and white space to allow users to “breathe” as they scan the information.
In terms of the number of FAQs to include, testing showed that a range of 5–7 individual questions and answers was generally observed to answer most users’ questions without making the section overly intimidating and difficult to navigate.
Of course, the questions picked should be representative of the most popular or critical user questions (which could come from surveying an individual site’s users or from a log of previously searched for answers).
FAQs typically will best be placed as the final content section on the “How It Works” page.
1 Layout and 1 Style Pitfall to Avoid
A well-structured “How It Works” page will help most users quickly find information that they’re looking for, and allow them to consume it as efficiently as possible.
A layout that has a 3 level-information hierarchy — text blocks and images for service basics, grids for plan options, and FAQs for specific details — was observed in testing to perform well for most users.
However, while only negatively affecting a few users during testing, one layout that didn’t perform as well was a “Horizontal Tabs” layout.
Indeed, a few users struggled to get an overview of the information on the “How It Works” page when a “Horizontal Tabs” layout was used.
This observation supports our Product Page findings, which similarly found that “Horizontal Tabs” layouts should be avoided for most product pages.
Therefore, the “Horizontal Tabs” layout — which is most likely to be considered when providing the plan options (as an alternative to the grid layout discussed above) — should be avoided.
Finally, it’s important to keep in mind that, while linking to additional details is fine (and preferred if the additional details would generally overwhelm users trying to get an overview of the service on the “How It Works” page), the links have to be prominent enough to be easy to spot when scanning the page.
During testing some users initially missed key links that were relatively inconspicuous on the page. Moreover, the inconspicuous styling made some users question if the site was intentionally trying to hide information (e.g., about plan pricing).
Therefore, when linking to other information from the “How It Works” page, ensure the links are easy to spot for scanning users.
Ensure the “How It Works” Page Supports Users’ Information-Gathering Behavior
With such an abundance of information to convey to users about consumables-subscription service basics on the “How It Works” page, sites often run the risk of overwhelming users with too-much information.
However, our testing has revealed that using a 3-level information hierarchy provides an effective communication infrastructure for both providing basic subscription-service details and directing users to where more information can be found.
Indeed, providing users with an effective starting-point for learning about a consumables-subscription site — in the form of a well-designed “How It Works” page — supports the information-gathering behavior of a wide variety of users by allowing each user to choose for themselves how to further explore the site’s information and resources once they’ve gotten an overview of the consumables-subscription service.
Most importantly, providing a well-structured “How It Works” page on a consumables-subscription site will help alleviate the hesitation many users will inevitably feel when they are unfamiliar with the industry in general — or a particular brand’s business model specifically.
Therefore, ensuring that new users have a clear on-ramp for learning about a new consumables-subscription site by structuring a “How It Works” page with a 3-level information hierarchy will do much to give users a welcoming introduction to the brand — as well as provide an effective safety net against early site abandonment.
Getting access: all 616 consumables-subscription services UX guidelines are available today via Baymard Premium access. If you already have an account open the Consumables Subscription Services.