Timeline
5 Weeks
My Role
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 that would help them scale while decreasing 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
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.
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
This course helped me understand how to identify AI’s strengths and apply them thoughtfully within a project. As a designer, I had to move away from the static flow mindset that relies on constant manual updates, and instead think in terms of systems that learn from real-time user interactions and detect patterns in data—ultimately improving the user experience while driving company goals. Overall, I found it interesting to incorporate AI into my workflow and am excited to see where it takes me.