產品設計經驗分享-Treroad

前言

Treroad取名來自台語“找路”的諧音,開始這個產品源自於我們的自身經驗,因為喜歡到處旅行,常常需要透過各種交通工具來到達目的地。在網路發達的時代,我們不再需要拿著地圖找路,取而代之的是手機上的各種app,但有時候不管是轉乘、火車、捷運、公車,都有各自的app來查詢,但這麼多的app中,有沒有一個是能夠整合所有所需的資訊呢?而在統整這麼多功能後,要如何才能維持著簡單的操作與使用呢?因此而產生了Treroad chatbot的想法,希望能讓像是與旅伴輕鬆的聊天,又能快速得到外出或旅遊時的所有資訊。

希望能整合許多資訊來讓查詢更方便

選擇Chatbot是因為它適合用來觸發繁多且瑣碎的項目,如繁複的導航路徑或眾多獨立的服務諮詢。而我們為了想在統整各項服務後還能保持著簡潔的介面,且使用者每次開啟app的目的可能都不是為了使用固定的某項功能(例如在台北要查詢捷運,而在高雄時要查巡火車),所以沒有必要把每個功能都顯示出來,因此Chatbot會是個好的選擇。

而除了在設計流程上的差異,還有聊天介面CUI(Conversational UI)的設計也與一般GUI(Graphical UI)產品不同,對我來說都是新的設計經驗,如何結合CUI和GUI也是這次的挑戰之一,因為若沒有GUI(Graphical UI)的話也會難以讓使用者在一開始就了解產品能夠提供哪些服務項目。

設計流程

設計流程的部分,跟一般產品一樣,在討論完需求後整理成functioal map,再來透過這份functioal map建立conversation flow,順便大致擬定一些語句來假設使用者會輸入的訊息。

根據conversation flow來決定bot會需要有什麼樣的回應或是產生什麼圖像按鈕來讓使用者順利得到想要的資訊。

接著畫好wireframe後先用簡易的prototype測試畫面的介面或是bot開頭的介紹是否容易理解後。因為時間上的考量、且希望在短時間內增加語意理解,進行完UI的設計就直接開發並透過Testflight發布beta版來testing,希望透過頻繁的更新與再測試達到快速迭代。

Functional map

UI design

功能介紹頁面
聊天與功能頁面
網站頁面

Reflection

這個產品目前還正在進行中,實際介面與對話流程跟一開始設計的還有些差異,現在除了根據目前使用者輸入的句子來增加我們的語意分析與理解以外,也慢慢的為了達成我們當初想要達到的目的而增加功能中,例如公車或是航班與公共腳踏車的查詢。

而我遇到最多的困難與問題,主要還是建立對話流程的部分,因為如果太少語句的範例,能想到的流程就可能會不夠全面或出現問題,而這也影響到了介面的設計。所以最重要的還是是在語意理解與擴充語句庫,雖然在設計流程中前期已經建立一些語句庫,但會發現永遠都不夠用,因為經過測試後發現每個人所輸入的講話方式、順序、習慣等都很不同,所以在testing方面除了UI的理解以外,最重要的還是如何去蒐集到很多的語句,讓我們的chatbot變得更聰明更有人性,而我們也希望能透過使用者的增加與反饋來快速改善產品。

如果有興趣幫我們讓這個產品變得更好~可以下載來玩玩(目前只有ios版本)

Treroad介紹網址:www.treroad.com

ios下載網址:https://www.appstore.com/treroad

有任何問題與反饋也可以直接與我聯繫~