Designing for AI isn't just about adding a chatbot to a website. To build truly successful AI-powered solutions, you have to move beyond the UI and focus on the AX (AI Experience). This requires understanding the foundation of how AI features actually function and how much agency they should have.
Here is the blueprint for planning and designing smart products that stay user-friendly.
The 4-Step Framework:
1. Define the Job to be Done (JTBD)
Before touching a single line of code or a design tool, you must ground your project in a Job to be Done statement.
The Trap: Adding AI just because it’s powerful.
The Solution: Focus on the outcome, not the technology. Every AI feature must have a specific purpose that helps the user achieve their goal more efficiently.
2. The Agency Spectrum
Decide early on how much effort the user should put in versus how much agency the AI has. There are four primary methods for implementation:
Method | Description | User Effort | Interaction Type |
AI Assistant | Conversational, general-purpose chat interface. | High (Prompting) | Chat-based |
Co-pilot | Works side-by-side, adapting to user actions (e.g., autocomplete). | Medium | Contextual / Real-time |
AI Feature | A specific button for a specific task (e.g., "Remove Background"). | Low | Triggered Action |
AI Agent | Operates independently based on initial setup and reasoning. | Minimal | Autonomous |
3. Defining the Context Window
The "Context Window" is what the AI "sees." To make the AI useful, you must capture the user’s intent by combining:
User Input: Plain text or specific UI parameters.
Environment Data: Time, weather, location, or historical interaction data.
Scope: Is the AI looking at the whole page, or just a specific data point?
4. Designing for the "Hallucination Gap"
In AI design, you must plan for the negative path. When the AI is wrong, the UX must allow the user to intervene. This is the core principle of Human in the Loop (HITL): the UI should always give the user the power to accept, discard, or modify the AI’s output.
From Logic to Visual Planning:
When mapping out your app, break your charts into four distinct layers:
1. The AX Flow:
How the user and AI interact (the logic).
2. The UX Journey:
What the user actually sees and touches.
3. The AI Framework:
The specific instructions, input data, and output formats for the LLM.
4. UI Components:
Pre-defined spots in the interface where the AI data will live.
Your Homework: Practice Your AX Design Skills
To master these concepts, you need to move from theory to application. Pick a simple app idea (e.g., a "Recipe Generator" or a "Task Manager") and complete the following exercise:
1. The JTBD Statement
Write a "Good" vs. "Bad" JTBD statement for your idea.
Bad: "I want to add an AI chat to my cooking app."
Good: "When I only have three random ingredients in my fridge, I want to quickly generate a healthy 15-minute recipe so I don't waste food."
2. Map the Spectrum
Choose which of the four methods (Assistant, Co-pilot, Feature, or Agent) fits your solution best. Why did you pick it?
3. Define the HITL
Draw a simple flow of the AI’s output. Now, add three "escape hatches" for the user. If the AI generates a recipe they hate, how do they edit it, rate it (to teach the AI), or regenerate it?
