LINEBOT：分帳龍寶寶製作紀錄
分帳龍寶寶是一款協助多人分帳的Linebot小工具。
有興趣者可以先加好友後放入群組玩玩看:https://lin.ee/52gLqtX
也建議搭配line好友簡介中的懶人包圖文更好上手在紀錄開始前，先強調龍寶寶並不是一個非常符合正統開發流程的產品（請大家看的同時忍住想要毆打我們的心），過程之中沒有太多的縝密的規劃，其中也因龍寶寶並非太複雜的工具，加上團隊僅兩人且已經是多年互相信任的好友，溝通很順暢不用太客氣（笑），如果需要修改也是相對迅速彈性的。
以下的文字是以我會以UIUX角度出發，作為給未來的自己的一份紀錄與省思，同時也分享給大家這一路的衝衝撞撞。
如果想看程式開發的部分，請看強者龍龍的文。
相信我你沒有程式背景也會被他詼諧生動的文字逗得很樂。靈感起源
因為一次的朋友出遊，發現分帳非常的麻煩。以往的作法是每人各自出的錢先隨意的寫在群組中，旅程結束再交由一人計算彙總。
感謝我的好夥伴龍龍超強的行動力，沒想到隨口說說過個兩天初代龍寶寶就出現了，雖然還非常的陽春，我們就有預感這個東西應該會有些人很喜歡，因為龍寶寶真的解決了蠻大一部分的痛點。
分帳的使用者行為痛點＆龍寶寶的產品定位
「市面上已經有splitwise、spendtogether了，為什麼你們還要做？」 當龍寶寶上線後，我們收到頗多類似的疑問。
我們事前也知道市面上其實有很多的記帳軟體甚至分帳軟體。但儘管如此，普遍的大眾還是沒有為此下載APP進行分帳，原因是出遊分帳並不是個天天會發生的場景，只是偶爾會出現的小麻煩，而如果僅是為了這趟出遊，就需要一人甚至多人都下載分帳APP使用，他的麻煩程度遠高過於分帳本身。
麻煩程度：出遊分帳 < 多人都下載分帳APP使用
痛點不足以高過於與需要下載一個APP的門檻時，APP就不會普及。而龍寶寶定位為短期出遊時幫忙記帳的小工具。會受到大家的青睞，也正是因為龍寶寶只是一個LINE BOT工具，觀察到台灣人很喜愛為了一趟出遊拉群組方便聯繫，把龍寶寶加入群組便成為唯一的初始門檻。
麻煩程度：將龍寶寶加入出遊LINE群 < 出遊分帳 < 多人都下載分帳APP使用而當然LineBot畢竟還是有他本身的環境限制，沒辦法像APP彈性且細節。我們相信如果對分帳細節高要求的人們，一開始就會直接使用分帳APP，也並非我們要鎖定的目標群眾了。
切中使用者的痛點，是作為開始使用龍寶寶的契機，而接下來，能將使用者留下的關鍵就是使用流暢度了，正是體現UIUX價值的地方！
初代龍寶寶之前 — Sitemap ＆ Wireframe
⚠️事前警告！以下這段，非常不符合業界開發流程，大家請勿效仿XD整體Sitemap以及Wireframe，我們是直接建立LINEBOT邊做邊優化，哪裡不順、哪裡需要加按鈕、哪裡文字表達不清、順便找找bug，我主要就是扮演「打打嘴砲」的角色(笑)，然後龍龍直接進行修改，但同時也是感謝夥伴快速的執行力加上很情願一直反覆修正啊～～🙇♀️
第一版的龍寶寶
一開始非常的陽春，都是文字訊息，功能還不健全，同時指令也有些限制且不太直覺
第二版龍寶寶
多虧LINE BOT本身就有許多原生的樣板可以用，所以迅速套一套，就開始進行流程的優化。
SiteMap
這時候的龍寶寶Sitemap才在我們修修改改中完成了雛形。已與上線版本差不多，只差介面設計了！
幫龍寶寶上妝 — 設計正式進入
實際的版面設計使用的是Line提供的開發環境，有電腦版以及網頁版，而電腦版的JSON只能輸出卻不能匯入，所以我們都還是使用網頁版進行製作。其開發環境需要懂一點基礎的Html跟CSS，但也提供一些SHOWCASE可以參考，是個設計師友善環境。
COLOR — 看起來聰明可信的寶寶
顏色的選擇上，由於是協助分帳參與金錢的角色，我們決定把主色設定為接近金色的土色，輔助色搭配穩重給予人信任感的深綠色。儘管名稱已經定案為「龍寶寶」，我們還希望向社會傳達他是一隻比普羅大眾數學都好的聰明寶寶（笑
Onboarding — 學習新增第一筆金額
礙於chatbot的使用情境限制，沒辦法像APP圖像化的引導消費者使用，也沒辦法一次教會使用者所有指令，過程會太過冗長令人不耐，所以在取捨之後，我們只針對最重要的流程 — 「新增帳款」進行教學（在此感謝 Manta Wu 大大給我們超多專業又精確的回饋）。將其教學模式設定為只有龍寶寶第一次加入群組時會觸發，同時也讓群組中還搞不清出龍寶寶為何的其他使用者皆能得知龍寶寶的基礎功能。
🌟 Onboarding 小插曲
在上線之後，有部分使用者反應不知道金額要加入空格（雖然龍寶寶主選單上有強調，但大家普遍不會看），因此在新手教學上，我們也重新進行文案的翻修，嘗試用更精確的語言表達，這對於長時間著墨圖像多於文字的我們，也是另一種挑戰。而在修改過後，也的確沒有收到關於金額輸入的疑惑了。
龍寶寶主選單 — 基礎功能都在這，忘記才需要
就像前述，使用者較不熟悉CHATBOT相對於APP，學習曲線較高。過長的版面也容易造成洗版，大家也不太願意花時間一次看完，同時避免有過多的名詞造成使用者的過度負荷，我們把一些特殊名詞與快速指令全部分類在進階功能中。
我們將龍寶寶使用者劃分為兩個階段：
👶 初級使用者：剛剛接觸龍寶寶，想試用看看。
初級使用者旅程:
得知龍寶寶可以分帳 -> 試用 -> 新增一筆帳款 -> 看帳 -> 分帳成功初級使用者，會使用的到的基本功能為「新增帳款」「看帳本明細」以及會有「帳本分帳名單」的概念。
而雖然初級使用者可能只是想記一次性的帳，並不會需要「第二本帳本」。但為了想凸顯龍寶寶並非一次性免洗工具，我們在主選單暗示其實也可以擁有多本帳本，增設了「所有帳本」按鈕，也把「增加帳本」指令放在主選單中。
👨🏫 進階使用者：
a.使用一段時間，開始熟悉龍寶寶的運作邏輯，發現有些情境是並非所有人都需要付款，會自主找尋龍寶寶有沒有相關功能
b.每次都覺得要把龍寶寶叫出來很煩，想要知道快速指令。
我們的終極目標，就是使用者完全不需要打開龍寶寶就可以透過輸入指令直接獲取功能，實際所有在SITEMAP第二層的功能，皆有快速指令，可以透過打字呼叫。
寶寶主選單的定位就是如果使用者真的完全忘記龍寶寶怎麼用，那他叫一聲龍寶寶就可以想起這個LINEBOT是幫忙分帳的，還可以快速的得到指令。
過程中的設計細節，以及使用者回饋後改善
以下的分享包含一開始設計就有考慮到的、少部分好友試用給予的，甚至是後續直接發佈之後更多陌生使用者給予我們真實且赤裸的建議。
1.輸入越方便越好
在製作龍寶寶時，不諱言的我們也參考了名為記帳雞的LINEBOT，其金額輸入方式是： $＋數字金額+費用名稱，其餘輸入皆不反應。其中的邏輯就是先偵測 ＄為觸發紀錄金額的依據，在抓取後面的數字為金額，其他的文字 = 費用名稱。非常精準，不會出錯。
但相較於記帳是屬於個人天天使用之事，誠如前文所提，分帳並非常態性需求，使用門檻一拉高，就很容易流失掉使用者。國字＋數字＋符號的切換上容易造成紀錄不順，在取捨之中，我們還是希望使用者方便輸入為主
但相較於記帳雞的嚴謹，我們也嘗試在簡單輸入與訂定規則中取得平衡，同時還要規避掉一些偵測的窘境，最後選擇只要輸入「名稱」+「空格」＋「數字」即可。
一些可能會造成龍寶寶偵測為新增花費的窘境：
- 2020演唱會 4900 （同時有兩組數字，空格前的數字全部會被定義為名稱之一）
- 你說這樣很棒484 （沒有空格不會被偵測為金額)
- 這94我！ (數字後面有文字也不會被偵測為花費)
- 我的中國信託帳號822 098802…
(分帳中非常會出現的帳號，9位數字以上字串也不會被龍寶寶定義為花費）一開始使用者可能會因為空格而卡住，這部分就放入Onboarding的部分試圖再強調。
最後還是要提醒：因為相較於APP是主動加入，chatbot是被動偵測文字，本身技術限制，加上中文的博大精深（衍生好多網路用語好難規避啊～），無法完全盡善盡美。所以我們還是堅持每筆花費偵測到時會跳出確認視窗，以確保不會有龍寶寶誤判為花費直接加入的狀況。
2.洗版&流程順利的取捨
除了功能本身外，Linebot另一個最容易造成別人退出的原因就是「洗版」，因此在版面以及流程的優化上，我們也進行了一些設計微調。
a.主目錄的縮減
部分使用者覺得第一版龍寶寶主目錄過長，所以進行了簡化。我們以半個對話框長度為限，在使用者鍵盤升起時，還能看到完整的資訊為目標。
b.新增帳款流程之簡化
第一版的龍寶寶，有兩個確認視窗。收到有些回饋覺得有些洗版，而前述有提到因為龍寶寶有可能把非花費偵測為花費，所以「確認加入款項」的視窗是必須保留的。而其實第二個「成功加入」的提示視窗，最主要是我們觀察其實大部分的人都會習慣在加入款項後確認目前金額，才加入了「看帳」的按鍵。
但同時我們也發現到因為那是唯一的按鍵，觀察到大家真的加完款項就會忍不住按「看帳」，這時候畫面往往就會呈現如下圖。
然而如果每加一筆帳就叫出帳本一次的話，就會真的非常的洗版。我們也觀察到這是造成群組內其他人們抱怨的主因。
同時，如果把「看帳」按鈕取消，當使用者想要快速叫出其畫面，不想透過龍寶寶主選單，就被迫需要記快速指令「看帳」，進而加速學習，成為「進階使用者」，這也是我們希望達到的。
最終，在權衡之下，我們簡化了「加入帳款」這個龍寶寶最主要的流程，確認加入只用一則文字訊息作結，後續也沒有在收到過於洗版的回饋。
3.考量排版：過長的名字與過長的金額
字數過多造成排版凌亂，這是設計師跟工程師在實作上一定會面臨到的問題，很多時候會以「字數限制為考慮」，甚至以往在製作設計稿的時候，還是會以美觀為優先，其他就等到真的發生再來考慮（擺爛XD）。但其實資訊清楚實則比美觀重要，在一個牽涉金錢的LINEBOT尤其如此。然而當自己投身於用Code進行實作時，也實際讓我面臨不得不回去修改設計的狀況，畢竟還是不希望自己的作品醜醜的啊！
一開始的項目都是兩行，雖較整齊，但考慮到項目一多，就會洗版（洗版真的是LINEBOT優先考慮的事情！重要！），我們將其收於一行。而私人帳款由於名字很容易過長（大家的LINE名字怎麼都這麼長），因需顯示借款雙方的名字，權衡之下，我們還是保留兩行。
4.文案優化：更清楚的指令，以及避免使用者接觸過多新名詞
文案真的是設計師很容易忽略的。
以下舉「帳本」功能為例：
像是「當前帳本」對於使用者就是一個新名詞，也不太懂需要切換帳本才能開始記帳的概念。這時候如果是app就能透過很直覺的點擊動作加上動態效果讓使用者明顯感受到「打開」，chatbot就很需要文字輔助。
因此在帳本的介面設計上，第二版的更新，我們也進行了文字的優化，讓其更淺顯易懂。
而相信大家也有發現更新有了「更名」這個功能，這是相對有點複雜的指令，其中也包含很多的細節，這部分就交給為此在程式方面想破頭的龍龍來分享啦~（再次推廣👇👇👇）
5.還款功能的需求量比我們想的都大
我們原先認為的使用者會以最終分帳，直接互相匯款或是給錢結束這次一次旅行的使用。甚至如果是還某一筆款項，像是一筆早餐300元，如果借錢方突然先還錢了，只要將其刪除即可。但沒想到收到很多來自各方的使用者希望有部分還款功能。
使用情境像是，A欠B :早餐120元、午餐250元、晚餐400，而今天剛好手上有500元，所以就先還B 500元。而這時候要刪除哪筆欠款都不對。
這項功能是我們事前都沒有想要開發的，也是因為自己本身朋友圈都沒有部份還款的習慣，從這次經驗也更讓我體認到，很多東西不能只靠自身的經驗判斷，因為我們總是會有一個很厚的同溫層，事前的各種研究、分析去了解非同溫層的人們是非常重要的。而因為這次只是我們自己的Side project，修改開發的速度快又彈性，很幸運的可以很快地進行補強(正式的公司產品可不能這樣搞啊啊啊啊~)，我們收到回饋的四天後馬上加上這項功能，也算是圓滿解決了。
LINEBOT工具：介APP與Chatbot之間的產品（？
會打上問號，也是因為這是我目前對於龍寶寶自己亂下的註解。因為同時有設計與行銷的雙背景，我覺得在製作龍寶寶過程中，運用了很多類似的思考邏輯，但有很多與兩方相似與不同之處：
與一般APP設計最大的差異
- 文字引導為主，UI元件為輔
- 框架相對明確，彈性不高
- 不像UI規劃一個完整的手機頁面，最好越短越好朝橫向發展。
- 按紐要手指點得到，但同時要避免比例失衡（個人覺得很容易因為要顧及橫向發展，很容易會有頭重腳輕的狀況）
- 不能洗版！不能洗版！不能洗版！
與行銷Chatbot不同的地方
行銷CHATBOT很強調情境帶入，使用的語言會有很強烈的角色設定，但龍寶寶並非放在能夠一對一溝通的平台上，而是常常有訊息來往的群組，定位更像是「小工具」，過於個性化或許會吸引一些死忠粉絲，但會有很高風險會讓人覺得惱人。
我們還是有賦予它一些個性避免過於冷冰冰，但像是最常使用的「新增帳款」流程，就是相對冷靜的語氣。
沒有完美的產品：製作上的困境與困難點
CHATBOT還沒完全普及
Chatbot在市面上多用於推送資訊，作為工具來說並沒有太普及，因此使用流程相較於APP還需要一般大眾多番嘗試才比較好上手，也多半是以文字溝通而非視覺UI，很多細節還是很仰賴文字說明，但大多數人並不會再開始使用時閱讀說明書，儘管我們已在發布社群時同時發布了懶人包，雖然有幫助到一些人們上手，但也必須很坦白的說，部分的人是不會看說明文字，亦包含龍寶寶內部的各種使用說明。也是造成入手龍寶寶的學習曲線較高的原因。
我想，在大家越來越不愛閱讀文字的現代社會中，目前以文字聊天為主的機器人要製作成應用小工具，可能還有很多值得改善以及探討的地方。（目前我們還是小菜雞功力不夠啊啊啊啊啊～）
LINE本身對開發者的限制
a.萬惡的Emoji
應龍龍的特別要求一定要強調的，整個龍寶寶開發最大的困境，就是拿取使用者的名字！第一，是因為我們並沒有付費成為官方帳號，沒有權限直接取得使用者名稱，才會受限於一定要講過話的人，龍寶寶才能抓取名字。（大家不要再問我為什麼只有說過話的才能分帳…歡迎大家贊助龍寶寶讓他成為官方帳號💗）
第二，當使用者更換名字，或是名字有很多特殊符號或line本身不支援的emoji就會造成抓不到名字而壞掉，我們也為此想了一堆奇怪的方式解決，，在試圖修正的同時一邊murmur到底誰沒事要一直換line的名字或是用一堆怪符號😤，然而，但有些還是只能兩手一攤沒辦法。Line不給抓就是不給抓！
B.千錯萬錯都是LINE的錯（沒有啦！
先撇開偶爾line Server的讓所有Linebot都會反應變超慢，導致大家一直說我們有bug不說～(怨念好深)
最近由於有些使用者記了超過50筆的帳目發現明細顯示叫不出來(能記這麼多我們也是很意外)，我們才發現原來Linebot還有字數限制…可惡竟然不在一開始說！好險山不轉路轉，直接讓明細變成兩頁解決這一切～😌
以上的後半段只是氣話請大家忽略🤣。對於開發有更多興趣的人可以看龍龍的文章（到底多愛置入）
結語
感謝FB強大的演算法，我們透過在 Taiwan UI/UX Designers 社團發文以及個人臉書，獲得總記破3000次的分享，發布第一天龍寶寶就獲得了290,776次的訊息傳送量，累積至今也擁有28,481位使用者（包含未加龍寶寶好友之群組內使用者），人數還在緩慢增長中，不敢說很多但確實也看到有一群人穩定的在使用，這是最鼓舞我們的地方。感謝大家，才讓我們得以在其中獲得最真實的使用回饋。
做一隻LINEBOT相較於APP其實簡單很多，最珍貴的就是在短短的2週，我們歷經了一個小型的產品規劃開發到最後上線推廣、充當客服面對最真實的問答，還有中間很多大大小小也難以一次說明的細節，這些也將內化成為我與龍龍面對未來的養分。
如果你喜歡龍寶寶歡迎贊助我們喝一杯咖啡，也歡迎寫下你的建議及任何願望，在我們餓死之前都會樂意盡量實現。
https://www.buymeacoffee.com/longbaobao
