Experience
Check that your app is pleasant to use — design is consistent, interactions feel good, and it works on any device.
Run this audit before demos, after major UI changes, or when preparing for MMP. Polish matters when users see it.
Skip for POC — functionality comes first.
Why This Matters
Users judge your product by how it feels, not just what it does. Inconsistent design, missing loading states, and broken mobile layouts make your app feel unfinished — even if the features work perfectly. A polished experience builds trust.
What to Check
Four areas to verify. Each area has key questions to answer:
Design Consistency
Does the design feel intentional? Check that colors, typography, and spacing use design tokens consistently throughout the app.
Interaction States
Do interactions give feedback? Check that buttons show loading, errors are helpful, and users always know what's happening.
Responsive Design
Does it work on mobile? Check that layouts adapt, touch targets are large enough, and nothing breaks on small screens.
Empty & Error States
What happens when things go wrong? Check that empty lists have helpful messages and errors explain what to do next.
Stage Expectations
What 'good enough' looks like at each stage:
Skip
Rough is fine at this stage
Focus on functionality
Polish comes later
Light check
Core flows feel intentional
Basic loading states exist
Not obviously broken on mobile
Full audit
Design system fully applied
All states handled gracefully
Polished responsive experience
Full audit
Production-grade across viewports
Micro-interactions refined
Consistent with brand guidelines
Common Issues
Problems we see often and how to fix them:
No loading state on form submit
Add loading prop to Button, disable while request is pending
Generic error message ('Something went wrong')
Show specific error with actionable guidance for the user
Empty list shows nothing
Add EmptyState component with message and call-to-action
Content extends beyond viewport on mobile
Check for wide elements, add overflow-x-hidden to container
Hardcoded colors instead of design tokens
Replace with CSS variables: var(--color-primary)
Run with AI: Tell your agent "Run the Experience audit at MMP level" or use /audit experience. The agent will check for design consistency and missing interaction states.
Next Steps
Related audits and resources: