Signup Revamp | BotBonnie

Key Summary

BotBonnie is a well-known Taiwanese startup and an official authorized partner of LINE, focusing on conversational AI chatbot solutions.

• Optimized the registration process and UI, ultimately increasing new user conversion rate by nearly 20%, and the total number of chatbots created by new users weekly increased by over 5%
• Planned and executed usability tests, and summarized design improvement suggestions to enhance usability evaluation scores

• Key Summary
• Background
• Objectives
• Challenges
• Competitive Research
• Interface Layout
• Process
• Design Concept (Wireframe)
• Main Design Decisions
• Design Iteration
• User testing
• A/B Testing: The test group without Email and Purpose fields showed better conversion rates both for entering the registration process and completing it compared to the group with fields
• Results: The new process effectively helped improve key metrics since its launch
• 中文版：BotBonnie 註冊流程改版設計
• 背景
• 目標
• 挑戰
• 競品分析
• 介面排版
• 流程
• 設計概念（Wireframe）
• 主要設計決策
• 設計迭代
• User testing
• A/B Testing：無 Email 與目的欄位的測試組，無論在進入註冊流程或完成註冊流程的轉化都優於有欄位的組別
• 成效：新版流程自上線後有效幫助關鍵數據提升

Background

As a chatbot-building platform, our North Star metric is the "number of active chatbots". In the old registration process, more than half of new users wouldn't create a chatbot after registration, which was a factor in reducing the number of active chatbots. Although we had chatbot templates in the past, they didn't necessarily meet all needs, and if users chose a blank project, it was challenging to build a chatbot without guidance. Therefore, we aimed to design a new registration process allowing users to create a basic chatbot after registration.

Objectives

• Increase the rate of new registered users creating chatbots
• Increase the number of chatbots created by new users weekly

Challenges

To transform a blank chatbot into a basic one, following the default usage flow, many steps are required; additionally, addressing setup needs during the registration process requires minimizing the number of steps as much as possible to improve completion rates.

Competitive Research

Studied 20+ products, analyzed their interface and process patterns, and extracted applicable elements.

Interface Layout

Mainstream SaaS products actually only need one column to fill in data on the page, but research has found that many products have a lot of white space when using just one column. Therefore, there are three characteristics:

• Left-right split screen as the main design pattern
• The main interaction area needs to allow users to focus on the interaction
• Blank areas may display user recommendations, brand identity elements, or interaction result previews based on product characteristics.

Process

Although there are many types of registration processes, the following three are the most common among similar/same industry products:

• Customized experience: Does not touch the core process settings, but presents the final appearance and invites users to adjust customizable aspects
• Advance setup: Set up basic configurations during registration, allowing users to get started faster once they enter the product
• Learn as you go: Registration is Onboarding

→ The advanced setup process best fits the goal we want to achieve this time, so the design will be developed based on this

Design Concept (Wireframe)

• Define basic chatbot: Two modules, each with a text message, connected by buttons

• Assumed user need: Feel that they can quickly build a chatbot
• Originally, when operating within the platform, modules needed to be manually added and linked between modules, thus increasing many steps. Therefore, during the registration stage, users only need to focus on designing the conversation, and we will automatically help create modules and connections
• Let the content designed by users become the content of the chatbot within the platform

Main Design Decisions

• Use platform components for all pages except registration (/register) and login (/login) pages
• Employ right-side mobile preview throughout the process
• Use unidirectional gradient to maintain brand tone consistency

Design Iteration

User testing

After the design went live, 3 remote usability tests were conducted, revealing:

1. Many users thought the registration process was our editor, which led to users being overly cautious throughout the process, fearing that one wrong setting would affect their unfinished chatbot
2. For some steps, we provided skip options that didn't affect chatbot creation, but many users couldn't find the skip button

Design Recommendations

1. Modify the copy to help users understand that this is only to familiarize them with basic editing logic, and add a friendlier tone, explaining that the current edits will not be published immediately
2. Enlarge the skip button, keeping its style consistent with other buttons
3. Change the chatbot's "link" function from a "button" to a "switch" style, lowering the psychological threshold for action

A/B Testing: The test group without Email and Purpose fields showed better conversion rates both for entering the registration process and completing it compared to the group with fields

Design Recommendations

Although removing fields showed data growth, the difference before and after was not statistically significant, so removal is not recommended

Results: The new process effectively helped improve key metrics since its launch

The design went live at the end of Q1 2020. Comparing Q2 data with Q1:

• Weekly chatbot creation increased by 5.18% (71/week → 75/week)
• The percentage of new users creating chatbots increased by 19.71% (49.39% → 69.10%)

中文版：BotBonnie 註冊流程改版設計

BotBonnie 為台灣知名新創公司，亦為 LINE 官方授權合作夥伴，專注於對話式智慧機器人解決方案

• 優化註冊流程、UI，最終增加近 20%的新用戶轉化率，且每週由新用戶建立之機器人總數提升超過 5%
• 規劃並執行易用性測試，歸納設計改善建議，以提升易用性評量分數

背景

身為聊天機器人建置平台，我們的北極星指標是「活躍機器人數」。在舊版註冊流程中，新用戶註冊後有超過一半的人不會新增機器人，為一個降低活躍機器人數的原因。過往雖然雖然有模板機器人，但不一定能符合需求，若選擇空白專案則用戶在沒有引導的情況下很難建置一個機器人。因此我們希望能設計一個新的註冊流程，讓使用者在註冊後能夠建立一個最基本的機器人。

目標

• 提升新註冊用戶建立機器人的比率
• 提升每週由新用戶新增的機器人數

挑戰

要從空白機器人成為基本機器人，依照預設的使用流程，會需要許多步驟；加上需要在註冊流程處理建制需求，需要盡可能減少步驟數以提升完成率

競品分析

研究了 20＋ 款產品，分析其介面與流程模式，提取可應用之元素

介面排版

主流 SaaS 產品在頁面安排上其實只需一欄用以填寫資料，但研究後發現許多產品因為只做一欄網頁就會有相當多的空白，因此有了以下三個特點：

• 畫面左右分割為主要設計模式
• 主要互動的區塊需要能讓用戶聚焦在互動上
• 空白區塊依據產品特性可呈現：用戶推薦、品牌識別元素、互動結果預覽

流程

雖然註冊流程有非常多類型，但在同類／同產業產品之中，以下三者最為常見：

• 客製體驗：並不觸及核心的流程設定，但是會呈現最終結果的樣貌，並邀請用戶設定可調整的外觀
• 提前設定：在註冊時就先設定好基礎的設置，讓用戶在進到產品後可以更快上手
• 邊做邊學：註冊即 Onboarding

→ 提前設定的流程最符合此次要達成的目標，因此設計將以此開展

設計概念（Wireframe）

• 定義基本機器人：兩個模組各自有一個文字訊息，且以按鈕連結
• 假設用戶需求：感受到自己能很快速地建出機器人
• 原本在平台內操作，模組之間需手動新增「模組」與「連結模組」，也因此增加了許多步驟，因此在註冊階段，使用者只需要專注在設計對話，我們會自動幫忙建立模組與連結
• 讓使用者設計的內容成為平台內機器人的內容

主要設計決策

• 除了註冊（/register）和登入（/login）頁以外，皆使用平台的元件
• 全程採用右側手機預覽
• 單向漸層維持品牌調性一致性

設計迭代

User testing

設計上線後，執行 3 場遠端易用性測試，發現：

1. 許多用戶認為註冊流程就是我們的編輯器，這也導致使用者過程戰戰兢兢，深怕一個設定錯誤就將未完成的機器人
2. 部分步驟我們提供略過的選項，不影響創建機器人，但許多用戶卻找不到略過按鈕

設計建議

1. 修改文案讓用戶理解此處僅是讓他們了解基本編輯邏輯，以及加入更親切的語氣，說明當下的編輯並不會當下就發布
2. 放大略過按鈕，讓樣式與其他按鈕保持一致
3. 連結機器人的「連結」功能，從「按鈕」改成「開關」樣式，降低心理上的行為門檻

A/B Testing：無 Email 與目的欄位的測試組，無論在進入註冊流程或完成註冊流程的轉化都優於有欄位的組別

設計建議

雖然在數據上移除欄位有著數據成長，但前後的差異在統計上並不顯著，因此不建議移除

成效：新版流程自上線後有效幫助關鍵數據提升

設計自 2020 Q1 末上線，將 Q2 與 Q1 數據相比：

• 每週機器人建立數提升 5.18% （71/週 → 75/週）
• 新用戶建立機器人比率增加 19.71%（49.39% → 69.10%）