UI/UX Redesign
B2C保單線上變更服務
專案類型
UI/UX Design
專案時間
2020 Mar.~Jun.
我們大部分保戶的年齡落在45~70歲的區間，對於這個區間的使用者，操作電腦對他們來說已經有點吃力，加上線上變更單元的電腦版的操作流程複雜繁瑣；雖有附上操作說明書，但很多客戶還是選擇到櫃檯尋求幫助；我們想透過這次手機版的推出，讓操作介面一目瞭然，不需要解說員也能知道該怎麼使用。
我的角色
UI/UX Designer
關鍵字
B2C、Insurance、UI Design、UX
使用工具
Adobe XD、Adobe Illustrator
｜專案概況
I. 專案挑戰
-
了解壽險業know-how與規則
金融、壽險業中含有的專有名詞和規則多，必須得要了解其背後含義，才能梳理使用邏輯和設計，並將操作簡化且合乎法規，對於一個剛踏進金融壽險業的設計師，實在是一大挑戰。
2. 提出的需求方不是真正的使用者
雖然需求方提供了操作說明書和需求書，但他們不見得是第一線的使用者，無法解到使用者的真正的痛點與困難之處，必須找出真正的問題，才能夠有效的解決。
II. 專案目標
我們需要確保九大功能都具有相同的邏輯流程，需將操作流程與設計語彙統一，並簡化成三大步驟；並讓使用者能夠清楚的知道自己目前的操作狀況、距離完成目標還差多少和為什麼無法完成目標。
｜設計開發
1.設計架構
盤點電腦版舊有流程與功能，並由我將體驗與交互統一，依照功能繪製流程圖後並優化，反覆與客戶討論、修改與確認。
2.介面設計
依流程與需求訪談設計Hifi-mockup，並搭配UI flow向客戶講解、討論，讓客戶可以直觀的體驗產品並給予回饋，接著進行修改、確認，後將確認好的功能交由工程師開發。
3.驗證設計
工程師開發完成後，會由我進行單元測試，確認畫面與流程與設計相符。透過調整記錄表控管問題、開發人力與時間。
內部測試通過後，交予客戶規格書並進行UAT測試，反覆進行測試、討論、修改、異動、確認，直至功能與需求完善後，準備將產品上線。
｜優化設計重點介紹
1.「線上變更頁面」功能中的改善要點
客戶需求與討論
將設計稿交付客戶進行確認時，客戶給予回饋覺得此頁面的右上角看起來空空的，視覺不平衡並提出修改需求：
1.將客戶資料中的資訊全部置左或置中。
2.不想要畫面有空白處，想要更豐富一些。
擬定並排序解決方案
目標 :將畫面加入某種合理元素，使畫面左右平衡。
定義問題
因為客戶反映畫面中有空白處，覺得視覺不平衡，所以提出了修改需求，希望我們調整版面配置或其他解決方案。
→1.將客戶資料想像中的畫面實現，並解釋不採用的原因。
→2.加入具有相關性的圖片：企業吉祥物
→3.加入常用的功能在右上角
原有吉祥物與現在手機版設計風格不搭。
・吉祥物多陰影、線條
→專案採扁平式圖標設計，吉祥物採用有陰影的款式看起來很突兀。
・無法辨認為吉祥物
→太陽花寶寶視覺上與合庫連結關係較弱，無法直覺得知為合庫的吉祥物。
・扁平化設計
→將原有的設計精扁平化調整後，並調整顏色與細節，讓整體更簡單、舒適。
・留下重點，強化形象
→將庫弟頭部留下，並讓他可以依照登入者身份，與使用者互動。
Before
After
將優化後的吉祥物放置在首頁右上角，加強公司形象與互動性。
Before
After
・右上方加入常用功能
→若增加功能，會使工程師開發的工作量上升。
・加入具相關性的圖片
→目前看起來最可行的方式，可是可以加什麼圖呢？
・最好能替形象加分
→公司舊有形象角色年份過久，與現在的版面設計不搭。
・親民、活潑、知識力
→呈現我們核心精神，此角色需具有以上特質。
2.「九大變更項目」功能中的改善要點
發現問題
九大變更項目，因流程複雜，步驟需要一一指導才會使用。
定義問題與目標
因為舊有流程很複雜，所以希望手機版能讓客戶很清楚現在處於變更的哪個階段；且法規規定必須要讓客戶再次確認變更資料並發送手機驗證才算變更成功。
擬定並排序解決方案
目標 :將流程梳理、簡化成三大步驟，並維持操作一致性。
→1.將畫面上方加入明顯的變更項目名稱與步驟條。
→2.將步驟拆分為「填寫申請書」、「確認更改內容」、「確認變更」。
→3.加入麵包屑引導，讓客戶更清楚現在所處位置。
於是我將流程梳理、簡化成三大步驟，並在九大線上變更功能中維持交互的一致性。
Before
After
｜品牌與風格指南
-
選用顏色與配色
綠色是代表希望與知識的顏色，令人有重新建構出整個新銀行的想像力，同時代表與清澈及環境有關的價值。搭配金色與暖色系背景，讓整體質感更加上升，打破對壽險業傳統的印象。
2. Icon
B2C 手機版線上變更，是一款專門替合庫的保戶所設計的網頁，為了能讓使用者可以透過圖標了解此變更的所屬功能，每個圖標都是由線條加上強調功能色塊組成的，透過填色與撞色，來凸顯功能的相異之處。
因保單線上功能中有許多資訊卡片，所以我將卡片設計為兩種通用形式，並製作設計規範，讓不同的開發工程師暸解什麼情況下要使用哪種設計，提升開發效率與一致性。
