UI UX Redesign-重新設計中華郵政的「e動郵局」app

台灣科技大學108學年度設計系作業 非官方設計

蔡心愉
9 min readJun 30, 2020

前言

每個人都會擁有一個郵局帳戶。然而,郵局給人的印象卻是老舊、死板、而低效率的。近幾年,網路的普及讓生活中的大小事越來越方便,而郵局也跟著推出了「e動郵局」的網路服務,許多郵政和儲金相關的業務再也不用親自跑一趟郵局。

在我申辦了「e動郵局」後,卻發現這個app有很多地方使用起來都很不方便。藉著這次作業的機會,重新設計了「e動郵局」。

為什麼要重新設計「e動郵局」?

.app資訊架構複雜凌亂、沒有邏輯

.沒有提供真正能輔助郵局的服務

.許多操作缺乏提醒和回饋系統

(一)資訊架構複雜凌亂、沒有邏輯

1. 跳轉到郵局網站
在著手重新設計的第一步,我打開「e動郵局」內所有的功能,一一把他們操作一遍。過程中我發現很多功能都會跳轉郵局的網站,讓我納悶到底把這些功能放在app內的原因是什麼呢? 而且會跳轉的功能不只是一兩個,光主頁面陳列出來的12個功能內,就有5個會直接連結到網站,幾乎要達半數了。

圈起來的功能會跳轉到網頁

2. 隱藏層級太多
也是在探索「e動郵局」過後我才發現它提供的功能真的很多,卻都被埋在架構的最內層。而且多數都以條列式的方式呈現,介面沒有重點區分或是任何圖像化的輔助,眼睛看了很累,也難以查找要用的功能。

查看visa金融卡交易明細的路徑,步驟繁瑣

3. 登入後切換帳戶的介面不直觀
作為一個儲金管理的app,個人帳戶管理會是最重要也最常使用的功能,應該要容易操作。然而「e動郵局」登入後,要繼續使用其他功能的介面切換卻讓人無所適從。
下圖是「e動郵局」登入後的畫面。我以身旁的三五好友做測試,請他們嘗試去查看最近的交易明細。許多人會先愣住,因為介面沒有任何明顯的提示,亂點後才誤打誤撞進到其他功能的畫面。得到的回饋是 :「噢,這個app真的很爛唉。」

點擊藍色帳號數字才會進入其他功能

(二)沒有提供真正能輔助郵局的服務

經過問卷調查,「e動郵局」所提供的功能有將近8成是很少被人使用的。主要功能以儲金相關為主,比如查詢餘額、轉帳、查詢交易明細等等。由此可見,app雖然功能豐富,卻沒有切中使用者的需要。過多的功能還使得介面與架構更為複雜,不方便操作。

(三)許多操作缺乏提醒和回饋系統

使用「e動郵局」的轉帳功能,會連結到「郵保鑣」進行二次驗證,以特殊的加密協定保障使用者。許多人表示多下載一個軟體很佔手機空間,使用上也很麻煩。然而經過問卷調查,多數人為了保障安全和隱私,還是能理解此操作。
「郵保鑣」是郵局的規則,無法刪除,但驗證過後的使用者體驗是能夠再優化的。在「郵保鑣」內雖有驗證的紀錄,卻不表示交易結果都是成功的,需要再到e動郵局內的儲金帳戶交易明細查詢是否有該筆交易紀錄,在操作上缺乏清楚的回饋。

郵保鑣介面 / 轉帳後的訊息清單

這些問題該怎麼解決?

.優化介面設計,重整資訊架構,凸顯常用的功能與重點

.新增線上預約的功能,輔助郵局辦理業務

.規劃轉帳紀錄與提醒系統,確認交易結果

(一)優化介面設計,重整資訊架構,凸顯常用的功能與重點

  1. 功能區分成金融與郵政兩大頁面
    「e動郵局」內金融和郵政相關的功能全部都混在一起,難以找尋要用的功能。常用的功能也都被埋在層級深處,難以快速使用。因此將app的介面簡單明瞭地分成金融主畫面與郵政主畫面。
精簡後的資訊架構(圖片以XMind製作)
  1. 介面分區規劃
    將顯示在主頁的功能分區規劃,由上而下分別是主要的顯示資訊、常用功能、和次要功能。金融和郵政兩個頁面都是一樣的分區,讓使用者能漸漸習慣這樣的介面配置而直覺性的操作,建立一個固定且無需思考的使用模式。
主頁面分區規劃
  1. 客製化使用者常用的功能
    增設「我的最愛」功能,讓使用者能自行訂定常用的項目,節省時間。將此功能整理到下方toolbar,不論在哪個介面都能快速切換到常用的功能。
新增常用功能到「我的最愛」

(二)新增線上預約的功能,輔助郵局辦理業務

觀察到的現象
「e動郵局」內金融相關的部分功能已經省去我們親自到郵局刷簿子、轉帳等等的麻煩了。然而郵政的許多業務依然仰賴臨櫃處理。跑一趟郵局往往要在現場等待許久,浪費掉許多時間,是很多人討厭去郵局的一大原因。

提出的辦法
在調查研究的過程中,我發現中華郵政的網站有提供線上取號和預填表單的服務。能事先取號或是將制式的文件填好不僅能夠節省我們在現場等待的時間,也能幫助郵局辦公。像這樣的功能比起牌照利率查詢、預約投保、壽險房貸等等,更能實際幫助到使用者。而線上預約配合手機的機動性和即時性也能發揮到更大的效益。

將網站的線上預約整和到手機app內

(三)規劃轉帳紀錄與提醒系統,確認交易結果

觀察到的現象
以自己使用的經驗為例,正常轉帳過後應該會跳轉到「e動郵局」呈現交易結果的介面,然而我操作完後卻跳回主畫面,翻遍了整個app也找不到有整理轉帳紀錄的地方。交易明細內沒有顯示該筆紀錄,但在驗證過程中也沒有出現驗證失敗的訊息。整個轉帳的流程無論是操作成功或是失敗,提供的回饋資訊都不明顯,無法得到交易結果的確認,令人困惑。

提出的辦法
在「e動郵局」內整合了轉帳紀錄,標示出完成的交易紀錄和交易失敗的項目,就算系統即時回饋出問題,也能後續到這邊查找。轉帳失敗也會針對系統偵測到的問題提出解決辦法,排解問題後便會提醒使用者繼續未完成的操作。

交易失敗提供解決辦法 / 整合轉帳紀錄

原版設計 vs 重新設計

.金融、郵政區分

.滑動切換,方便單手操作

.介面模組化分區

.新增愛用功能,自訂常用項目

.餘額用圓環圖呈現,方便比較各類別佔總資產的比例

.以顏色和圓環粗度差異提高識別度

.眼睛圖示能模糊金額,保障個人隱私

.單一頁面呈現,釋放原本繁瑣的層級

.滑動切換存簿與金融卡,對比各項支出,清楚的掌握自己的花費

.時間的選擇不必再反覆跳到前頁更改

.用格子的大小和顏色來區分不同功能

.轉帳過程標示出重要資訊,提醒使用者再一次確認

.交易失敗提供解決辦法

.儲存上次操作失敗的紀錄,不必重新輸入

.整合轉帳紀錄,並且可以用標籤分類固定的轉帳

.以地圖的形式呈現,距離與位置可視化

.小工具列 : 多種篩選、收藏據點

.快速找到最近或是等待時間最短的郵局

.估算大約的等候時間和應該抵達的時間

.提醒出門時間和建議攜帶的文件

.以進度條呈現運輸時程

.圖示分類郵件和包裹

.放大寄、收件人,幫助判斷包裹內容

.依據郵件狀態提醒使用者採取應對的措施
(待取貨、已取貨、到郵局招領)

GUI視覺整合

新的logo以簡約俐落的風格重新塑造郵局的識別印象。沿用原本中華郵政的圖樣,將右下角的部分筆畫改作e,呼應app名稱「e動郵局」。將郵局的三條紅、藍、白的斜槓置入logo之中,希望以此加強與郵局之間的關聯性,提升識別度。

設計系統 :

.字體使用Segoe UI

.色彩計畫圍繞象徵郵局的綠色調,並以紅、局、黃等顏色輔助特殊資訊。

總結

希望使用者面對改版後的「e動郵局」能馬上找到想要的功能,也能夠得到很好的操作體驗,而不是因為不得已才使用它的。以此為目標,優化整體介面的風格,注意每個功能的操作細節,加強提醒系統和紀錄整合,讓「e動郵局」能成為生活上的得力小助手。

心得

UIUX真的是一個越挖越深的坑,說它是無底洞也無坊。

在此次作業的過程中我碰觸到了很多平時不曾去理解的知識,「e動郵局」也從手機裡生灰塵的app變成每天都會點開的app。

使用者體驗在乎於一切迷你的細節、隱微的接縫點、和無窮無盡的觀察。而如何將蒐集來的龐大資料轉化成一個小小的手機螢幕畫面,更是要費盡一番心思。

感謝填寫我問卷調查的人們、給予我意見的同學們、指導我的唐老師、和願意看完此篇文章的你們。對於以上的設計有任何意見都歡迎給予建議和回饋,謝謝大家(淚流滿面)!!!

備註

本文所述設計案為2020年6月,臺灣科技大學大三課程內容,並無與相關政府單位合作,設計案由唐玄輝老師指導,蔡心愉執行設計,如有相關問題,請和我們聯絡,如有相關建議,也請留言指教。

--

--