BotBonnie 邦妮科技是一間利用 Facebook Messenger 與 LINE 的聊天功能串接至產品平台後，使用者可透過 BotBonnie 產品平台上更為直覺化的介面與各項功能，自行打造完全 100% 客製化的聊天機器人，針對使用者旗下的產品、服務或活動進行對話式的行銷、推播與宣傳。
創辦初期因求產品能快速迭代，因此官方網站以一頁式的方式呈現，目標鎖定已對聊天機器人產業有相關背景的潛在用戶。但進入發展期後，隨著產品平台的改版與功能的增加，原有的網頁資訊已不敷使用，需要更有系統以及完整規劃的官網需求油然而生。
UI/UX Designer
Visual Designer
Web Design
Visual Design
2019/8 ~ 2021/8
原先的網頁內容與資訊，因一頁式的網站設計限制之下篇幅不能太長，只介紹了關於聊天機器人的優點與過往的些許客戶案例，官網中有關於產品的敘述與功能並無太多著墨，因此就無法將產品的長處有效地向受眾傳達。
隨著產品平台第二版的即將上線，官方網站上所有關於產品的相關截圖都需全面換新。因原本的平台的介面設計與色彩配置和品牌現今的調性截然不同，因此在視覺呈現上勢必得重新設計。
早期注重團隊於線下自行開發客戶，因此在線上的推廣上較無著墨，導致在 Google 搜尋中，當使用者輸入有關聊天機器人、Chatbot的關鍵字，搜尋結果的排名往往不在前幾個或第一頁上。
為了符合原有的品牌形象，於是將品牌與產品相關的色彩計畫與視覺應用在官方網站上，讓整體更一致。
原有版本的舊官網針對產品的介紹著墨不多，因此新版本的官網中將產品的功能介紹加以完善，並且透過實際的平台畫面圖文點綴，凸顯產品的優勢。
舊版本的官網中僅有一頁式的歡迎頁面，因此在新官網設計前期規劃更為重視的是頁面資訊架構的重新設計，藉以讓整個網站更完整可看。
官方網站的設計流程，主要分為幾個部分：從前期的頁面規劃，思考首頁與每個頁面該放什麼樣的資訊與圖文編排，構築資訊架構與網站的 Sitemap。接著從增進 SEO 最佳化的方向，去撰寫網站的內容文案，以能夠讓使用者在第一時間搜尋相關關鍵字時，能快速找到我們的官網為目標。
網站的設計佈局，以 Atomic Design 為基底，再針對不同頁面設計每個 Component 的規格與尺寸，藉以組成一個有層次、系統性的網頁介面。依據公司制定的品牌調性，設計出符合品牌價值的網站視覺。
設計網頁前，我們經過多次反覆的討論與溝通，包括了技術長與前、後端工程師，除了規劃網頁的架構以外，我們一開始就思索著：「什麼樣的內容，能吸引到對我們產品有興趣的潛在用戶？」因此我們有了初步的共識，網頁的文案與視覺的呈現絕對是不可獲缺的。在最初版的網站中，當初的網站架構相當的簡單，目的是想以一頁式 (One Single Page) 的主體，先以視覺吸引使用者的目光，接著邀請使用者立刻試用、操作產品。
而這次改版，我們將內容大幅度的完善，首頁上即有目前客戶急需的「對話式行銷」、「客服平台」與「聊天機器人解決方案」等等的關鍵內容更新個案介紹。在產品的相關功能，在這次也有相當幅度的內容介紹，每項產品功能都有設計子頁面去引導，讓我們的目標客群全面地了解我們產品的詳細介紹。另外，價格方案我們也在這次更新時做了完整的資訊呈現，讓用戶們能根據自己的需求，選擇需要的方案訂閱購買。
我們也規劃了教學說明、常見問題⋯等的相關內容，不過在架構設計上不直接整合在官方網站上，而是另外建立部落格形式的子網站。其中原因是子網站日後的內容更新會較為頻繁，因此選擇可供內部團隊的行銷同仁能快速編輯的 WordPress 平台，在管理與維護上會較為便捷。
另外在平台上團隊的每個人都可以在上面建立內容，因此不管是功能更新 Release 的公告發布，抑或是教學文章、趨勢分享都可以快速上稿。未來規劃在平台的側邊欄也提供連結，供用戶導至部落格教學文章區找到教學說明。
一開始我們不急著進行視覺的設計，而是先擬好網站的文案與資訊。原因是：最初一頁式的官網設計，著重在推廣「聊天機器人是什麼」這件事情上，藉以帶到商家用戶使用我們的產品後，能創造多少的獲益（購買數成長、轉換率上升⋯等），以及使用 Chatbot 後成功替商家創造成效的實際案例與優點。
但隨著規模的增長，我們利用 Google Analytics 追蹤工具實際發現：一直以來潛在用戶接觸我們的產品，幾乎都以粉絲專頁、社團的推播、媒體報導和客戶之間彼此的推薦，成效較為顯著。反而「官方網站」的建置，變得像是代表我們品牌的「陪襯品」，似乎沒有達到預期的轉換成效。
因此在新改版的網站文案呈現中，我們著重在傳達產品的功能與特色，並且針對網站 SEO 方面不斷地調整文案資訊，以其達到最佳化 SEO。首先我們在每個頁面加上大量的 meta 與 OG 標籤，標注和聊天機器人與數位行銷有關的關鍵字與官網的代表圖片，希望讓 Search Ranking 大幅改善。
我們將客戶最常詢問的幾個功能，包括「多樣化的行銷套件」、「多渠道訊息中心」與「聊天機器人的設計平台」放在官網首頁最醒目的地方，下方設計 CTA (Call to Action) 按鈕帶到功能介紹頁面，而針對平台每一個功能，「功能介紹」頁面也有詳盡的文字說明。
而整個官網各頁面的文案，觀者會看到大量與「對話式行銷」、「客服」、「對話」、「套件」等等相關的字眼，目的就是不管是在搜尋引擎、社群媒體或是在官網直接進來後，能讓人第一眼就知道我們的產品和特色，不斷地告訴觀者我們產品的特別之處，每頁下方一定有一個 CTA 的按鈕，讓用戶有明確的動機，促使看完後立即試用。
在官網設計中，相較上個版本的官網上較簡單的資訊編排，新的官網承載的內容更為豐富、繁雜，因此將網站裡的相同元件模組化是勢在必行的。
於是我將網站分為三個大區塊 ，分為：Header, Main Area, CTA & Footer，將區塊裡的元件加以模組化。這樣一方面讓工程團隊在建構網站時，無需在每個頁面裡重複撰寫一次程式碼，只需套用相同的 Code 和 CSS 即可。另以使用者的角度來看，版面區塊具有統一、相似性，也能減少觀者在每個頁面切換瀏覽時的障礙，適當地引導視覺動線。
將網頁切割區塊後，為了力求網站設計整體一致，並維持高辨識度的風格調性，於是依照不同的區塊但相同的元素，制定簡單的 Design Guideline，從基本的字級大小、按鈕配置、圖標規格的制定到色彩的運用。基本上務求在官網中各大區塊的元素能協調一致，視覺上不會有突兀的現象發生。
官網中的各個頁面，因為資訊承載量十分地多，所以要怎麼在這麼長的版面中，將大量的資訊處理得宜就十分重要。於是乎在執行設計時我設計了大量的互動元件，讓這些繁雜的資訊經過圖文的編排呈現，以及使用者在瀏覽後所執行的點按、拖拉元件⋯⋯等各種動作後，透過這些互動的行為，加深使用者對產品和品牌的印象。
在首頁中，不管是產品的核心功能小動畫。以及下方我們精選的客戶案例區塊。或是在價格方案頁中，提供給用戶試算的計算機小工具，以及即使在小螢幕裝置都能順暢瀏覽的，以「行動優先」為基底的互動式價格表格，與功能介紹頁裡以圖卡方式排版呈現，都是為了讓潛在用戶們有著耳目一新的印象，進而產生試用平台的動機，促進提升產品的實質訂閱率與轉換率。
