JUSTKA

2.Refining the Chatbot Training Experience

JUSTKA

2.Refining the Chatbot Training Experience

JUSTKA

2.Refining the Chatbot Training Experience

Redesigned the chatbot platform, driving 766% more traffic, improving answer accuracy to 86%, and saving teams time with a reusable design system

Redesigned the chatbot platform, driving 766% more traffic, improving answer accuracy to 86%, and saving teams time with a reusable design system

Redesigned the chatbot platform, driving 766% more traffic, improving answer accuracy to 86%, and saving teams time with a reusable design system

Product

B2B AI SaaS Chatbot

AI Chabot SaaS

Role

UI/UX Designer

Duration

12 months

Team

UI/UX Designer x1 (My Role), Graphic Designer x1, Project Manager x2, Front-End Developer x2, Back-End Developer x2, AI Developer x3

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

  • JUSTKA AI Chatbot SaaS

Context
What is JustKa
Problems
Results
Impact
Solutions
Enhancing Visibility and Flows
Guiding New Users
Clarifying Special Terms
Solution Process
Collaborating with AI Team
Refining Flows
Prototypes
Design System
Final Thoughts
Learning & Reflection

Context


What is JustKa

What is JustKa - Illustration

JustKa is a no-code platform that enables staff from Customer service or Operations to manage and automatically reply to customer conversations using an AI chatbot, all from multiple channels such as Facebook and LINE in one place.

JustKa is a no-code platform that enables staff from Customer service or Operations to manage and automatically reply to customer conversations using an AI chatbot, all from multiple channels such as Facebook and LINE in one place.

JustKa is a no-code platform that enables staff from Customer service or Operations to manage and automatically reply to customer conversations using an AI chatbot, all from multiple channels such as Facebook and LINE in one place.

Why the platform needed a redesign
Poor SUS (System Usability Scale) Result:
Top 3 Problems Found in Usability Testing

  1. Users couldn’t easily find the main function:

    Users couldn't find the Uploading vocabulary function (the red dot in the image) because it's out of the user's attention area.

  1. Users couldn’t easily find the main function:

    Users couldn't find the Uploading vocabulary function (the red dot in the image) because it's out of the user's attention area.

  1. Users were confused about the main features:

    Even when they followed the instructions, they weren’t sure if they were doing it correctly.

  1. Users were confused about the main features:

    Even when they followed the instructions, they weren’t sure if they were doing it correctly.

  1. The interface lacked helpful hints or guidance:

    Leaving users unsure about the meaning of terms and what to do next.

  1. The interface lacked helpful hints or guidance:

    Leaving users unsure about the meaning of terms and what to do next.

Want to see how I got these insights? Go to the previous case study

Want to see how I got these insights? Go to the previous case study

Impact

Response Accuracy:

Response accuracy

Response accuracy

86%

86%

This means users understood how to train the chatbot, which led to improved response accuracy.

This means users understood how to train the chatbot, which led to improved response accuracy.

Traffic:

Monthly Traffic

Monthly Traffic

766%

766%

This meant our clients gained more confidence in the chatbot and were willing to let it handle customer responses.

This meant our clients gained more confidence in the chatbot and were willing to let it handle customer responses.

Intuitive Chatflow Builder:

Clients' Feedback

Building conversation flows is very intuitive.

Building conversation flows is very intuitive.

Building conversation flows is very intuitive.

The chatbot supports multimodal presentations.

The chatbot supports multimodal presentations.

The chatbot supports multimodal presentations.

Allows for extensive customization features.

Allows for extensive customization features.

Allows for extensive customization features.

Seamless Multi-Platform Integration: (Clients' Feedback)

Clients' Feedback

Consolidates scattered social media channels, making management highly convenient.

Consolidates scattered social media channels, making management highly convenient.

Consolidates scattered social media channels, making management highly convenient.

Aggregates data from multiple platforms, enabling comprehensive analysis and insights.

Aggregates data from multiple platforms, enabling comprehensive analysis and insights.

Aggregates data from multiple platforms, enabling comprehensive analysis and insights.

Solutions

  1. Enhancing Visibility and Flows of Main Functions:

To tackle the first problem "Users couldn’t easily find the main functions", I redesigned the main features page (shown in the before-and-after images below).

Because the main UI changed, the entire user flow for three features also needed to be redesigned. I proactively refined both the flow and the design for these features as well (details are in the Solution Process section).

To tackle the first problem "Users couldn’t easily find the main functions", I redesigned the main features page (shown in the before-and-after images below).

Because the main UI changed, the entire user flow for three features also needed to be redesigned. I proactively refined both the flow and the design for these features as well (details are in the Solution Process section).

Before

Before

Previous Version UI Highlighting the 3 Main Features

After

Refined Version UI Highlighting the 3 Main Features

  1. Guiding New Users with Onboarding:

To tackle the second problem "Users were confused about the main features", I added onboarding Instructions to guide new users.

To tackle the second problem "Users were confused about the main features", I added onboarding Instructions to guide new users.

UI: Onboarding Page Added Before the Intent Template Page

  1. Clarifying Special Terms for Users:

To tackle the third problem "the interface lacked helpful hints", I added explanations for special terms to help users better understand the content.

To tackle the third problem "the interface lacked helpful hints", I added explanations for special terms to help users better understand the content.

Illustration: Hints Activated for Intent Templates

Solution Process

Solution Process

1.Collaborating with AI Team

To better understand the rationale behind chatbot training, I actively worked with the AI developers, asking questions, evaluating feasibility, and trying to understand how the training process actually worked.

I learned that training an AI is a bit like teaching a child, you need to start with the basics and build up. For our product, we should follow this step-by-step process:

2.Refining Flows

To redesign the user flows, I created three new flowcharts that connected them on the same page, making the steps easier to follow as mentioned in the previous point.

To redesign the user flows, I created three new flowcharts that connected them on the same page, making the steps easier to follow as mentioned in the previous point.

The 3 main Flowcharts: Figma Link→

The 3 main Flowcharts: Figma Link→

Demo: The User Flow of the Vocab Settings

3.Prototypes

Based on the user flow, the prototypes were built as follows.

First Feature: Vocab Settings

Users can add and edit vocabulary and synonyms by a few simple steps.

Users can add and edit vocabulary and synonyms by a few simple steps.

Users can add and edit vocabulary and synonyms by a few simple steps.

Second Feature: Intent Templates

After building vocabularies, users can quickly create intent templates to train the chatbot to understand different intents in various situations.

After building vocabularies, users can quickly create intent templates to train the chatbot to understand different intents in various situations.

After building vocabularies, users can quickly create intent templates to train the chatbot to understand different intents in various situations.

Third Feature: Category Management

Users can easily manage vocabulary categories with just a few simple clicks.

Users can easily manage vocabulary categories with just a few simple clicks.

4.Design System

While this case study highlights how I solved key user problems, I also built a complete design system in Figma from scratch and kept improving it during my time in the role.

The product had two parts: the Admin Panel and the Instant Messaging Interface. I designed, named, and organized every component to make the system scalable, accessible, and easy for cross-functional teams to use consistently.

Admin Panel
Typography
Typography
Typography
Colour
Icons
Buttons
Drop-downs & Search
Visual Assets
Components
Page Status
Navigation Menu
Typography
Colour
Icons
Buttons
Drop-downs & Search
Visual Assets
Components
Page Status
Navigation Menu
Instant Messaging Interface
Typography
Colour
Icons & Buttons
Components
Typography
Typography
Colour
Icons & Buttons
Components

Final Thoughts

Learning & Reflection
A Bittersweet Ending

I couldn’t test the final design with users due to an unexpected company crisis. Half the design team was laid off. Although I wasn’t directly affected, I chose to leave, as the company no longer felt like the right fit.

Still, I was proud to see the new version go live. It boosted monthly traffic, improved response accuracy, and got positive client feedback, showing the work made a real impact.

Collaborating with the Tech Team

I’ve worked on many redesigns, but it was my first time diving deep into AI logic, and I spent a lot of time working with developers, asking questions, understanding limits, and iterating together.

It was the most technically challenging project I’ve done, and it taught me how important cross-functional communication is in AI product design.

CONTACT

EMAIL
Jasonyang21656@gmail.com
LinkedIn
Jasonyang21656

Ⓒ2025 Designed and Built by Jason Yang

CONTACT

EMAIL
Jasonyang21656@gmail.com
LinkedIn
Jasonyang21656

Ⓒ2025 Designed by Jason Yang

CONTACT

EMAIL
Jasonyang21656@gmail.com
LinkedIn
Jasonyang21656

Ⓒ2025 Designed by Jason Yang