About Project
iSAP 致力於多項 AI 智慧監控系統開發與整合，本次合作參與設計項目是正在籌備開發的 FRS（臉部辨識門禁系統），為 訴求軟硬體整合，配合 iSAP 工程團隊進行 Dashboard 與 App 介面設計與操作流程優化等項目。
本專案以先行設計開發的網站系統 Dashboard 成果為規劃基礎，進行 App 端的延伸設計。
Role
UI/UX designer
Team
Application engineer,
Project manager,
Front-end designer
Client
iSAP Company
Client Goal
-
打造能獲得企業青睞的產品視覺風格。
-
透過視覺設計幫助提案與銷售。
-
以產品開發技術為主的 UI 設計協作。
Project Goal
-
產出能向買家進行提案與展示的原型。
-
以視覺層面回應產品開發成果/進度。
-
優化介面操作體驗。
Requirements
-
設計產品 mockup。
-
打造專業視覺形象。
-
制定 design guideline。
-
產出 logic flow 與 prototype。
-
loading animation 設計。
User & Task
不同於其他競品包含出缺勤管理等複合型功能， iSAP FRS 網頁版系統專注於員工識別資料之分組管理以及對門禁監控系統的支援，因此在 app 中僅保留使用需求講求即時性的幾項主要功能。（以下介紹的三大功能也各別對應了三種權限之使用者身份操作任務。）
Architecture
1.
臉部辨識系統
訪客與員工出入企業大樓時，透過與監視器接觸進行面部掃瞄辨識身份，判定開放進出之許可。
2.
企業識別資料庫
對於出入人員進行資料建檔，並可以將成員收入 VIP、黑名單等多種群組進行人員分類管理。
3.
訪客來訪通知
根據不同級別的管理者與訪客身份制定通知推送機制，使用戶能掌握貴賓到訪資訊並即時接待。
4.
訂立執行重點方向
配合開發時程，進行順序如下：
一、臉部辨識系統
二、新增臉部資料
三、訪客來訪通知
APP Flow
以 iSAP 企業端技術團隊提供已開發的功能畫面與流程圖為參考，在了解產品運作流程的設計規劃過程中，發現現有開發進度畫面缺少了一些呈現操作進度應有的狀態元件，以及一些流程頁面。
在滿足基本需求前提下，針對上述狀況另外追加提出了新的流程解決方案作為開發參考。
配合技術團隊持續更新的開發進度，最後爬梳整理出三大主要功能之流程脈絡，並完善即時掃描辨識功能流程中錯過的互動設計細節、敲定 app guideline。
User Interface
-
視覺風格重點：
以沉暗色系營造予企業用戶專業及信任感。
-
Guideline：
繼承 Dashboard 風格，並制定 app 專用之元件樣式。
-
尺寸技術需求：
sketch / zeplin / overflow
Dashboard guideline
為訴求整體產品服務介面的一致性，延用 Dashboard 原有的主色、並以一個版本介面支持雙系統作為考量；參考工程端所提供的已開發介面來進行設計以下規範。
• Button
納入手機操作介面尺寸及易讀性等需求考量，給予辨識判讀結果明確的紅綠用色引導使用者辨讀與操作。
登入按鈕
主任務-取消按鈕
主任務-確認按鈕
當前狀態-取消按鈕
成功狀態-確認按鈕
錯誤狀態-確認按鈕
Strait & Solution
-
1. 專案中期發現插畫角色不夠亮眼突出，該怎麼修正強化？一、透過調整曲線比例、提高配色飽和度與對比性，增加角色的戲劇性張力。 二、優化情境描繪： 利用段落情境讓角色更融入其中，增加圖文契合度，以強化角色與登陸頁描述情境內容之間的連結。
-
2. 與團隊前端工程師 (/網頁設計師) 對於介面視覺有不同的看法 (配色上、圖面呈現上、執行技術上) ，是如何處理面對的？在未影響到策略層面的視覺設計以執行導向優先進行溝通妥協，透過大量調整與溝通經驗進行協商製造雙贏。 重點實例分享： 在「分銷功能」區塊對於呈現方式分為以故事敘述的文章段落，以及簡潔條列式的資訊圖表兩種。 前者期待透過賣家第一人稱敘事行口吻在使用旅程分享過程中點出分銷功能使用方法及其便捷性。 後者考量段落敘事文字過於冗長瑣碎而採用列點式的簡易資訊設計，減少版面文字量更加俐落明快，讓使用者能快速掌握單元信息重點。 在團隊堅持採用段落文章式排版呈現後，經過多次溝通，最後爭取到嘗試在插圖中加入簡單的圖表幫助使用者了解文句陳述情境。
-
3. 資費方案單元的分項說明和 CTA 按鈕經歷多次修改，最後是如何定案的？一、方案內容： 原以新舊制可用功能與費用作為主要說明內容，再加入年約收費制度說明顯得複雜無章。 後重新定義登陸頁面是配合全新收費方案改版上線，把視同年 9 月之後註冊之新制用戶為主要訴求對象。 故將表格改為針對未註冊新用戶之資費方案列表，舊用戶轉新用戶之相關說明統一由後台系統進行公告。 二、Call to action 按鈕： 原本三個分項都各自對應一個按鈕，但其中有兩個其實一樣都是註冊行為的召喚作用，在註冊流程中無法讓新用戶了解二者方案的差異。 在參考 CTA 倒三角的視覺設計原則後，決定以單一按鈕突顯聚焦、減少使用者對方案間的混淆，並在原按鈕處增加註解文字區塊，降低在視覺上的失衡。
-
4. 企業尚在探索品牌定位、建立差異化的過程，對專案執行有什麼樣的影響？在電商平台百家爭鳴的局勢中，需尋找出自己的獨特性與立足點。而當時的狀態確實造成一些執行推進上的困難。 將與視覺及介面設計有關的任務列出，和產品目標需求加以比對，調整決策出執行上線的順序權重： 角色設計： 第一階段＿賣家/消費者形象（已完成上線） 第二階段＿輕電商客服形象 產品介紹： 第一階段＿展現使用者相貌——分銷、服務特色單元（已完成上線） 第二階段＿形象動畫影片 (已完成分鏡腳本大綱) 降低產品介紹客服成本： 第一階段＿方案說明、系統介紹、各形態規模頁面範例（已完成上線） 第二階段＿FAQ頁面 (已完成設計) 、聊天機器人 （在任職間公司未正式進行第二階段項目排程，僅能以製作交付完整策劃文件以供日後接續執行之參考。）