Overview
Use cases help visitors see themselves using your product. By showing specific scenarios and outcomes, you help prospects self-identify and understand which features matter most to them.
Use cases should be organized by job-to-be-done, not by your internal product structure. Think about what users are trying to accomplish.
Effective use cases are specific and outcome-focused. "Reduce customer churn" is better than "Customer management".
Different use cases appeal to different personas. A developer use case will look different from a marketing use case, even for the same product.
Link each use case to deeper content (dedicated pages, case studies) so interested visitors can learn more.
Best practices
Actionable guidelines to implement this component effectively.
- Segment by job-to-be-done (not by your internal product modules).
- Include examples and outcomes ("Reduce churn", "Speed up onboarding").
- Link each use case to a deeper page with specific proof and a tailored CTA.
- Avoid making every use case sound the same: differentiate with details.
- Use personas or roles when relevant ("For developers", "For marketing teams").
- Show specific metrics or outcomes when possible ("Reduce support tickets by 40%").
- Include visual elements (screenshots, diagrams) that show the use case in action.
Common patterns
Popular variations and approaches you'll see across successful SaaS sites.
Role-based use cases
Organized by user role or persona. "For developers", "For designers", "For marketers".
- •GitHub: Use cases by developer type and workflow
- •Figma: Organized by design role and team size
Industry use cases
Grouped by industry vertical. Useful for products that serve multiple industries differently.
- •Stripe: Use cases by industry (e-commerce, SaaS, marketplaces)
- •HubSpot: Organized by business type and size
Outcome-based use cases
Focused on what users achieve. "Ship faster", "Reduce costs", "Improve collaboration".
- •Linear: Use cases focused on team outcomes
- •Notion: Organized by what teams accomplish
Workflow-based use cases
Organized by specific workflows or processes. "Customer onboarding", "Bug tracking", "Content publishing".
- •Intercom: Use cases by customer support workflow
- •Zapier: Organized by automation workflow
Examples
Real-world implementations from top SaaS companies.
Linear
View site →Use cases organized by team type and workflow. Clear outcomes and links to detailed pages.
Stripe
View site →Use cases by business type (e-commerce, SaaS, marketplaces). Each with specific examples and outcomes.
Notion
View site →Use cases organized by what teams accomplish. Shows specific workflows and outcomes.
Accessibility considerations
Ensure your component is usable by everyone.
- Use semantic HTML: <section> with <h2> for use case groups, <h3> for individual use cases.
- Ensure use case cards are keyboard navigable if they're interactive.
- Provide clear link text for "Learn more" or "See how" CTAs (avoid generic "Click here").
- Ensure sufficient color contrast for use case text and visual elements.
- If using icons or images, provide meaningful alt text or mark as decorative.
- Test with screen readers to ensure use case hierarchy and descriptions are clear.
- For interactive use case selectors, ensure they're keyboard accessible with proper ARIA labels.