A Almosafer Case Study · UX/UI
Cradis Bootcamp
Session 3 of 9
7 Weeks · 55 Hours
How AI Acts
From chat to autonomy — designing AI agents that perceive, plan, and act on the user's behalf, applied to the Almosafer travel experience.
Context02 / 22
Why agents change the design problem
In Session 2, I learned how AI thinks. In Session 3, the AI starts doing — and that single shift breaks every assumption I had about UX.
Chat suggests
Users still drive every action. The AI is a research helper.
Agent acts
The AI executes. One wrong autonomous step = real money or a broken trip.
The design pivot
Trust, autonomy, transparency, control — these become the design canvas.
Agenda03 / 22
What this session covered
Five blocks that map directly to the Almosafer agent I'm prototyping.
01 · From chat to action
The Agent Loop, autonomy, real-world consequences.
02 · Anatomy of an agent
Brain, Memory, Tools, and on-demand Skills.
03 · Trust & autonomy
The spectrum, progressive autonomy, the trust formula.
04 · UX patterns
Personality, text+GUI, real-time feedback, safety.
Block 01 · From Chat to Action
Agents don't talk — they do.
And the moment AI takes action, the design problem shifts from "make it sound right" to "make it act safely."
The shift05 / 22
From talking to doing
The same user goal — two completely different products.
Session 2 · Chat
"Here are some restaurant suggestions…"
User reads, decides, opens another app, books manually.
Session 3 · Agent
"I searched, compared, and booked Al Baik for you — arriving in 25 min."
Agent observes context, plans steps, executes — with the user in the loop.
For Almosafer, this is the difference between a search engine and a travel agent — literally.
Applied · Almosafer06 / 22
Almosafer · Reframe
From search engine to travel agent
Today, Almosafer makes users do the heavy lifting. The agent vision flips that.
Today · the user works
- Open multiple tabs to compare flights vs. hotels.
- Repeat the same filters across products.
- Decision fatigue grows on multi-stop trips.
- "Best deal" feels subjective.
Tomorrow · the agent works
- One goal in: "4-day Eid trip to Istanbul, ≤ 5,000 SAR, two adults."
- Three packages out — ranked, with reasoning.
- Edits inline; agent re-plans without losing context.
- User stays in control of every irreversible step.
Definition07 / 22
What is an AI agent?
An autonomous system that can perceive its environment, make decisions, and take actions to achieve specific goals.
Autonomy
Operates without constant human input.
Perception
Reads context, history, environment.
Decision
Evaluates options, chooses actions.
Action
Executes through tools and APIs.
Adaptation
Adjusts based on feedback.
All five together = the difference between a chatbot and an agent.
Mental model08 / 22
The Agent Loop
Every agent — no matter how complex — repeats the same five steps until the goal is reached.
1
Perceive
Read inputs & context.
Almosafer · Applied
| Loop step | What the Almosafer agent does |
|---|
| Perceive | Reads goal, dates, budget, past trips, loyalty tier. |
| Plan | Drafts: search flights → shortlist hotels → check visa → propose itinerary. |
| Act | Calls flight, hotel, and visa APIs; surfaces top 3 packages. |
| Observe | User edits: "Option B but cheaper hotel." |
| Adjust | Re-runs hotel search, keeps flight intact. |
Block 02 · Anatomy of an Agent
Brain · Memory · Tools · Skills
The same four building blocks, recombined for every product. The art is choosing what your agent doesn't need.
Components10 / 22
The four building blocks
Mapped to a real Almosafer agent — not theory, but the actual stack.
Brain · LLM
Claude / GPT — interprets intent in Arabic & English.
Memory
Past trips, family, dietary, prayer times, loyalty tier.
Tools
Flights · Hotels · Visa DB · Weather · Maps · Payment.
Skills
Hajj/Umrah · Family-trip · Business-travel — on demand.
Tools are Lego bricks. Skills are the instruction booklets that teach the agent how to build specific things.
Skills · The context problem11 / 22
Why we can't put everything in one prompt
The traditional approach (broken)
- Wasted tokens — every irrelevant rule paid for on every turn.
- Model confusion — conflicting rules pull in different directions.
- Hard to maintain — one giant untouchable prompt.
- Token-limit ceiling hit before the user even types.
The solution · progressive disclosure
- Discovery — agent sees only short skill descriptions.
- Matching — context triggers the right skill.
- Loading — full instructions arrive on demand.
- Execution — agent applies specialized knowledge.
Almosafer · Applied
Hajj/Umrah skill loads only for religious travel · Visa skill only for international · Family-trip only when "with kids" is detected. Base prompt stays lean.
Architecture12 / 22
Single agent vs. multi-agent
Start single. Scale to multi only when complexity or specialization demand it. Premature multi-agent is just expensive complexity.
Single agent
- One agent handles all tasks.
- Simpler to build, debug, and ship.
- Best for focused, predictable problems.
- Where Almosafer should start.
Multi-agent
- Specialized agents collaborate.
- Handles complex, varied workflows.
- More flexible — and more failure modes.
- UX challenge: visibility into "who" is working.
Rule of thumb: a single agent that ships beats a multi-agent system that doesn't.
Multi-agent patterns13 / 22
When you do go multi-agent
Three coordination patterns — each with a different UX implication.
Agents-as-Tools
One controller delegates to specialists. Centralized, predictable.
Parallel
Agents work simultaneously, results merged. Faster, harder to explain.
Collaborative / Debate
Agents critique and improve each other. Highest quality, slowest.
UX challenge: multi-agent systems can feel like a black box. Visibility into which agent is working becomes a design problem.
Block 03 · Trust & Autonomy
The hardest UX question: how much should the agent do without asking?
Get this wrong and the user feels either babysat or betrayed. Get it right and Almosafer becomes the most personal travel product on the market.
The autonomy spectrum15 / 22
Where on this line should your agent live?
Full Control
Shared Control
Full Autonomy
Decided by four factors:
Risk
What if the agent makes a mistake?
Reversibility
Can the action be undone?
User expertise
How much does the user understand?
Trust built
Has the agent proven reliable yet?
Applied · Progressive autonomy16 / 22
Almosafer · Applied
Earning autonomy on Almosafer
New users start at level 1. The agent earns higher autonomy as the user opts in and history confirms reliability.
1
Ask permission
"Should I search these dates?" Every step requires confirmation. Safe default for new users.
2
Suggest + 1-click confirm
Agent prepares the booking; user clicks one button to approve.
3
Act + notify
Books non-refundable items only after explicit user opt-in for that trip.
4
Act silently
Read-only safe actions only — visa expiry checks, weather alerts, gate changes.
Trust formula17 / 22
Trust isn't a feature. It's a result.
Trust = Predictability + Honesty + User Control
Transparency patterns
- Show the plan: "I'll search flights, then hotels, then build a budget summary."
- Explain reasoning: "I picked this hotel because it matches your past stays."
- Show progress: "Step 2 of 5 — comparing 47 hotels."
- Admit uncertainty: "Visa rules changed last month — please double-check."
Control patterns
- Approval gates before payment.
- Undo / cancel until cancellation deadline.
- Stop button for long-running searches.
- Edit suggestions inline before confirming.
- Escalate to human consultant — one tap.
Block 04 · UX Design Patterns
Great agent UX feels like a helpful colleague — not a robot.
Personality, the right mix of text and GUI, and visible work-in-progress are how the agent earns the user's confidence.
Personality & format19 / 22
The Almosafer agent voice
Warm, knowledgeable, calm — like a senior travel consultant who's seen it all. Bilingual by default.
Voice & behavior
WarmConciseBilingual
ProactiveAsks 1 question maxConfirms before paying
"I found three flights under your budget — here's the one I'd pick, and why."
Show vs. Tell
Show (GUI): itineraries · prices · status · comparisons · confirmations.
Tell (Text): reasoning · recommendations · context · empathy.
Verify or compare → show. Understand why → tell.
Feedback & safety20 / 22
Show the work · keep it safe
Real-time feedback patterns
- Live previews — itinerary card builds as the agent finds options.
- Artifact cards — each flight or hotel renders as an interactive card.
- Progress indicators — "Searching 47 flights → comparing 12 hotels → 3 packages."
- Interactive confirmations — edit dates, swap hotels inline before paying.
Agent safety fundamentals
- Simplicity — fewer steps = fewer failure points.
- Transparency — show planning before any irreversible action.
- Sandboxing — test with fake bookings, edge cases, Arabic slang, adversarial input.
The real risk is compounding errors — one bad step cascading through several autonomous actions.
Almosafer · Agent Design Canvas21 / 22
The 7-dimension canvas, filled for Almosafer
Goal & Scope
Plan & book end-to-end trips within budget. Doesn't replace insurance or visa officials.
Persona & Tone
Warm, knowledgeable, bilingual. Calm under pressure.
Tools & Capabilities
Flights, hotels, visa, weather, maps, payment, calendar.
Knowledge & Context
Past trips, family, dietary, prayer times, loyalty tier.
Safety
Hard stop before any non-refundable charge. Arabic-aware filters.
UX
Hybrid text + GUI, visible progress, escalate-to-human always available.
Metrics
Time-to-itinerary, completion rate, cancellations, NPS, "would let it act on my behalf again" %.
Recap22 / 22
Eight things I'm taking into the Almosafer agent
- Agents = Perceive → Plan → Act → Observe → Adjust.
- The four blocks: Brain, Memory, Tools, Skills.
- Skills load on demand — base prompt stays lean.
- Start single-agent. Scale only when complexity demands it.
- Trust = Predictability + Honesty + User Control.
- Earn autonomy progressively — never assume it.
- Show vs. Tell: verify with GUI, explain with text.
- Compounding errors are the real risk — design for the brake, not the gas.
Next up — Session 4: Designing AI Experiences. Anti-patterns, errors, onboarding, accessibility.