Overview
How might we design smart recommendations so people can trust and act on AI output?
When this pattern fits
- Essential for e-commerce platforms, content discovery applications, and marketplaces where personalized recommendations drive engagement and sales.
When to skip or lighten it
- Cold-start users with no signal beyond generic bestsellers.
- Regulated contexts where personalized pricing or health advice is restricted.
- Recommendations that duplicate search results with no added value.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
“Recommended for you” with no explainability or dismiss.
Same block on every page regardless of context.
Boosting paid placements without disclosure.
Recommendations that fight the user’s stated filters.
How products use it
| Product | Implementation |
|---|---|
| Amazon | “Customers also bought” and session-aware carousels. |
| Netflix | Row rankings from taste and watch history. |
| Spotify | Discover Weekly and contextual mixes. |
| Shopify | Merchant recommendation apps on product and cart pages. |
Real-world examples
How shipped products implement smart recommendations, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Smart Recommendations" AI interface design pattern.
Pattern Definition:Frequently asked questions
What makes recommendations “smart”?
They update with session context (PDP, cart, query) and personal history, not only global popularity.
Should you explain why?
Short reasons (“Because you viewed X”) improve trust and let users correct bad signals.
How handle cold start?
Trending, category bestsellers, or onboarding preference picks until behavior exists.
Recommendations vs smart bundles?
Recommendations suggest items. Smart bundles group complementary SKUs into a deal.