Vyin AI Chatbot: Response Strategy

Empowering users to manage how the chatbot responds by bridging the gap between
AI automation and manual control

Overview

Vyin AI Chatbot is a B2B2C chatbot platform designed to help businesses scale their customer service by allowing users to manage and monitor customer-facing chatbot interactions. This project focuses on bridging the gap between automated AI interactions and manual user control.


My Role

Product Designer

Collaborators

2 Product Managers
1 Design Partner
2 Backend Engineers
1 Frontend Engineer
1 ML Engineer

Duration

2 months

Company

Gamania

The Problem

High Efficiency, Low Control

While AI-driven knowledge extraction significantly reduces the manual effort of building a knowledge base, users currently have zero manual control over specific chatbot responses. They are unable to intervene in AI-generated answers or provide custom responses for edge-case questions that fall outside the existing knowledge base. This lack of flexibility leads to frustration and a lack of trust, as users cannot ensure the accuracy of interactions or intervene to refine how the bot responds to customers.


The Design Challenge

How might we bridge the gap between AI-generated outputs and manual control, enabling users to seamlessly intervene within an AI-driven knowledge framework?

Design Solution

The new Response Strategy module empowers business users to take full control over how the chatbot responds to customers by utilizing AI knowledge entries to enhance multiple answer variants.

The New Module: Response Strategy

The Response Strategy module empowers business users to architect and manage the Q&A logic of how the chatbot interacts with customers. The human-in-the-loop intervention grants users granular control, ensuring high accuracy and building long-term confidence.


Design Goals

To bridge the gap between complex AI logic and user manual control, I established three foundational goals.

Predictability

Ensure system transparency so users can accurately anticipate and verify bot responses

Control

Empower user agency by providing intervention points to define bot responses

Trust

Reduce user frustration and build confidence in the system and its AI-generated outputs

Technical Discovery & Logic Mapping

Navigating the Complexity of Knowledge Graph Structures

At the project's onset, I collaborated closely with PMs and engineers to deep-dive into the Knowledge Graph’s underlying logic and AI data nodes. This early technical synchronization allowed me to clearly map the existing system’s boundaries, ensuring that any design intervention remained technically viable, scalable, and aligned with our backend architecture.

Strategic Direction for Time-to-Market

After understanding the technical boundary, we were sure that making changes to the core knowledge base architecture would require massive time and development cycle and effort. However, our customers’ pain points were urgent and needed immediate resolution. To deliver value quickly, we made a strategic decision based on initial technical consultations: instead of a risky architectural overhaul, we pivoted to a modular solution—designing a standalone feature for editing, which was the most viable path under limited resources. This strategic direction allowed us to empower users with the control they needed without being blocked by backend complexity, ensuring a faster time-to-market for this critical feature.


User Flow Proposal and Technical Feasibility

Once the strategic direction was set, I translated the initial concept into several flow diagrams and led sessions with PMs and Engineers to ensure technical feasibility. We specifically focused on:

1. Identifying how the new editing module interacts with the existing AI generated Knowledge Base module.
2. Mapping various use cases, such as potential conflicts between manual edits and automated AI data nodes.
3. Consulting with engineers to assess how the new logic would affect interconnected features and the overall system architecture.

This collaborative refinement ensured that our solution was not only fast to market but also technically robust and scalable.

Refinement and Iterative Alignment

Following the logic-validation sessions, I synthesized the feedback into a refined user flow. This iteration specifically addressed potential system conflicts identified by the engineering team, ensuring a graceful balance between manual user edits and automated AI updates. To ensure a smooth hand-off, I led a final alignment walkthrough with all stakeholders.

We achieved consensus on:
Conflicting Logic: Establishing clear rules for when manual edits should take precedence over AI-generated data.
Scalability: Ensuring the modular editing approach can accommodate future structural enhancements.

By finalizing this technically-aligned blueprint, we transformed a high-level strategic direction into an actionable, low-risk development plan.

Initial User Flow and Cross-functional Feedback
Finalized Flow

Leveraging Design Systems for Rapid Ideation

After aligning the final flow, my design partner and I leveraged our Design System library to build high-fidelity mockups, enabling us to rapidly explore a wider range of interaction patterns. We then brought these mockups into discussions with PMs and Engineers to gather feasibility feedback early and iterate quickly.


Exploring layout options using Design System components

Design Trade-offs for Urgent Timeline

Two-Phase Delivery Roadmap

During the implementation phase, a technical assessment revealed that certain features involved complex architectural dependencies, requiring extensive restructuring that exceeded our planned timeline. To meet the urgent launch deadline, I collaborated with PMs and engineers to define a two-phase delivery strategy. We prioritized an MVP that addressed the most critical user needs while deferring high-complexity items to the future roadmap.

Phase 1 (MVP)
Phase 2 (Final Version)

Highlights of Final Design

Smarter Responses Through Structured Inputs

Users can provide key information inputs, giving the chatbot the context it needs to handle complex customer inquiries with accurate, consistent responses — combining human expertise with AI efficiency at scale.

Response Predictability
Users can preview generated responses instantly to see exactly how their inputs influence the AI's logic. This transparency ensures predictability and aligns user expectations, allowing users to verify AI behavior and gain full confidence in the output before it goes live.
Accelerated Input Efficiency
To streamline the creation process, I implemented a proactive search mechanism that automatically surfaces relevant assets from the knowledge base as users type. This eliminates the need for manual navigation, allowing users to leverage existing data instantly.

Reflections

Designing for AI

Through this challenging project, I learned that transparency is just as important as accuracy. It’s not just about the user’s flow, but understanding how AI fits into their journey. I realized that my role is to find the right balance between automation and human intervention—giving users enough control to feel confident, without losing the efficiency that AI provides.

Cross-Functional Alignment

Success in this project was deeply rooted in early and frequent collaboration with Engineers and PMs. By bringing high-fidelity mockups into feasibility discussions early on, we were able to identify technical constraints quickly. This ensured that our design was technically feasible and buildable solution that met our urgent deadline.