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.
The structure of the pattern follows the “Magic Moment” pattern of recommendation where a recommendation is accompanied by its potential benefit.
- Header: Short description of the recommended action that explains what the user should do.
- Subtext: Explanation of why we recommend this, how the user stands to benefit from taking the action.
- Link: Additional resources.
- Call-to-Action: Pathway to taking action on the recommendation.
- Customization: Option for users to dismiss.
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.