PXMart App Redesign

2019-UI/UX, Redesign
INTRODUCTION
針對支付的功能進行重新設計,找出使用者的痛點或是操作流程上的問題,並提出相對應的設計解方,讓整體的操作變得更簡潔,提升使用者的體驗。
ROLE
Interaction Design
UX Design
Overview
全聯PX pay推出時間於2019年中推出,至九月中旬會員數量已經突破260萬,並在遠見雜誌『2019消費者FinTech大調查』中,拿下消費者評比『行動支付愛用榜』第三名。
PX Market APP的介面雖然能夠直覺性的進行操作,但使用後發現有許多不順暢的部分,因此決定針對部分常用的功能進行重新設計,找出使用者的痛點或是操作流程上的問題,並提出相對應的設計解方,同時保留官方APP原本所主張的特點,如方便快速、餘額一目了然、快速查帳、資訊優惠一把抓等特徵。希望透過一些改進與調整,讓整體的操作變得更簡潔,提升使用者的體驗。
Research
將PX pay app的功能圖(Functional Map) 畫出後,進行介面訊息結構分析。可以發現到有光是主要頁面就充斥了許多資訊與項目,且部分的項目按鈕都會引導到相同的頁面。
使用者反饋
根據App Store裡的用戶評論與網路知名論壇PPT使用者的討論內容,分析出許多資訊,其中較常被討論的項目是『支付選項容易使人感到混淆』。
Evaluation
根據Nilson’s 10 Usability Heuristics 中所提出的設計易用性原則進行評估。
Solution
針對上述所發現的主要現象,擬定了改善方案:
- 調整主介面的設計,增加適當的留白空間以及調整資訊呈現比例,提升易讀性。
- 整合相似功能的項目,減少複雜程度,改善使用者的體驗。
- 改善功能結構,減少頁面間反覆切換所造成的負擔。
Redesign
・主頁面的綁定信用卡、福利卡管理等項目予以整合,將會員卡相關資訊調整為較直觀的方式呈現,並以左右滑動方式進行會員卡的選擇與管理。
・移除原本於右上角的會員QR Code,避免操作上的認知不一致,亦提升支付系統的安全性。
・原先需要點進『交易/點數紀錄』才能查看消費明細與紀錄,重新設計的版本將交易資訊直接規劃於主介面內,幫助使用者更加快速掌握資訊
支付頁面
・新增了能夠互換支付系統的切換鈕,省略了必須跳回前一步後,要重新選擇以及重複認證的步驟。
・修改付款介面系統的配色,信用卡支付以藍色為基準色調,儲值金支付則以啞金色為基準色調,幫助使用者能夠快速的認知到目前在哪種支付頁面中。
優惠卷頁面
・整理優惠卷介面的資訊顯示,當點進圖標後才會跳出更多顯示。讓使用者能夠一目瞭然查看優惠卷項目有哪些。
・強化已經使用過後的圖標顯示效果,能更快速的掌握的優惠卷目前的使用情況
All screens
Prototype
The interactive prototype