Zaapi | No-Code AI Agent & Automations

Democratizing AI Agent & Automation: A No-Code Chatbot Builder

Led the UX initiative to simplify complex AI workflows, empowering non-technical business owners to build their own customer service agents without writing a single line of code.

+95%

Drop in unresponded chats (from 95 → 5 per week claimed from client)

+87 %

Faster replies (cut average response from 1 h 24 m to 11 m claimed from client)

+10×

More AI feature usage after introducing the new AI branding and relocating the button

No items found.

Problem & Context

Why was this project initiated?

Automations

  • To close the automation gap vs. competitors and meet market expectations in Thai SaaS.
  • To introduce a “sticky” feature that boosts agent efficiency and drives renewals.
  • To establish a foundation for future marketing and chat automations (e.g. segmented broadcasts, comment capture).

AI Agent

  • ChatGPT (public product launch) → November 30, 2022 so we need to rapidly adopt this new normal ASAP
  • Customer Expectations agent to reply asap: eCommerce sellers demanded faster, reliable support without sacrificing the human touch.
  • Operational Bottleneck to scale CS team: Human agents were reaching unsustainable workload levels — ~7,000 messages/month/agent — creating scalability and burnout risks.
  • Financial Strain: Hiring additional agents to support growth would cost ~$600/agent/month, translating to $21,000/month for a 35-agent equivalent team.
  • Strategic Expansion: Scaling customer support for emerging markets (Thailand, MY, SG, PH) without linear human cost increases was critical.

User personas & pain points

Customer service / Business manager

  • Role & Responsibilities: Manage chats, team and satisfy customers. Set up the automated process to reduce chat agent workload. Maintain good SLAs for each e-commerce platforms.
  • Pain points:
    • Needs to meet SLA standards of every marketplace I use, each of which has different requirements
    • No agents want to work outside of business hours
    • Don't want to hire more agents as it will increase company cost and time on training
    • I want my customer to get the great customer service (hospitable and empathetic), I avoid setting AI chatbot for my chat channels as it can sound too robotic.

Chat agent

  • Role & Responsibilities: Handle customer inquiries across all integrated channels–providing product information, updating stock, order status, resolving issues, and handling customer's frustrations.
  • Pain points:
    • Struggles to handle all chats when having high volumn chats like on campaign days
    • Don't want to answer customers outside of business hours. Needs real time off after work.

Success metrics

For client (users)

Customer Experience & Resolution
  • Increase in response rate
  • Decrease in number of miss chats
  • Decrease in response time (time customers waiting for agent to reply)
Efficiency & Cost Savings
  • Human agent time and resource saved
  • Automated conversation volume

For Zaapi

  • Automation feature adoption rate (usage)
  • Revenue from subscription of this feature or more users subscribing plans with this feature (prove product-market fit)
  • Number of chats fully and partial automated from automations and AI

Process & Research

Automations

Design process

Zaapi’s vision map, sketched before any features existed: automations become the first line of defense—handling common enquiries to reduce support agents’ workload.
We start with understanding the real problems and user pain points, their daily tasks and underlining needs first before defining the scope.

Research approach

  • 5 user exploratory interviews (sellers, agents, managers) for problem discovering problems and defining the scope
  • Created empathy maps and journey maps
  • Validated user assumptions and automation readiness

Exploratory interview findings

Post-interview, we synthesized key user patterns into these personas.
Empathy map for the “Simplified Process Manager” persona.
Customer journey map for the “Simplified Process Manager” persona.
Empathy map for the “Tech Savvy Manager” persona.
Customer Journey map for the “Tech Savvy Manager” persona.
Empathy map for the “Missing-chat Concerned Agent” persona.
Customer Journey map for the “Missing-chat Concerned Agent” persona.

Key insights

Most users want simple automations that cover their essential needs which is key to feature adoption.

With automations, we have found that many users want to keep things simple and are overwhelmed with too many customization. As a result, we will start with very user friendly templates of the most important automations, and open up to those features to more advanced customization in the future. This not only simplifies the experience for the user, it also increases our speed to market by reducing the number of variables/complexity involved in the feature.

Feature Prioritization

Chose features by balancing core user needs with users’ technical comfort levels.
Here’s how we mapped user needs and technical comfort levels into our roadmap.

AI Agent

Design process

We didn’t follow a traditional discovery process—because we’d already anticipated the AI trend, we partnered with developers to prototype new AI features before ChatGPT and similar tools became widely used. Our design process kicked in afterward, focused on solution validation through real usage rather than problem discovery.

Before (MVP): This is Zaapi AI 1.0 (beta) in Sep 2023 — we don’t even call it a “chatbot” or “AI agent,” since it only generates draft messages for users. We’re cautious because AI can be unreliable at that time.
Our design process kicked in afterward, focused on solution validation through real usage rather than problem discovery.

Research approach

  • Validation through real usage for the MVP version
  • After the feature is launch as we see the usage, we conducted exploratory and solution validation interviews for feature improvements

Key insights (MVP version)

UI validation: Validated directly in the live app—renaming “AI suggestion” to “AI response,” refining its accent color, and moving the control into a more prominent spot for better discoverability.
After (Impact): That single tweak — switching the AI button from icon-only to an outlined icon + label — drove daily AI events from an average of 10 per day to a peak of 85, a +750 % surge.

AI improvement interview findings (focusing on AI performance)

Research objective
Primary goal (exploratory interview)

Understand what real users expect when it comes to measuring AI performance in customer service — including how they track key AI-related KPIs such as resolution rate, enquiry categorization, and CSAT — and how these metrics reflect the impact of AI on team efficiency and business outcomes.

Secondary goal (solution validation)

Explore users’ experiences activating, training, and using AI chatbots — both within Zaapi and on other platforms — to identify key pain points, gaps, and opportunities for improving AI feature adoption and usability.

Participant criteria for AI performance & adoption study
  • Primary persona: Managers adopting AI agents to support their companies and tracking AI chatbot performance
  • Secondary persona: Experienced in AI activation, training and usage

Solution validation for AI‐chatbot setup
Key insights on AI feature improvements
Expectations for AI performance tracking
  • Reduce agent workload: AI serves as the first line of defense, escalating only when needed, to lower human-agent staffing requirements.
  • Key metrics to track: Full vs. partial resolution rates, agent time saved, and the volume of chats handled by AI vs. human agents (filterable by channel and account).
  • Clarification on “AI-closed chat”: define exactly when and how a conversation is considered closed by the AI.
Case management tracking
  • Categorize by intent: Tag each chat with an intent category to monitor daily case volumes received.
  • Monitor AI escalations: Track conversations AI could not resolve due to missing data or insufficient training, and use these insights to guide targeted data updates and resource allocation.
Quality of AI responses
  • Empathy & accuracy audits: QA manually reviews AI replies to ensure empathetic tone and correct information.
  • Transparent reasoning: Surface the AI’s decision process and source data for each response to build trust.
  • Guided training & gap remediation: Provide clear templates and data-format guidance, plus a consolidated “escalations” view with suggestions to fill content gaps and improve AI accuracy.

Solution

Automations

Phase 1: Basic Automation Templates

Feature highlights
  • Designed 4 core templates (e.g. auto-assignment, automated message–greeting and out of hours, comment reply, label tagging)
  • UI: 1-page form-based setup with live chat preview
  • Reduced onboarding friction and launched quickly
Userflows, wireframes & validation
Userflows
User flows: First time to automation, Have set up at least 1 automation, Set up automation
Lo-fi sketches
Sketching the entry point for automation feature
Weighing between placing the feature in team management for an effortless entry point or placing it in the navigation to make it its own are
Sketching the template selection modal, and the automation list for managing multiple created automations.
Sketching the automation creation page template for all automation types.

Hi-fi prototypes
Our rapid usability tests showed the Phase 1 templates met over 80 % of user needs with zero learning curve—users described it as ‘like filling out a form.’ They also exposed pain points around advanced logic and a strong demand for more automation types, directly shaping our Phase 2 visual flow builder.”
Automation list templates
Exploration #1: Template selection via modal, with all templates visible on a single page.
Exploration #2: Dedicated navigation tabs for each automation type, providing clear entry points.

Automation creation templates
Exploration of automation creation templates
Handover to developers

To ensure a smooth transition from design to development, we prepared comprehensive documentation and resources:

  • Feature Purpose: Clarified the "why" behind each feature to align with business goals
  • User Personas: Detailed profiles to inform development decisions
  • User Flows: Provided step-by-step guides for each automation template
  • Design Specifications: Included annotated designs with component behaviors and states
  • Prioritization: Outlined scope and prioritization to focus development efforts
Give developers a clear picture why, what and how are we building this and how can create values to users through building this feature.
Learning and measuring success

After gathering feedback on customer workflows across different company types, we identified that larger companies require more advanced chat workflow customization. This insight led us to move forward with Phase 2 of automation: Custom Flow Builder, which was decided after approximately 6 months of analyzing results and user demand.

Metrics:

  • Number of Add-on Subscriptions: Indicates demand for the feature
  • Customization Requests: Reflects the need for workflow customization from users
  • Company Direction: Aligns with the strategy to attract larger-sized company customers

Phase 2: Custom Flow Builder

Feature highlights
  • Introduced a drag-and-drop flow system for large teams to build complex logic visually
  • Modular card-based interaction (e.g., triggers → filters → actions)
  • Designed entry points, flow creation UX, and system feedback mechanisms
Design System Elements:
  • Automation cards, trigger-action blocks, custom chat previews
  • Reusable layout patterns for rule setting, condition blocks, fallback flows
Flow Builder trigger selection (Create flow entry point)
Flow Builder next node selection (step in the flow)
Flow Builder interface

AI Agent

Chat screen & AI reply
AI thinking
AI testing
AI performance dashboard

Reflection

For automation (validated market)

With clear user demand in hand, we focused on core needs to deliver a minimal lovable product. By breaking the big automation feature into bite-sized releases, we solved the highest-impact problems first and made subsequent enhancements more manageable.

For AI agent (unvalidated market)

Entering an emerging space, we leaned into rapid prototyping and “learning by doing.” Embracing quick experiments (and inevitable failures), we stayed close to real users—iterating fast on feedback to uncover the right product–market fit.

No items found.

Let’s do amazing works together!

See at a glance what I can bring to your business and team.

Download my resume

©2025 UX by Nana -  Product Design Lead Specializing in User Experience Design. All rights reserved.