The Designer's Playbook for AI Products
A tutorial by Dara Sobaloju. Featured in the OTF curated resource library.
Designing for Uncertainty
Traditional software is deterministic — click a button, get the same result every time. AI products are probabilistic — the same input can produce different outputs. This fundamental difference demands a new design language.
Designers must communicate confidence levels without overwhelming users. When an AI is 95% sure, the interface should feel confident. When it's 60% sure, the interface should invite verification. And when it fails, the interface should fail gracefully with clear next steps.
The best AI products don't hide uncertainty — they embrace it as a design element. Confidence indicators, suggested alternatives, and 'here's what I'm not sure about' sections build more trust than false certainty.
UX Patterns for AI Interfaces
Progressive Disclosure of AI Output
Show the summary first, details on demand. A code suggestion shows the diff preview, full explanation on click. A search result shows the answer, sources on expand. This respects users' time while maintaining transparency.
Streaming and Progressive Loading
Show AI output as it generates, not after completion. Streaming text, skeleton states that fill progressively, and typing indicators create a sense of responsiveness. Users tolerate longer waits when they see progress.
Editable AI Output
Always let users modify AI-generated content. Whether it's code, text, or design — make the output a starting point, not a final answer. Inline editing, version history, and undo/redo are essential.
Multi-Option Presentation
When possible, show multiple AI outputs and let the user choose. 'Here are 3 approaches' is more useful than 'here's the answer.' It shifts the user's role from passive consumer to active decision-maker.
Building Trust in AI Output
Trust is the currency of AI products. Here's how to build it systematically.
Show your work
Explain how the AI reached its conclusion. Citations for research tools, confidence scores for predictions, and 'reasoning' panels for complex decisions. Transparency builds trust even when the output isn't perfect.
Acknowledge limitations honestly
When the AI doesn't know something or isn't confident, say so. 'I'm not sure about X, but here's my best guess based on Y' is far more trustworthy than presenting uncertain output as fact.
Enable easy verification
Make it simple to check the AI's work. Link to sources, show before/after comparisons, and provide 'verify this' actions. Users trust tools they can verify more than tools that demand blind faith.
Build a track record
Show success metrics, past accuracy, and user satisfaction data. 'This suggestion was accepted by 89% of users' or 'AI-generated tests caught 3 bugs this week' builds evidence-based trust.
Designing Feedback Loops
AI products improve through user feedback. The challenge is collecting feedback without disrupting the user's flow.
Implicit Feedback: Track which suggestions are accepted, modified, or rejected. This is the highest-signal, lowest-friction feedback mechanism. If users consistently edit AI-generated headlines, the AI learns to produce better headlines.
Lightweight Explicit Feedback: Thumbs up/down, star ratings, or 'was this helpful?' prompts after key interactions. Keep them optional and unobtrusive.
Contextual Feedback: When users modify AI output, capture what they changed. This provides specific, actionable training signal without requiring users to explain their reasoning.
Escalation Paths: When users repeatedly reject AI output for a specific task, offer to connect them with human support or an alternative workflow. Knowing when AI isn't the answer is itself good product design.
Common Design Pitfalls
Over-Promising Capabilities
Suggesting the AI can do more than it reliably can leads to trust erosion. Set clear expectations: 'This tool helps draft emails' is better than 'This tool writes perfect emails.' Under-promise, over-deliver.
Hiding the AI
Some products hide AI involvement to seem 'magical.' This backfires when users discover the AI and feel deceived. Be transparent about what's AI-generated — users appreciate honesty.
No Escape Hatch
Always provide a non-AI path to accomplish the task. If the AI suggestions aren't working, users should be able to do it manually. AI should augment, never gate.
Ignoring Error States
AI will fail — timeouts, bad outputs, hallucinations. Design specific error states for each failure mode. 'Something went wrong' is lazy. 'The AI couldn't process this image because it's too blurry. Try uploading a clearer version.' is helpful.
