數位存款帳戶線上開戶

優化數位線上開戶，客戶認為整體太死板沒有數位化的感覺，訴求重新規劃流程及風格，新風格介面設計以簡潔、互動、動態呈現，提高互動性、親切印象。

• 時程：2021/9-2021/10
• 介面設計：Sketch、Figma、AdobeXD
• 切版網頁：HTML、CSS、JS
• 成員：兩位前端工程師、一位UIUX、兩位PM

• 使用者需求訪談，釐清優化方向
• 定義guideline
• 製作Prototype模擬行為
• 提供RWD切版及JS串流程

一、規劃流程

規劃整理優化流程，與客戶溝通與說明會議

二、使用者調研

透過數位問卷搜集數位帳戶張相關資料

數位帳戶使用者樣貌

三、使用者痛點

開戶前

• 不了解詳細優惠訊息
• 不確定需準備什麼文件

開戶中

• 填寫資料欄位多，覺得很花時間
• 網頁突然出現錯誤或意外跳出時，剛填好的資料被清空
• 開戶時手邊不一定有證件

開戶後

• 不確定要等多久
• 開完才知道有些功能如非約定轉帳還要跑臨櫃辦理
• 轉帳時才發現有轉帳限額限制

四、整體解決策略

開戶前

• 首頁優惠以數字方式顯示
• 開戶入口以身分為頁籤切換
• 優化開戶流程說明

開戶中

• 優化資料填寫欄位
• 降低服務斷點流程
• 優化手機畫面及操作

開戶後

• 不確定要等多久
• 開完才知道有些功能如非約定轉帳還要跑臨櫃辦理
• 轉帳時才發現有轉帳限額限制

五、視覺風格設計

圖文說明

• 原先僅以文字、表格說明，給使用者感受不到數位的變化
• 以圖文搭配說明事項，不僅只是文字，搭配圖片後能讓開戶資訊更加鮮明化

問候語

• 與用戶對話問候，提升體整互動、親切形象
• 對話框中顯示問候語，以固定浮動方式顯示

多元顯示欄位

• 欄位問答採用親切、口語的文字為主，欄位跳脫一般開戶表單樣式，希望以活潑、有趣的欄位選項呈現。

自適應裝置

六、UI操作畫面

Prototype

• 開戶欄位當前選項完成，即可往下滾動，若想往前修改，往上滾動即可修改
• 整體以單頁式互動
• 使用Adobe XD提供原型如下：
• https://xd.adobe.com/embed/361b1586-b8f7-4e4e-a2e9-8e7ff4ae7cc0-6348/

Guideline