BotBonnie 邦妮科技是一間利用 Facebook Messenger 與 LINE 的聊天功能串接至產品平台後,使用者可透過 BotBonnie 產品平台上更為直覺化的介面與各項功能,自行打造完全 100% 客製化的聊天機器人,針對使用者旗下的產品、服務或活動進行對話式的行銷、推播與宣傳。

創辦初期因求產品能快速迭代,因此官方網站以一頁式的方式呈現,目標鎖定已對聊天機器人產業有相關背景的潛在用戶。但進入發展期後,隨著產品平台的改版與功能的增加,原有的網頁資訊已不敷使用,需要更有系統以及完整規劃的官網需求油然而生。

  • Role 角色

    • UI/UX Designer
    • Visual Designer
  • Scope 範疇

    • Web Design
    • Visual Design
  • Duration 期程

    2019/8 ~ Now

Insight

  1. 資訊過於簡略,無法有效傳達

    原先的網頁內容與資訊,因一頁式的網站設計限制之下篇幅不能太長,只介紹了關於聊天機器人的優點與過往的些許客戶案例,官網中有關於產品的敘述與功能並無太多著墨,因此就無法將產品的長處有效地向受眾傳達。

  2. 產品迭代後,官網亟需更新

    隨著產品平台第二版的即將上線,官方網站上所有關於產品的相關截圖都須全面換新。因原本的平台的介面設計與色彩配置和品牌現今的調性十分不同,因此官網的視覺呈現上也須重新設計。

  3. SEO 未優化,搜尋排名不佳

    早期注重團隊於線下自行開發客戶,因此在線上的推廣上較無著墨,導致在 Google 搜尋中,當使用者輸入有關聊天機器人、Chatbot的關鍵字,搜尋結果的排名往往不在前幾個或第一頁上。

Objectives

能清楚傳達產品資訊,並符合形象視覺的品牌網站

  • object-2-1

    形象視覺全面升級

    為了符合原有的品牌形象,於是將品牌與產品相關的色彩計畫與視覺應用在官方網站上,讓整體更一致。

  • object-2-2

    完善產品內容資訊

    原有版本的舊官網針對產品的介紹著墨不多,因此新版本的官網中將產品的功能介紹加以完善,並且透過實際的平台畫面圖文點綴,凸顯產品的優勢。

  • object-2-3

    補強網站資訊架構

    舊版本的官網中僅有一頁式的歡迎頁面,因此在新官網設計前期規劃更為重視的是頁面資訊架構的重新設計,藉以讓整個網站更完整可看。

Design Process

官方網站的設計流程,主要分為幾個部分:從前期的頁面規劃,思考首頁與每個頁面該放什麼樣的資訊與圖文編排,構築資訊架構與網站的 Sitemap。接著從增進 SEO 最佳化的方向,去撰寫網站的內容文案,以能夠讓使用者在第一時間搜尋相關關鍵字時,能快速找到我們的官網為目標。

網站的設計佈局,以 Atomic Design 的概念訂定每一個 Component 元件的規格與尺寸,組成一個有層次、系統性的網頁介面,再根據公司當初制定的品牌調性,設計出符合品牌價值的網站視覺。

process-2 process-2

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

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