Learn Pages

Learn pages display benefits, pricing and other necessary content that will help users make a choice about a specific offering. A defined set of components gives teams the flexibility to create custom layouts to meet their needs.

Web

When to Use

Use a Learn page to:

  • Explain an offer or product to the user in plain terms.
  • Describe the benefits, reasons to believe, and support the user in understanding why the offer or product is right for them.

Do not use a Learn pages to:

  • Serve as a marketing page. A Learn page is not intended to feel sales-y, pushy, or rude.
  • Slap the user with a price sticker. A Learn page is the educational concierge, not the dirty car salesman.

Appearance & Behavior

Transition/Animation

  • The IPD Landing Page uses an animation similar to the Trowser. The HeaderStage, and details slide down from the top of the browser and reverses if closing.
  • The header is a collapsable element that becomes sticky, and anchors to the top of the display such that the primary call to action and anchor tabs (if present) remain visible at all times.

Components

Components are a Harmonized version of marketing AEM Sub-sections that can be used to compile in-product Learn pages.

  • Required component(s)
    • Header
  • Optional component(s)
    • Key benefits
    • How it works
    • Reviews
    • Pricing
    • Advice
    • Compare
    • Input
    • Promotional elements

Header

The header is a collapsable element that becomes sticky such that the primary call to action and the tabs (if present) remain visible at all times.

  • Required elements:
    • Offer name: Includes the value prop or brief description of the product, offering, or feature.
    • Call to action: A single primary call to action to initiate a Step Flow, or Product Selector. When there are multiple paths, use a Combo Button.
  • Optional elements
    • Anchor tabs: if the page contains several components, the header may also include anchor tabs allowing the user to jump down the page quickly.
    • Photography: if photography is required to communicate the value proposition a photograph may be included, however as the Learn page is intended to be purely informational, photography should be used at a selective minimum.
  • Header

    Header

  • Header_sticky

    Header, sticky

Key Benefits

Summarize the main “selling points” for using this product or feature and highlight the uniqueness of this particular product compared to other similar products. A visual and succinct answer to the question “Why would I use this?”

  • 3 horizontal illustrations followed by a header and subtext
  • KeyBenefits

How it works

Give the user more details in regard to how this new product or feature fits into their existing workflow within QuickBooks. This should not be used to list key benefits and should not sound like a sales pitch. Instead, it should answer the question, “how would I use this?”. There are currently two ways to display How it Works; an accordion or a workflow illustration.

  • Accordion:
    • Use when complex or detailed information is required to explain how a feature works.
    • Present content an accordion layout and consider telling the story in a step-by-step approach, where applicable.
    • Leverage images, videos, or illustrations to help tell the visual story
    • HowItWorks_accordion
  • Workflow illustration:
    • Use when the feature is simpler and less detail is required

Reviews

Reviews provide social proof and give the user a sense for whether or not the product is working for other businesses like theirs.

  • Meta-data
    reviews_appsHeader
  • Curated ratings summary within an anchor tab
    reviews_anchorTab
  • Reviews
    Reviews
  • Customer reviews/story/testimonial
    • For an offer where reviews don’t yet exist, consider using a customer-story or testimonial for social proof instead

Pricing

The pricing component helps the user understand the cost implications of adding or trying this feature or product by displaying simple, static pricing information. If the user needs to choose between SKUs before moving forward, use the Product Selector pattern. Key pricing layouts include:

  • Pricing
    • Pricing cards can display one or more SKUs side-by-side for comparison of features. They give more emphasis to the products themselves, rather than the individual features. Whenever possible, leverage the users data to make a recommendation between many offers and explain why that option is recommended.
    • Pricing
  • Comp charts
    • Comparison charts give more emphasis to the features, rather than the individual products. Use a comparison chart when the features are binary (included/not included) across offerings. This helps the user determine how important features are between SKUs.
      Screen Shot 2015-12-14 at 9.43.58 PM
  • Generic table
    • Use only when it’s not possible to provide a comp chart or pricing card (as in the case of 3rd party apps where the table solution is more scalable).
      Screen Shot 2016-01-05 at 4.15.52 PM

 

Advice

  • FAQs
    • Answer questions that customers are likely to have about the offering. Do not duplicate content that exists in other sections or use as the primary method of story telling. FAQs are brief summarizations of common or anticipated concerns.
    • FAQs
  • Chat
    • Includes an access point to chat with an agent or get advice from an accountant. If you have a use case for proactive chat, please see the Chat PatternNote: Visual is TBD
  • Related offers
    • Help the user understand what other solutions they might be able to use to accomplish the same task or solve the same problem.
      Screen Shot 2016-01-07 at 11.50.09 AM

Layout

  • Any/all components can be combined to compile a learn page, varying by use case. In this example, the following components are stacked in a long scroll format:
    • Header
    • Key benefits
    • How it works accordion
    • Pricing information
    • FAQs
    • SampleLayout

      sample layout

Where this pattern is used

Access points

The Learn page is a full-width layer that sits on top of the main application content, like a Trowser, but doesn’t have a sticky footer. It can be accessed via a number of access points including but not limited to the following:

  • Discovery Cards

Discovery cards, app cards, and IPD access point links may contain access points to learn more pages

  • Zero state pages
learn_0State

Zero state pages may contain a secondary action to the learn more page. E.g: “Learn more” to turn on Payroll

  • Contextual task tooltip
learn_contextualTaskTooltip

Learn access point may be included in a contextual task tooltip. E.g: “Learn more” before turning on Payments

© Intuit 2016 | Terms of use