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

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

  • Role 角色

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

    • Web Design
    • Visual Design
  • Duration 期程

    2019/8 ~ 2021

Insight

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

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

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

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

  3. SEO 未優化,搜尋排名有待改進

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

Objective

清楚傳達產品資訊、符合形象的網站,以增加潛在用戶實際登入使用的轉換率

  • object-2-1

    形象視覺全面升級

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

  • object-2-2

    完善產品內容資訊

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

  • object-2-3

    補強網站資訊架構

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

Design Process

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

網站的設計佈局,以 Atomic Design 為基底,再針對不同頁面設計每個 Component 的規格與尺寸,藉以組成一個有層次、系統性的網頁介面。依據公司制定的品牌調性,設計出符合品牌價值的網站視覺。

process-2 process-2

Design

Plan & Sitemap

設計網頁前,我們經過多次反覆的討論與溝通,包括了技術長與前、後端工程師,除了規劃網頁的架構以外,我們一開始就思索著:「什麼樣的內容,能吸引到對我們產品有興趣的潛在用戶?」因此我們有了初步的共識,網頁的文案視覺的呈現絕對是不可獲缺的。在最初版的網站中,當初的網站架構相當的簡單,目的是想以一頁式 (One Single Page) 的主體,先以視覺吸引使用者的目光,接著邀請使用者立刻試用、操作產品。

而這次改版,我們將內容大幅度的完善,首頁上即有目前客戶急需的「對話式行銷」、「客服平台」與「聊天機器人解決方案」等等的關鍵內容更新個案介紹。在產品的相關功能,在這次也有相當幅度的內容介紹,每項產品功能都有設計子頁面去引導,讓我們的目標客群全面地了解我們產品的詳細介紹。另外,價格方案我們也在這次更新時做了完整的資訊呈現,讓用戶們能根據自己的需求,選擇需要的方案訂閱購買。

▼ BotBonnie 2019-2021 年第二版網站 Sitemap
(可使用滑鼠或手指上下滑動瀏覽)
sitemap sitemap

我們也規劃了教學說明、常見問題⋯等的相關內容,不過在架構設計上不直接整合在官方網站上,而是另外建立部落格形式的子網站。其中原因是子網站日後的內容更新會較為頻繁,因此選擇可供內部團隊的行銷同仁能快速編輯的 WordPress 平台,在管理與維護上會較為便捷。

另外在平台上團隊的每個人都可以在上面建立內容,因此不管是功能更新 Release 的公告發布,抑或是教學文章、趨勢分享都可以快速上稿。未來規劃在平台的側邊欄也提供連結,供用戶導至部落格教學文章區找到教學說明。

Content

一開始我們不急著進行視覺的設計,而是先擬好網站的文案與資訊。

原因是:當初在一頁式的官網資訊設計,我們著重在推廣「聊天機器人是什麼」這件事情上,藉以帶到商家與用戶使用我們的產品親自設計聊天機器人後,能創造多少的獲益(購買數成長、轉換率上升⋯等),以及使用 Chatbot 後成功替商家創造成效的實際案例與優點。

隨著規模的增長,在實際推廣的執行層面上,我們利用 Google Analytics 追蹤工具發現:一直以來潛在用戶接觸、認識到我們,來源幾乎都以粉絲專頁、社團的推播、媒體報導和客戶之間彼此的推薦,成效較為顯著。反而「官方網站」的建置,變得像是代表我們品牌的「陪襯品」,似乎沒有達到預期的轉換成效

content-1 content-1
▲ 舊版網站受限於當初的網站設計,難以讓潛在使用者擁有試用平台的動機

因此在新改版的網站文案呈現中,我們著重在傳達產品的功能與特色,並且針對網站 SEO 方面不斷地調整文案資訊,以其達到最佳化 SEO。首先我們在每個頁面加上大量的 meta 與 OG 標籤,標注和聊天機器人與數位行銷有關的關鍵字與官網的代表圖片,希望讓 Search Ranking 大幅改善。

我們將客戶最常詢問的幾個功能,包括「多樣化的行銷套件」、「多渠道訊息中心」與「聊天機器人的設計平台」放在官網首頁最醒目的地方,下方設計 CTA (Call to Action) 按鈕帶到功能介紹頁面,而針對平台每一個功能,「功能介紹」頁面也有詳盡的文字說明。

而整個官網各頁面的文案,觀者會看到大量與「對話式行銷」、「客服」、「對話」、「套件」等等相關的字眼,目的就是不管是在搜尋引擎、社群媒體或是在官網直接進來後,能讓人第一眼就知道我們的產品和特色,不斷地告訴觀者我們產品的特別之處,每頁下方一定有一個 CTA 的按鈕,讓用戶有明確的動機,促使看完後立即試用。

content-2 content-2
▲ 設計吸引潛在用戶的文案內容,試圖增加試用產品的點擊次數

Component

在官網設計中,相較上個版本的官網上較簡單的資訊編排,新的官網承載的內容更為豐富、繁雜,因此將網站裡的相同元件模組化是勢在必行的。

於是我將網站分為三個大區塊 ,分為:Header, Main Area, CTA & Footer,將區塊裡的元件加以模組化。這樣一方面讓工程團隊在建構網站時,無需在每個頁面裡重複撰寫一次程式碼,只需套用相同的 Code 和 CSS 即可。另以使用者的角度來看,版面區塊具有統一、相似性,也能減少觀者在每個頁面切換瀏覽時的障礙,適當地引導視覺動線。

component-1 component-1
▲ 主要分成三大區塊,資訊依次序階層設計,最下方的 CTA 區塊引導觀者試用

將網頁切割區塊後,為了讓網站整體一致、統一,於是乎再依照各個區塊不同的需求去制定簡單的 Design Guideline

component-2 component-2
▲ 制定網頁的各種元件規格,力求維持一致、整齊的樣式

官網中的各個頁面,因為資訊承載量十分地多,所以要怎麼在這麼長的版面中,將大量的資訊處理得宜就十分重要。於是乎在執行設計時我設計了大量的互動元件,讓這些繁雜的資訊經過圖文的編排呈現,以及使用者在瀏覽後所執行的點按、拖拉元件⋯⋯等各種動作後,透過這些互動的行為,加深使用者對產品和品牌的印象。

在首頁中,不管是產品的核心功能小動畫。以及下方我們精選的客戶案例區塊。或是在價格方案頁中,提供給用戶試算的計算機小工具,以及即使在小螢幕裝置都能順暢瀏覽的,以「行動優先」為基底的互動式價格表格,與功能介紹頁裡以圖卡方式排版呈現,都是為了讓潛在用戶們有著耳目一新的印象,進而產生試用平台的動機,促進提升產品的實質訂閱率與轉換率。

component-3 component-3
▲ 針對不同的資訊呈現而設計出來的小元件,讓使用者更快地了解產品全貌

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

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