Skip to content

Recommendations

The Recommendations pattern is used when NerdWallet is recommending an alternative or additional offer, product, pathway, experience, or action to what the user is currently seeing. Some examples of this include cross-selling a similar product offer to what users are currently shopping for and recommending a NerdWallet mortgage tool at the end of an article about mortgages.

Anatomy of the recommendations pattern

The structure of the pattern follows the “Magic Moment” pattern of recommendation where a recommendation is accompanied by its potential benefit.

  1. Header: Short description of the recommended action that explains what the user should do.
  2. Subtext: Explanation of why we recommend this, how the user stands to benefit from taking the action.
  3. Link: Additional resources.
  4. Call-to-Action: Pathway to taking action on the recommendation.
  5. Customization: Option for users to dismiss.

Examples

Product/offer recommendations

Example of a product/offer recommendation

Lead form

Example of a lead form

Usage

Choosing the right component

  • Do you have a clear recommendation? Can you clearly communicate the potential benefits of taking the recommendation?
    • If the answer to either or both of these questions is no, consider reframing your need to fit the Magic Moment framework      or using a different pattern.
    • If you answered yes to both, ask the following:
      • Are you recommending products or offers? -If yes, use the product card variant.
      • Are you recommending an alternative experience?
        • If yes, use the lead form variant.
  • Are you taking users off of NerdWallet?
    • If yes, use the appropriate icon & subtext to indicate that.

Design guidelines

Communicate the insight and benefits

DOCommunicate the benefits of our recommendations.

Follow the Magic Moment structure of recommendations

DOProvide a clear recommendation at the top level, then provide clear reasoning for the benefits of the recommendation. Explain how NerdWallet arrived at the recommendation.

Provide clear, actionable next steps

DOUse the cross-sell variant of the recommendation pattern when recommending a product or offer or multiple products or offers.
DOIndicate when a button click takes the user away from NerdWallet with an icon and the appropriate subtext.