top of page

統一發票兌獎 APP

​專案類型

Redesign

使用工具

Figma / Adobe Photoshop

​合作對象

-

專案背景

在使用發票對獎工具時發現,財政部統一發票 APP 是唯一具有兌換獎項功能的,但在使用及下載次數上卻遠遠不及其他工具,從評價發現除了機制上的問題,部分使用者也對使用體驗有許多的建議,如:載具條碼和會員卡不同頁面使用不方便、找不到修改資訊的位置 .... 等,因此著手開始 Redesign 希望透過 UI 的優化來改善用戶體驗。

APP.jpg

設計流程

1. 現況分析與競品  分析蒐集線上 APP 工具,分析優劣

2. 產品流程優化  優化產品操作流程、繪製wireframe

3. 視覺定調  制定 Design System

4. UI 設計  製作 UI 介面及 Prototype

架構調整

flow-1.jpg

1. 首頁介面優化  首頁原先有一半的位置用來作為其他功能的入口,調整將選單整併成 Bottom tab ,釋出畫面空間。

2. 側邊選單移除  選單內容與原先首頁曝光功能多為相同,多重入口可能讓消費者造成混淆。

3. 結合輸入及對獎功能  最常被使用的掃描功能,能同時完成輸入及對獎,所以將兩者合併在同一個頁面。

4. 領獎、捐贈、歸戶移至子頁面  將使用率較低的功能做出層級的差異,降低進入 APP 的資訊量。 

5. 頁面內容整併  原先的子頁面進入後都有自己的 bottom tab 來切換功能,使用上是比較不流暢的作法。

flow-2.jpg

介面調整

首頁

VS 1.jpg
  1. 將原先側邊選單 "會員卡" 功能移動至首頁,與載具條碼並列呈現,讓使用者可以打開 APP 就可快速掃描。

  2. 輪播廣告移置瀏覽時間更長的掃描對獎頁面。

  3. 領獎、捐贈、歸戶以卡片樣式做出此資訊層級上的差異。

  4. 強化兌獎功能:在個人頁面做出未領取的金額提示

​頁面整併

VS 2.jpg

1. 最常使用的掃描功能,可達到輸入及對獎的功能,因此將兩個頁面做合併。

2. 將使用率較低的 "末三碼對獎" 及 "手動輸入",以 Icon 樣式做切換。

​新版兌獎流程

flow.jpg

Prototype

​核心樣式

system.jpg
component.jpg
bottom of page