New User Onboarding | BotBonnie

Key Summary

BotBonnie is a well-known Taiwanese startup and an official authorized partner of LINE, focusing on conversational AI chatbot solutions. In the past, BotBonnie's platform lacked a guided tutorial, and the complex chatbot-building process led to a high churn rate among end users. This project aims to address this issue.

• Designed the Onboarding process and UI, optimizing the newcomer guidance flow with an overall completion rate exceeding 70%
• Planned and executed usability tests, and summarized design improvement suggestions to enhance usability evaluation scores

Background and Objectives

As enterprise-level software, BotBonnie invested significant resources in customer education and training, which revealed that the platform's learning curve was still too steep for users to build and publish chatbots independently. The goal of this project is to guide users step-by-step through the product's basic operational logic using the "Tooltip" method.

Success Metrics

• Help users understand what steps are needed to publish a chatbot
• Create a high tutorial completion rate
• Create a high tutorial entry rate

Challenges and Limitations

• Tutorials in other products have been proven to be frequently skipped or closed
• The longer (more detailed) the tutorial, the lower the completion rate
• Striking a balance between detail, completion rate, and interactivity
• Must use Tooltips because they require fewer development resources

Competitive Research

After researching 20+ products, we found two approaches to handling complex onboarding processes:

1. Using video tutorials: This method can be considered a trend in recent years, most commonly seen in complex software like Maze, Webflow, Adobe XD, and other design tools. These platforms extensively use videos for guided tutorials. Tooltips don't disappear but focus on introducing basic information for different sections of the interface.
2. Learning by doing: This was a more common approach in the past. As users learn step-by-step, it helps clarify complex concepts.

Just to connect two modules, the user flow requires 4 clicks, and this is only one of the concepts we want to convey. Theoretically, this should be done through video tutorials to avoid high drop-off rates caused by too many click steps. However, due to technical limitations, we must use Tooltips. Therefore, we decided to adopt the learning-by-doing approach. Consequently, balancing the number of steps and learning effectiveness became one of the most important design considerations.

Design Concept & Strategy

Although there are many steps overall, we only need to convey three concepts in this process:

1. How to connect modules
2. How to link the chatbot to a fan page or official account
3. How to test and publish

Therefore, I applied cognitive psychology theory to break down the series of tutorials, using "transitions" to create memory chunks. Each chunk contains fewer than 4 steps, making it easier for users to remember and recall the content we're conveying.

Additionally, drawing from the registration process experience, the initial content strategy for onboarding uses a reassuring tone to provide clear explanations.

Another limitation of this design is that we won't include a feature to restart the tutorial. Therefore, during the wireframe stage, I still considered how we could design for more onboarding scenarios in the future:

• For users who want to review the tutorial after confirming exit and editing → Design a learning resources page that can track learning progress and play corresponding tutorial videos as needed

• Explanations of other features on the screen → Design animations and integrate them with Tooltips to make technical terms more understandable

Design Iterations

User testing

After completing the first version of the prototype, I wanted to understand new users:

• Whether they could clearly understand the content interpretation
• Whether they were willing to complete the process

Therefore, I conducted remote usability testing and found the following overall issues:

1. The colour of the tooltips was too similar to the overall page, sometimes making it unclear when they appeared
2. The guidance was not prominent enough when switching pages or starting to edit modules
3. The feedback was not clear enough at the end of each stage of the tutorial
4. The tutorial content was too detailed, with many phrases added to stabilize emotions, but at the onboarding stage, everyone could understand that this was not actually editing the chatbot

Design Improvements

1. Enhance the sense of transition and maintain immersion in the process

2. Tooltips’ contrast adjustment, copywriting improvement, and step-by-step guidance enhancement

Results

The tutorial's attractiveness was not high enough, but performance was better than expected

• Less than 40% of new users chose to enter the tutorial, including those who initially wanted to skip or close the welcome modal but returned to the tutorial
• 19% of clicks were to skip the tutorial; the exact number of those who closed the tutorial is unknown due to lack of tracking

The design of repeatedly confirming the closure of the tutorial has a certain effect, and those who return to the tutorial have a high completion rate

• About 1/4 of users returned to the tutorial after initially seeing the confirmation modal to close it, and ultimately 2/3 of them completed the process

Those who entered the tutorial process showed a high willingness to complete it, but only skimmed through quickly

• The completion rate for the entire tutorial exceeded 70%
• The median completion time was 48 seconds, which is less than the time it would take to read through the content normally

中文版：新用戶引導設計

BotBonnie 為台灣知名初創公司，亦為 LINE 官方授權合作夥伴，專注於對話式智能機器人解決方案。過去 BotBonnie 的平台上並沒有引導教學，較為複雜的機器人建置流程讓 C 端使用者流失率過高，此專案就是要解決這樣的問題

• 設計 Onboarding 流程與 UI，優化新手引導流程後整體通過率超過 70%
• 規劃並執行易用性測試，歸納設計改善建議，以提升易用性評量分數

背景與目標

作為企業級軟體，BotBonnie 花了許多資源在客戶的教育訓練，也因此了解到平台的上手難度對於使用者而言還是太高，難以自己完成機器人並且發布。此專案目標就是透過「Tooltip」的方法，引導使用者一步步學習產品的基本操作邏輯

成功指標

• 讓用戶理解要發布機器人需要完成什麼環節
• 創造高教學完成率
• 創造高教學進入率

挑戰與限制

• 導覽在其他產品上已經驗證很常被略過或關閉
• 導覽越長(仔細)完成率越低
• 在詳細度、完成率、互動性中取得平衡
• 一定需要使用 Tooltip，因為這在開發上所耗資源較少

競品調研

在研究 20+ 個產品之後，發現在處理較為複雜的上手流程時，有以下兩種做法：

1. 使用影片播放教學：這個方式可以說是近年來的趨勢，最常出現在操作複雜的軟體，如 Maze、Webflow、Adobe XD 等設計工具，都大量使用影片進行引導教學，而 Tooltip 並不會消失，只是會著重在介紹版面上各個區塊的基本資訊
2. 邊做邊學：這在以往是比較常見的方式，由於一步一步學，會叫能夠釐清複雜的概念

光是要將兩個模組串連在一起，使用者流程就需點擊 4 步，而這只是我們想傳達的觀念之一，理論上這應該透過影片教學來避免點擊步驟太多形成的高流失。但由於技術限制一定要使用 Tooltip 完成，因此還是決定採用邊做邊學，因此在步驟數跟學習成效之間的平衡成了設計最重要的考量之一

設計概念 & 策略

雖然整體步驟數很多，但此流程我們要傳遞的概念只有三個：

1. 如何連結模組
2. 如何連結機器人至粉絲專頁或官方帳號
3. 如何測試與發布

因此我引用認知心理學的理論，將一連串的教學切分開來，利用「轉場」創造出記憶模塊（Chunk），而每一個模塊裡的步驟數盡量小於 4 步，使用者能因此更容易記憶與回想我們傳遞的內容

另外，汲取註冊流程的經驗，Onboarding 在初期內容策略，是用讓人安心的語調清晰說明

這次設計的另一個限制是不會設計重新開始教學的功能。因此在 Wireframe 階段，我仍然考量了未來如果要發展更多的上手情境可以怎麼設計：

• 確認退出並編輯過後想重看教學 → 設計學習資源頁面，可追蹤學習進度，透過影片播放所需的對應教學
• 畫面其他功能說明 → 設計動畫並以 Tooltips 整合呈現，讓專業名詞更加易懂

設計迭代

User testing

做完第一版 Portotype 之後我想了解新用戶：

• 在內容解讀上是否能清晰理解
• 是否有意願走完流程

因此我進行了遠程易用性測試，並發現就整體上的問題來說有了以下幾點：

1. Tooltips 的顏色跟整體頁面太相近，有時候會不知道有跳出來
2. 頁面切換時、模組開始編輯時的引導不夠明顯
3. 一個階段的教學結束時，回饋不夠明顯
4. 教學內容太過細節，有許多為了穩定心情而加入的詞語，但在 Onboarding 階段，大家反而能夠理解這並不是在編輯機器人

設計改版

加強轉場感，維持流程沈浸

Tooltips 對比調整、文案改善、加強步驟指引

成效

教學的吸引力不夠高，但表現比預期好

• 僅不到 4 成的新用戶選擇進入教學，包含一開始想略過或關閉歡迎 Modal 但重返教學者
• 有 19% 的點擊略過教學；關閉教學者因沒有埋到點，故無法得知確切數字

重複確認關閉教學的設計產生一定的作用，且重回教學者有高比率走完教學

• 約 1/4 的使用者在一開始看到確認關閉的 Modal 後重返教學，其中最終有 2/3 的人完成流程

進入教學流程者有高度意願完成教學，但只會快速瀏覽

• 整個教學的完成率超過 7 成
• 完成時間中位數 48 秒，小於正常閱讀完內容的時間