top of page
工作區域 1_edited.jpg

Simple is the Best : CHB redesign

使用者流程與Mobile互動

BACKGROUND

彰化銀行是台灣發源的金融機構,對一班客戶與企業開放。彰化銀行有7個海外分行與超過170個本土分行的國際銀行。彰化銀行app

允許使用者隨時進行金融上的變更與基本銀行行動。

作為其中一個受惠於這個app的使用者,我選擇彰化銀行app作為我的re-design作業選項。我分析了產品的架構、進行了一些可用性分析及paper user testing,發出了問券調查台灣數位銀行使用者的想法跟行為後,實行了這次的再設計專案。

Functional Redundancy

通過調查,我了解到即使台灣的大多數銀行應用程序都提供了許多較次要的功能,但並不是每個功能都很受使用者歡迎。實際上,只有不到10%的用戶與這些功能進行互動。
由於本次調查中有很多關於找不到真正想要的功能的描述,因此我開始考慮冗餘功能與用戶需求之間的關係。

螢幕快照 2019-12-08 23.01.38.png

RESEARCH

整體經驗

為了理解使用者的想法,我發出了問券調查台灣網路銀行app使用者的行為與感受。有 161 名使用者參與了這個調查,這些使用者大多是20~30餘歲。因為世代的因素,他們對使用數位產品來管理金錢並沒有特別的抗拒感。然而,在161人中有 69人都談及了他們在使用數位銀行產品時的不良體驗。

IDEAS

survey_a_edited.jpg

在分析數據並與一些參與者交談之後,我決定簡化彰化銀行的app。這個app將為那些不使用基金控管、股市操作等複雜功能的使用者設計,將原本複雜宏大的app轉為更接近移動ATM的存在。這些簡化後被保留的功能包括查看帳戶餘額,轉賬和賬單支付。

 

 

DESIGN STORY

BEGINNING:

該項目最大的挑戰之一是了解功能的結構。例如,轉帳時應讓使用者輸入哪些訊息?人們如何理解轉帳跟帳單支付的差異?銀行目前可以提供哪些服務?有什麼服務是使用者想要但現在辦不到的?為什麼?

 

我對規則和機制進行了一些研究,並得出了我選擇設計的主要功能的流程:轉帳(電匯)和帳單支付。

CURRENT PRODUCT ANALYSIS:

為了對小額轉賬(電匯)和帳單付款功能有一個更清晰穩固的想法,我仔細分析了Paypal和Venmo的設計以建立能得益於這些用戶已經習慣的流程。這兩個app都有很好的流程設計。

PAP.png
VE.png

ELEMENTS:

與Venmo和PayPal相比,原始的CHB應用程序包含較暖的顏色——那也是銀行的圖像顏色。為了保持這種一致性並利用此優勢來獲得認可和可見性,我決定保留這組顏色配置。

 

考慮到此版本的CHB App是為人們的日常使用而設計的,我認為這個app可以包含更多的趣味元素。由於銀行使用「彰化銀行柴寶」來推廣業務,因此我基於柴寶設計了幾個icon,希望能藉此活用原本的色調設計並提供給使用者更好的體驗。

 

 

 

chb.png

DESIGN & ITERATION

WIREFRAME

這些流程是為2個使用者腳本設計的:

a)用戶使用app將錢轉帳給已儲存過資訊的人

b)用戶使用app支付帳單

圖表沒有列入這些包含在後續設計中的流程:

 

c)用戶歸檔新收款人的帳戶信息。

 

d)用戶在交易期間/之後檢查帳戶餘額。

 

e)用戶查看最近的帳戶活動。

Obstacle_edited.png

由於這是一個一人設計,因此用戶測試至關重要。我邀請3位用戶進行了wireframe的遠程用戶測試。要求用戶查看屏幕並與與他們對話以獲得有益的回饋。

通過用戶的反饋,我注意到即使我的項目目的是簡化應用程序,但我仍然在設計過程中使其變得過於復雜。我重新審視我的wireframe,並開始刪除界面上的元素。我向另外3名用戶展示我的設計,這次一切變得很順利。

 

「如果我想做一些複雜而高度不確定性的事情,我想去實體分行尋求幫。」我的一位用戶說。 「如果app會要求我輸入一堆資料並反覆確認要不要發送確認信,我會覺得很煩,我可以螢幕截圖來完成這件事——遠大於發送一個我不知道他長怎樣的匯款通知。」

USER TEST: ITERATIONS

PROTOTYPE

登錄畫面
登錄屏幕設計整潔清晰。與原始設計和Wireframe相比,我刪除了大部分的干擾元素。在我的調查中,有許多人抱怨忘記密碼的問題。在這個設計中,用戶不必擔心忘記密碼,而可以使用FaceID或指紋等智慧型手機原生的密碼儲存功能來登入帳戶。
login_real20191209_023129.gif

The original screen, my wireframe, and the redesign

繳費
在帳單選單中,用戶會看到已與銀行簽訂合約的服務列表。選取了服務以後,他們會需要輸入帳單配對的資訊——這個過程因服務而定,但我設計了較簡單的規範。如果服務許可,他們也可以透過掃描QR code或條碼來支付帳單。
 
原先的CHB應用程序中沒有特定的賬單支付區域,用戶必須閱讀主菜單和側面導航菜單,並在冗長的列表中依靠閱讀自行搜索商家。這非常的費力,在新的設計中,使用者不需要在複雜的功能中迷途,只要簡單的選擇即可。
 
 
匯款
根據調查,匯款(特別是小額匯款)功能是該項目中最重要的功能。由於在台灣,PayPal和Venmo進行轉帳的方式仍然是不被允許且不普及的,因此使用ATM或銀行app進行轉帳是向朋友或個體網路商家付款的常見方法之一。
 
為了安全與正確的匯款,使用者需要輸入大量的訊息,在設計中,我盡力避免在這個過程中消耗使用者的認知資源。在Wireframe階段中我在同一個頁面上放了太多元素,經過使用者的回饋與設計修正,我完成了較簡潔且直觀的新介面。
 
 

The original screen, my wireframe, and the redesign

REFLECTIONS

The project is a very inspiring learning experience for me as this is my first individual design and my first mobile design task.  ​I used to think that I've clearly comprehended the concepts like "less is more" or"simple is the best" However, I'm not. I have to remind myself, again and again, to keep myself on the right track.
I learned a lot every time I delete a thing on my screen.
The spaces on mobile devices are as limited as human cognition, designers should waste any of them. User testing is a very useful technique to find that if an element is necessary. I also gain a deeper understanding of the importance of user flow and information structure. User research offers both possibilities and challenges and would support the design all the way.  
During the weekly class, I discussed with my classmate, Aimen and Xin and get advice from them. My professor, Allen Lee also provided me sights which help me keep rethinking about my design. The user researches I made really help me a lot. When ever I felt confused, my analysis came out and speak to me: "No, I want it more this way." Although this was an individual project, I was not alone. I'm with my user and amazing people in my class. 
bottom of page