YOCTOL.AI Creator

Company

YOCTOL.AI

Role

UI Designer

Year

2019

Creator 聊天機器人建置平台,是一個雲端協作、支援多種權限角色的工具,背後導入了 AI 自然語意理解模型,讓商家、品牌能更智慧地在 Facebook、LINE 上面,和顧客進行 24 小時全年無休的貼心互動。

YOCTOL.AI Creator

Company

YOCTOL.AI

Role

UI Designer

Year

2019

Creator 聊天機器人建置平台,是一個雲端協作、支援多種權限角色的工具,背後導入了 AI 自然語意理解模型,讓商家、品牌能更智慧地在 Facebook、LINE 上面,和顧客進行 24 小時全年無休的貼心互動。

YOCTOL.AI Creator

Company

YOCTOL.AI

Role

UI Designer

Year

2019

Creator 聊天機器人建置平台,是一個雲端協作、支援多種權限角色的工具,背後導入了 AI 自然語意理解模型,讓商家、品牌能更智慧地在 Facebook、LINE 上面,和顧客進行 24 小時全年無休的貼心互動。

參與背景

經手 Creator 的介面設計前,其產品已經有初始的樣式流程,後續由我負責產品介面、視覺更新,並以 Dark Mode 作為新方向,以深色系、穩重、科技感來重新規劃產品形象。在提案新介面外觀的同時,也一併整理前期開發混雜的設計元件,將網頁元件規格化,並彙整產品所使用的 Design System 。

產品中的挑戰與學習

樣式翻新前置作業

介面更新準備,審視產品當前該改善的項目

介面更新準備,審視產品當前該改善的項目

因產品先前被幾位設計師輪流接手,在介面視覺與元件樣式上多處充滿不一致的狀態,在加入此產品開發後即面對整體介面風格重構的挑戰。立基於原產品的 IA 結構,挑選出涵蓋較多網頁元件的頁面進行提案,與 PM 以及工程師團隊一起討論樣式迭代的可行性。

原產品介面在層級的辨識度薄弱,例如,Header 與內容編輯區域混雜;元件間的樣式過度相近,例如:Tab 跟 Button 容易混淆。

Redesign 提案

介面 Redesign,同時定義各元件的互動樣式

介面 Redesign,同時定義各元件的互動樣式

在確立改善項目後,先挑選 1-3 張畫面進行調整,而選擇的畫面盡量涵蓋常用的網頁元件、或者從產品最核心功能的頁面來做呈現,以利在內部討論時能延伸想像操作的不同情況。另外也可以適度規範元件樣式,讓前端工程師來評估這樣的改善時間成本。

此系列 A/B 版本在比較 Header 的層次,B 版本將編輯區塊與 Header 更佳的區分開來,且同時簡化視覺層級。

提案的同時定義元件細節有助於前端評估執行工時

樣式異動標注

確立最終介面樣式,與前端逐步更新介面元件

確立最終介面樣式,與前端逐步更新介面元件

在 Redesign 提案告一段落後,將最終定案的介面與元件進行完整的定義,完善產品的 Design System Guideline,包含像是字級調整、顏色規範、Logo Rebrading... 等範疇。

原產品介面在層級的辨識度薄弱,例如,Header 與內容編輯區域混雜;元件間的樣式過度相近,例如:Tab 跟 Button 容易混淆。

Next project

YOCTOL.AI Website

YOCTOL.AI Website