Company

Tokyo Techies

Kotae AI

Responsibilities

Product design

UX writing

Design system management

Usability testing

Timeline

6 weeks

Team

Nicha

Project Manager

Duy

Tech Lead

Josue

AI Engineer

Alice

Quality Assurance

Omar

Lead Designer

Brian

Product Designer

Tools

Figma

Kotae, Version 2

Kotae, which means "answer" in Japanese (答), is the newest AI website chatbot on the market. It is customizable, easy-to-set-up, and targeted toward small-to-medium sized businesses, organizations, and websites.

Background

We initially developed Kotae for KleverSuite to improve user navigation and learnability. We later realized that this technology could be used on any platform or website, so we decided to market it to website owners, enabling them tailored customer support for their own site.

My job was to take Kotae from a proof-of-concept to a consumer ready product, which we simply call V2.

Deliverables

My primary deliverable was reducing the onboarding drop-off rate by 82% and time-to-completion by 60%. I was also tasked to lead the redesign of the platform’s user interface.

This case study will first provide an overview of the revamped onboarding flow, followed by a look at the updated UI.

Evaluative research

We started with a Red Route Analysis to identify the critical tasks essential the product’s success.

We decided to test Kotae’s initial subscribe and set-up process, which we later validated through usability testing.

Problem

We uncovered a staggering 70% abandonment rate during onboarding.

Secondly, the platform lacked of a tutorial for first-time users, which led to confusion and frustration.

Populated Analytics Dashboard

Original onboarding flow

While it successfully funneled users toward account setup, we felt that it was too onerous and introduced unnecessary friction, asking too much of users before showing them the product itself.

To confirm this, we conducted a handful of user tests.

Research & Findings

We conducted usability tests with 17 individuals who are familiar with customer service and building a website, and have never seen or heard of Kotae before.

12 out of 17 (70%) users stated that requiring a credit card would have prevented them from continuing the trial.
Once inside the platform, users were unsure of what to do first and found the features unclear.
The average time to completion was ~15min.

Oh I have to put my credit card in already? I don’t even know what I can do with [Kotae] yet.

What am I supposed to do now? How can I try the product or see how it works?

Solution hypothesis

After aligning with the primary stakeholders and developers, I hypothesized that an onboarding flow designed to achieve the following would significantly reduce the drop-off rate and confusion:

Get users to touch and personalize the product as soon as possible.
Delay any commitments such as an email or credit card.
Educate the users on the basic, essential features and capabilities.

Stage 1: Test your Website

One less step

For an even more seamless experience and a lower barrier to entry, I proposed placing this input field directly below the homepage hero for easier access.

Stage 2: Customize Kotae

Preview elements float, shift, and change according to color selection

Results

The same 17 participants returned to this new flow with much more positive feedback. Of the original 11 who chose not to continue with the onboarding flow, 9 decided to proceed this time, resulting in a 83% reduction in drop-off rate.

They appeared significantly more engaged going through the process, training their website, customizing the UI, and testing the bot as if it was their own. Additionally, the average time to complete tasks dropped by over 60%, from approximately 15 minutes to just 6 minutes.

Platform redesign

On top of improving the onboarding experience and conversion rate, I led the entire redesign of our platform. Since the product is very young, I was given the creative freedom to take the look and feel into a wide range of directions.

A lot of freedom can make it difficult to make a choice, so I spoke to the developers and learned that speed was a priority—after all, we only had two months to do this. So, I went with the shadcn design system, which only recently launched a full-fledged Figma UI kit to accompany their front-end components.

This came in at perfect time, and created the foundation of our designer-developer workflow.

Populated Analytics Dashboard

Dashboard widgets displays data based on selected time range

Empty Analytics Dashboard

Kotae chat-box: empty, recording, and filled state, from left to right

Populated Chat History page

Chat History, filtering-by-tags interaction

Creating, hovering over, and editing tags

Website Training page

Files Training page, mid-upload

Creating a Custom Response modal

Keywords Training page, behind a paywall

Mobile users

We discovered that about 14% of our users check Kotae on their mobile phone at least three times a week, so I made sure that was responsive too.

Mobile versions of Dashboard, Chat History, Conversation, and Custom Response pop-ups, from left to right.

What's next?

We only had 3 months to launch, and we had so many ideas. Narrowing down features, ideas, and changes was a challenge, but now we're ready to take on what we de-prioritized.

Moving forward, we know we want to provide more analytics, create a modular dashboard, design a more intuitive Customize Appearance page, and even build a supporting mobile app for users who are constantly on the go.

Final thoughts

I've never learned so much more in a project, and I had a great time. For Kotae, I am the primary person-in-charge of our Figma environment, so I learned a lot about design system management, branch and iterative cycles, change-logs and documentation, and new UI design techniques.

Our team only consisted of six people, and I can't believe how much we were able to accomplish in such little time. To have demonstrated every bit of our work in this webpage would have lengthened it by at least 10-fold. This project wouldn't have been executed without my amazing project manager, Nicha, and our talented tech-lead, Duy.