Timeline
5 Weeks
Class
Maven - Master UX Design for AI
Context
The purpose of my project was to create an AI customer service chatbot for Zendesk to sell to Glossier, to help them scale while reducing customer drop-off.
PROBLEM
AI chatbots often miss users’ emotional cues, creating a disconnect with the company.
When chatbots fail to recognize emotional cues, users often feel dismissed or misunderstood, particularly during high-stress situations. This disconnect can lead to frustration, drop-offs, eroded trust, and unnecessary escalations to human agents.
SOLUTION
An emotionally intelligent chatbot plugin that detects real-time user emotions.
By combining dynamic tone adjustment, transparent communication, and seamless handoffs to human agents, it builds customer trust at scale while saving time and reducing unnecessary escalations—solving the impersonal and inefficient experience common in today's AI support tools.
EMOTIONAL INTELLIGENCE
Surface emotional context at a glance: The dashboard panel visualizes emotion, escalation risk, and urgency in real-time, giving agents an instant read on the customer's emotional state without requiring them to dig through the chat.
Helps agents act before tension peaks: The AI analyzes sentiment and suggests tone-aligned responses, thus enabling agents to intervene before customer trust is lost.
Human responses help customers feel understood. EmpathAI is fine-tuned on Glossier's past support transcripts, brand copy, and tone guidelines, enabling it to generate responses that reflect the brand's warm, minimalist, and affirming voice—even when adapting to frustration or urgency detected in real-time.
ACCURATE PHOTO ANALYSIS WITH CONTEXT
Detects product issues automatically: EmpathAI uses computer vision to scan uploaded photos for common damage types, such as cracks, leaks, or broken packaging, and assigns high-confidence labels.
Assesses photo quality in real time: The AI evaluates clarity, lighting, and focus, prompting customers to retake images that are unclear before an agent gets involved—reducing back-and-forth communication.
Supports faster, fairer resolutions: By instantly verifying visual evidence, the AI helps agents approve refunds or replacements more quickly and consistently, thereby improving customer satisfaction.
EFFICIENT PERSONALIZED ATTENTION
Gives agents instant access to context: The panel displays past orders, return history, and loyalty status, helping agents quickly understand the customer's relationship with the brand.
AI spots behavioral patterns: The AI analyzes return frequency, product-specific issues, and timing trends to flag repeat problems or edge cases that may need special handling.
Recommends personalized resolutions: Based on the customer's history, the AI suggests custom actions—such as offering a gift card to retain a loyal customer or escalating a recurring issue to the product teams.
JOURNEY MAP
Users are uncertain whether an AI can accurately understand their issue. At best, they expect slow, impersonal responses from an AI. When they experience robotic tone, repetition, or rigid policies instead of empathy and clarity, it reinforces their negative expectations.
AI OPPORTUNITIES
Summarizes emotions/issues in real time to reduce repetition and streamline support
Analyzes uploaded photos for product issues and prompts for retakes if unclear, speeding up resolution
Identifies patterns in order or return history to recommend personalized resolutions to prevent scams and retain loyal customers
BUSINESS OPPORTUNITIES
Reduces average handle time (AHT) by supporting agents with pre-filled context and replies
Increases customer satisfaction (CSAT) by making interactions feel empathetic and efficient
Prevents churn and returns by turning emotional moments into trust-building opportunities
FLOW CHART
I created a flow chart from both the agents' and the users' perspectives. Its purpose was to clarify the process before I started prototyping.
DESIGN PRINCIPLES
DESIGN
Major Improvements
I created low-fidelity mockups using UX Pilot. My prompt included a dashboard with an emotional summary, a chat, and a customer information section. I added details on each section and chat contents for context. Based on feedback from 12 peers, I continually iterated over a period of 5 weeks, implementing three significant improvements.
Swap the position of customer information and chat.
Instead of organizing the chat and supporting information in a left-to-right hierarchy, I decided to reverse their order to closely align with the established user mental model for chat conversations.
I moved the customer history and alerts to a sidebar on the right to simplify the chat conversation, reducing cognitive load and adding clarity.
Suggest responses in the chat.
AI is becoming natively embedded in digital life. As a result, users are quickly developing a mental model of AI as a tool in a chat function, with Gemini in Gmail being a notable example.
Removing the responses and quick actions from the side and adding them directly to the chat makes the experience more efficient and reduces cognitive load.
Add time to the resolution info.
The purpose of creating this product was to enhance customer service efficiency. This feature will keep agents' goals top of mind, so they can escalate if warranted.
I also added a pop-up at the end letting them know how they did against their goal for psychological reinforcement.
PROTOTYPE
I originally built this prototype using Magic Pattern, which allowed me to create multiple iterations in real-time. Once I had the prototype, I exported it to Figma. If I were going to build an interactive prototype, Magic Pattern would be a helpful tool. However, this project requires a specific conversation to demonstrate a use case. If I were to start this project again, I would have skipped the lo-fi version and gone straight to Magic Pattern or Loveable for the quick iterations, old mental model die hard.
Scanning Animation
Rive files can’t be directly embedded into Figma, so I made a separate animation. The scan shows the user that the AI is analyzing the image.
Cardflip Animation
As the AI detects a change in the users’ emotions, the card flips, alerting the agent of the change.
REFLECTIONS
Lessons from the project
From a product perspective, the most important decision of this project was knowing when to loop in the human agent. The business goal was to scale the customer service operation without sacrificing customer loyalty. The lesson here was that AI can augment human interaction without feeling like a takeover. The AI can quickly assemble context so the agent can provide a personalized recommendation that makes the customer feel heard.
From a process perspective, this project revealed a fundamental shift in design thinking. I started with the traditional lo-fi-to-hi-fi journey and soon realized it was unnecessary. Lo-fi artifacts externalized reasoning, invited discussion, and forced decisions over weeks of iteration. But when tools like Magic Pattern collapse the time-to-fidelity loop to near-zero, that distributed thinking disappears with it. What I found is that the intellectual work of defining the actual problem, aligning on what success looks like, and deciding what not to build has to happen at inception with greater rigor than before. There is no longer a slow middle process to catch what you missed. The speed is both generous and unforgiving.