intro

BotBonnie 提供商業用戶一站式的 SaaS 平台與行銷顧問服務,使用者可透過直覺化的使用者介面與各個功能自行設計、串接出 100% 客製化的聊天機器人,並針對使用者旗下品牌的產品、服務或活動進行對話式的行銷、推播與宣傳。

現有產品在 2017 年底開始營運後,因為用戶的需求日益增加、LINE 和 Facebook Messenger 的功能改版,以及更加符合品牌調性,於是在 2019 年開始建立平台的設計系統與改版與完善各項功能。

  • Role 角色

    UI/UX Designer

  • Scope 範疇

    • Visual Design
    • User Interface Design
    • Prototyping
    • Design System
  • Duration 期程

    2019/9 ~ Present

Insight

  1. 平台整體視覺形象、風格不一致

    先前的平台版本與品牌自身的視覺形象不一致,雖然當初為了與其他競業的 SaaS 平台用色類似,但在新的版本中團隊決定要有所突破,更換為與品牌形象一致的設計風格。

  2. 功能流程不夠直覺,太過複雜

    最初的平台版本為傳統三欄式版面,在操作上中因重要的功能大部分都在視窗的左右兩旁,用戶常感到視線吃力且容易分心,流程規劃上不夠直觀,因此在這個版本我們進行更新。

  3. 套件無法符合用戶需求

    原本的產品目標是要讓用戶熟悉如何用我們的平台快速設計出一個別具特色的聊天機器人,利用其互動特性增加潛在用戶與提升轉單率。但由於 LINE 與 Facebook Messenger 的後台功能不斷增加,我們也應市場的需要,將高互動性、娛樂性的功能逐一更新,滿足用戶的需求。

  4. i18n 多國語系的支援

    為了因應產品未來的發展,勢必得面向不同語系的使用服務,於是我們預計在新版本的平台導入了 i18n 多國語系的功能。本國以外的瀏覽者可根據 IP 位置自動切換英文,未來預期會依開發的需要新增不同的語言。

Objectives

成為能輕鬆幫助用戶解決行銷痛點並提升商業價值的平台

  • object-1-1

    升級全新版本的介面

    將原有的產品介面設計全面調整,更符合產品視覺調性與設計風格,藉以提升用戶操作上的易用度與可親性。

  • object-1-2

    建立一致性設計系統

    嘗試導入商業軟體設計流程,在既有限制與商業考量下,建構出具有一致性的平台設計指引系統,提供予團隊成員使用。

  • object-1-3

    設計簡單易用的套件

    在任期內持續規劃用戶們需要且必要的功能,除了讓每個套件功能流程設計簡單好上手以外,也能透過各個套件提升用戶本身的績效。

Design Process

因為產品屬於工具型的 SaaS 線上軟體平台,且已有基本架構,因此在設計上採取的是在不動用到基本架構的前提下,分別進行原有套件的流程改善、新套件的各種功能設計規劃、平台介面的視覺改版,以及制訂較為完整的設計規範。

設計流程上我們分為 Plan, Ideate 與 Solve 三個階段,前期的 Feedback & MVP 階段主要是搜集用戶與內部團隊的意見之後,於 Scrum 開發過程中進行 Ideate 的 Flowchart & Wireframe 線框圖來回討論修正,而後進行原有平台的 Optimize 和新套件的 Mockup 設計,確認完畢後就交由 Engineer 進到 Development 的階段。

process-1 process-1

為了給您更好的觀看體驗,請您以行動裝置瀏覽時,
使用 直向 方式瀏覽作品集。

Hey, we suggest that turn your mobile device to the portrait mode if you need to have the best quality to browse the website.