趁著2021年的暑假,我和我的同學們自組了一個UI/UX讀書會,目標是在這次的讀書會中執行一個從前期研究到GUI實作的Redesign專案。我們以「學生生活用APP」作為選題主旨,最終選中行政院環保署的「環保集點」APP進行再設計。

環保集點
2021年7月時的環保集點APP樣貌

※「環保集點」是由行政院環保署推行的集點APP。只要購買環保商品、搭乘大眾運輸或是參與環保行動,就能累積綠點並用以折抵商品或兌換優惠。

桌面研究

我們從App Store/ Google Play 中收集了使用者的評論,以下是多數使用者共同提及的部分。

環保集點Redesign 應用程式商店評論
評論反映了APP需要改善的問題與使用者潛在需求

易用性指標分析與洞察

環保集點Redesign 易用性測試任務
任務圍繞「集點」為核心做設計
環保集點Redesign 易用性洞察
措辭不當導致使用者困惑是目前最主要的問題

我們以「收集點數」為核心設計了10道操作任務,並向20位受測者執行易用性測試。研究結果發現,在第2、4、9題的任務失敗率是最高的。我們總結受測者失敗的原因如下:

在SUS問卷中,多數受測者給予了平均約48分的評價,顯見APP還有很大的改善空間。

環保集點Redesign SUS問卷
SUS問卷結果
環保集點Redesign SUS問卷
SUS問卷結果

※ 易用性測試與SUS問卷執行於2021年7月。受測者招募條件為曾使用過環保集點或具有集點機制APP使用經驗的人士。

研究圖表

顧客旅程地圖

環保集點Redesign 顧客旅程圖
在兌換流程中找不到相應的按鈕、無法大量兌換是最大的痛點

人物誌

同理心地圖

環保集點Redesign 同理心地圖

親和圖

設計策略

經過研究後,我們發現使用者的痛點主要集中於「常常找不到需要的資訊」上。因此,我們以調整資訊架構、建立一致的設計系統與規範作為解決方法,並在這之上加入增強個人化的要素作為新設計亮點。

設計執行

資訊架構

環保集點Redesign 資訊架構

Wireframe

環保集點Redesign Wireframe

Prototype

環保集點Redesign Prototype

設計亮點

導覽列常駐常用功能

首頁、載具管理、兌換商品、查看優惠券、利用會員服務等五大面向為使用者最常使用的功能。因此我們將其置於導覽列中,令使用者可更快取得相關服務。

依照會員興趣動態調整版位

首頁劃分為最新消息、消費集綠點、環保行動、其他等四大版位,所顯示的內容會依照會員個人興趣調整。同時,模組化版位設計預留今後限時活動等彈性調整空間。

環保集點Redesign 設計亮點

篩選與搜尋可兌換商品

環保集點Redesign 設計亮點

Design Guideline

設計驗證

我們以使用者測試評估作為設計的驗證方式,結果顯示,有超過70%的受測者能夠找到並閱讀最新消息;超過80%的受測者可以成功地完成優惠券對換并使用;順利查詢點數餘額的使用者也超過80%,SUS問券分數自48分提升至73分。

環保集點Redesign 設計驗證

附錄:APP開發

在設計階段完成以後,我自主地進行了新設計的環保集點APP開發(個人學習用)。以下是開發版的APP畫面:

前往我的Gitub查看細節。

RECOMMEND

READ MORE

承邑的最新文章
PROMOTION

追蹤我的IG帳號 @chengyi_hsieh

身為UI設計師的日常學習、生活、觀點紀錄都在這裡!

立即追蹤

Felis-002

2021 年 1 月

其實...

2022 年 1 月