SaaS 工具
/
Web Design
Creator
Creator 聊天機器人建置平台，是一個雲端協作、支援多種權限角色的工具，背後導入了 AI 自然語意理解模型，讓商家、品牌能更智慧地在 Facebook、LINE 上面，和顧客進行 24 小時全年無休的貼心互動。
參與背景
經手 Creator 的介面設計前，其產品已經有初始的樣式流程，後續由我負責產品介面、視覺更新，並以 Dark Mode 作為新方向，以深色系、穩重、科技感來重新規劃產品形象。在提案新介面外觀的同時，也一併整理前期開發混雜的設計元件，將網頁元件規格化，並彙整產品所使用的 Design System 。
公司
Yoctol.ai
角色
UI Designer
年份
2019
產品中的挑戰與學習
樣式翻新前置作業
介面更新準備，審視產品當前該改善的項目
因產品先前被幾位設計師輪流接手，在介面視覺與元件樣式上多處充滿不一致的狀態，在加入此產品開發後即面對整體介面風格重構的挑戰。立基於原產品的 IA 結構，挑選出涵蓋較多網頁元件的頁面進行提案，與 PM 以及工程師團隊一起討論樣式迭代的可行性。
原產品介面在層級的辨識度薄弱，例如，Header 與內容編輯區域混雜；元件間的樣式過度相近，例如：Tab 跟 Button 容易混淆。
Redesign 提案
介面 Redesign，同時定義各元件的互動樣式
在確立改善項目後，先挑選 1-3 張畫面進行調整，而選擇的畫面盡量涵蓋常用的網頁元件、或者從產品最核心功能的頁面來做呈現，以利在內部討論時能延伸想像操作的不同情況。另外也可以適度規範元件樣式，讓前端工程師來評估這樣的改善時間成本。
此系列 A/B 版本在比較 Header 的層次，B 版本將編輯區塊與 Header 更佳的區分開來，且同時簡化視覺層級。
提案的同時定義元件細節有助於前端評估執行工時
樣式異動標注
確立最終介面樣式，與前端逐步更新介面元件
在 Redesign 提案告一段落後，將最終定案的介面與元件進行完整的定義，完善產品的 Design System Guideline，包含像是字級調整、顏色規範、Logo Rebrading... 等範疇。
原產品介面在層級的辨識度薄弱，例如，Header 與內容編輯區域混雜；元件間的樣式過度相近，例如：Tab 跟 Button 容易混淆。