Industry
Design
Designed AI-assisted conversational workflows that help SMEs manage high-volume communication through contextual response generation, multi-turn interaction support, and human-centered AI guidance.
Time
18 April 2026
Hackathon Organizer
Tool
Client
My Role
UX/UI Designer
My Team
1 Product Manager, 2 UX/UI Designers
Impact
Expected Product Impact:
Increased adoption and usage of AI agent features
Faster task completion with reduced friction in approval flows
Improved trust, retention, and a smoother human–AI collaboration experience
Context
Superchat is evolving from a communication platform into an agentic system where AI executes actions like payments and bookings for non-technical SMB owners. This shift introduces a new UX challenge: designing for trust, control, and clarity in AI-driven actions.
Our team tackled this at the XDesign Hackathon in Berlin, creating an AI decision-making interface in 4 hours and winning the track.
Business Problem
The AI agent needs to communicate what happened, why, what it recommends, and what the human should do to earn their trust quickly
The AI agent lacking nuanced decision-making creates risk, slows operations, and adds friction
Business Objectives
Enable fast, flexible, and trustworthy approval of AI actions
Reduce risk while improving efficiency and human–AI collaboration
Support seamless, transparent experiences for both owners and customers
Lean Hybrid Workflow= AI-assisted Design + Human Oversight
01 Synthesize Design Problems and Requirements
02 Funnel and Define Design Scope
03 Vibe coding Design Ideas & Iterate Prototype
UX Problems & User Research Insights
Superchat Problem Statement
AI agents are starting to take real actions on behalf of businesses — upgrading plans, processing refunds, booking appointments, updating customer records. For high-stakes actions, the owner needs to stay in the loop. But „Approve / Deny" is nowhere near enough. Design the mobile-first approval moment: the 10 seconds between the agent asking for the go-ahead and the owner tapping back. Sometimes it's a quick yes. Sometimes it's nuance — a cap, a condition, a whisper in the agent's ear. Sometimes it's „let me handle this myself." Design that full spectrum.
Synthesis of Business Requirements
To understand design challenge and business requirements from Superchat effeciently, we used Claude to visualize the synthesis of the data and discussed it in FigJam.
User Research Insights
01
Owners scan AI messages for inconsistencies, not detail.
Conversational Scannability
02
Binary approve/deny is a conversational dead end.
Nuanced AI Dialogue
03
The AI agent tone calibration should be a trust mechanism.
Agent Voice Design
04
Approval delay damages the customer experience.
Conversation Continuity
05
Human takeover should continue the conversation, not restart it.
Dialogue Persistence
Target Users Archetype
The always-on, never-at-the-desk SME owners who trust their AI agent to handle most things, but they still want to stay in control for critical decisions. Due to time constraint, we focused only on the restaurant manager whom we are more familiar with their working process.
Restaurant Manager
BEHAVIOUR
Mid-shift, hands full, eye on the floor. No time to read long text and type.
PAIN
Approval delays make the agent look broken. Overloaded, he blanket-approves everything to clear the queue.
GOAL
Decide from the lockscreen. Speak a modifier or click a button instead of typing it.
Define Design Scope
Design Focus Area
Mobile-first interaction design
Notification & alert design
Micro-interactions & motion
Copy and tone of voice
Progressive disclosure of context
Voice UI for true hands-free control
Design for The Restaurant Manager
Scenario
The AI agent, Aria,ordered fish within budget, but Vendor 1 can’t deliver on time, so she triggered backup vendors for priority offers.
Problem
The restaurant manager needs quick decision on the most suitable backup vendor with Aria for the fish delivery because the restaurant manager is in the mid-service and doesn't have time to find alternative vendors on her own.
User flow
Design Hypothesis
Hypothesis
Designing the ease-to-use and conversational AI agent offering concise context and efficient decision support will increase customer engagement and conversion rates.
Design Changes
Replace chat-mode conversational AI with message-mode conversational AI communicating concise and calm-toned context and decision request with simple taps for users' quick different decision-making responses.
Success Metrics
5% increase in conversions and customer satisfaction ratings.
Design Decisions: The Agent Persona "Aria"
Aria's Communication Principles
Active voice, past tense for actions taken
"I ordered cod from Vendor 1. They can't deliver on time." — not "There was a delivery issue."
Stakes-first structure
Lead with impact, then context. Mirrors how humans communicate urgency.
No hedging on recommendations
"I recommend Vendor 2" not "You may want to consider Vendor 2." Trust requires conviction.
Transition language for handovers
When the human takes over, Aria's draft stays visible with an edit-in-place affordance — the conversation doesn't break.
3. Rapid Prototyping with AI Tools
Design Solutions
Conversational Arc
We structured the AI's communication as a 3-act conversation:
INFORM
Act 1 – Situation Report
What happened and what Aria did
PERSUADE
Act 2 – Decision Request
What Aria recommends and why, with transparent stakes
CLOSE THE LOOP
Act 3 – Confirmation
Outcome feedback in Aria's voice/tone
1st Version v.s. Final Version
Act 1
Restaurant manager received Aria's message notifying the supply chain problem with vendors and her action to solve it.
1st Version without Iteration
Lock Screen Messages
Three messages on one screen causes high cognitive load and confusion with decision-making prioritization
Messages contain repetitive information
Final Version after Iteration
Problem & Response Message
Only one most important message shows on one screen
The problem and response message from Aria has clear information structure and calm confidence
Act 2
Restaurant manager received Aria's message notifying the need for approving Aria's recommended decision or making other alternative decisions with context and risk analysis.
1st Version without Iteration
Act 2: Decision-making Message
Unstructured information hierarchy
Disconnection between relevant information, e.g. CTA button and recommended vendor
Final Version after Iteration
Act 2: Decison-making Message
Simple taps with mic feature on deciding the next step
Refined hierarchy with card-based context and calm, concise micro-copy
Interactive Prototype
Takeaways
01
Define a clear, realistic scope early
02
Prioritizing simplifying the user flow to support the core use case
03
Align quickly across product and design
04
Conversational UX is the core principles for designing AI communication
Conclusion
AI communication for supporting humans in the critical situations, e.g. making decisions, should be designed as dialogue that is built by UX language for how people listen under stress, not how they read when calm.
Future Plan
Build design system and design the user flow after taping alternative decision options
Prototype on Lovable
Design Solution Pitch Slides on Github
Superchat Design Challenge on XDesign Club Hackathon Website