Swipner App 改版 2018

Alan Chen

Published in

Alan’s Portfolio

8 min readApr 10, 2019

Swipner 功能簡介

海外消費時，由於「各國際組織匯率」不同且「各家信用卡的現金回饋和海外手續費」也有所差異。

Swipner 便是用來幫助使用者判斷當前消費情境應該使用的信用卡，並預估出帳金額的一款 App。

目標受眾大致擁有以下特點：

有不同國際組織的信用卡
經常國外消費（包括國外線上消費）
精打細算

因此，當目標受眾在國外使用信用卡消費時會想要：

知道到底該刷手頭上的哪張信用卡最划算來省錢
預估刷卡後的出帳金額（台幣）來決定是否消費等支出管理

由於下文只針對重點功能解說，關於改版前的實機操作可參考我們工程師寫的介紹文，改版後的詳細功能介紹則可參考民間部落客自發性的文章或是前往 Google Play 下載親身體驗，當前 iOS App 仍維持在舊版狀態，正在更新中。

參與改版的過程與負責項目

Swipner 已運行兩年，團隊裡共有四人分別是 Android 工程師、iOS 工程師、後端工程師與設計師，由於原本的設計師離開，開發者便邀請我加入團隊並對 App 進行改版以更符合使用者需求，「對於要重新設計一款自己不曾接觸過、市面上也無相關產品可供借鏡的 App 感到特別新鮮」，便無償加入。

因為產品的日活躍人數不多，且團隊成員都把 Swipner 當作「Side Project」在執行，設計前便無太深入的市場研究，自己在功能規劃和介面設計上多以先前的數據、軟體商城與粉絲專頁的回饋做為依據，找出待改善的項目，與身為目標受眾的夥伴們討論後，以不影響日活躍數據為前提，往團隊認為正確的方向進行。

改版改了什麼？

從下圖 UI Flow 的變化，可以發現變動幅度非常巨大，以下將針對幾個改版主要希望解決的問題進行著墨。

不用先備知識，無腦就能預測卡費

改版前，使用者須記得自己信用卡的現金回饋與海外手續費百分比才得計算，然而，並非所有使用者都知道自己手上所有信用卡的卡費計算資訊，不知從何下手的情況下，便會導致留存率低落。

改版後，透過定期爬取更新的信用卡資料庫，讓使用者可以「選取」或是「手動建立」自己的信用卡並加入到「我的信用卡」頁籤，在「我的信用卡」頁籤點擊信用卡的「試算當前卡費」按鈕後，即可開始估算卡費，使用者也可針對已加入的信用卡進行編輯，調整卡費計算資訊（現金回饋、海外手續費等），所有變更均會儲存以便下次使用，省去卡費估算的前置作業。

打開 Swipner 就能馬上知道要刷什麼卡

改版前，若要比較多張信用卡，必須來返設定每張信用卡的卡費計算資訊，改版後，只要將欲比較的信用卡加入到首頁，便會在每次開啟 App 時，自動根據當前設定的消費國家、消費管道（一般消費或是網路購物）排列出最適合使用的信用卡，排列在第一張的信用卡即是「匯率 + 海外手續費 — 現金回饋」最低者（詳見上圖「我的信用卡」）。

卡費預測更順手也更透明

使用者在估算某張信用卡的卡費時，最常更動的部分即是刷卡金額，在對帳的時候，甚至會頻繁的調動日期。然而，在改版之前，使用者都必須來返「卡費估算前置頁」更改輸入才能得出新的結果，十分不便（詳見上圖「卡費估算前置頁」與「卡費估算結果頁」）。

因此，決定改為在變動刷卡金額的同時，即時顯示估算結果，並可在同一個頁面調動日期以查看不同日期的出帳金額，其他不常被更動的卡費計算資訊則可透過 Overflow 選單內的「編輯信用卡」進行編輯。除此之外，也將卡費估算的過程放上，讓估算結果更能夠取信於使用者。

克服沒有當日匯率的窘境

由於國際組織匯率釋出時間不一，改版前，匯率比較的時間依據為當日，往往會有某組織匯率尚未釋出的情況。

改版後，依然根據「同一時間」的匯率進行比較，只是「同一時間」為各組織最新匯率的釋出時間中之最早者，以確保能夠同時比較所有國際組織匯率。當然，使用者也可透過排序設定將比較時間改為最新，便可比較各國際組織最新釋出的匯率，只是若為不同日的匯率相比較為不公允，因此非預設選項。

由於 Visa 尚未釋出當日匯率，預設以昨日匯率比較，並可透過排序設定調整比較依據

匯率走勢圖

由於海外消費的出帳金額所依據之匯率多為刷卡當日後幾天的匯率，更專業的使用者希望能夠透過歷史匯率走勢預測未來，以決定該刷什麼卡，因此，特別在「國際組織匯率」頁籤加上了匯率走勢圖。

古蹟修復再進化之手排機算機

為了避免使用者反彈，特別在首頁右上角設入口，將改版前的體驗（詳見上圖「卡費估算前置頁」與「卡費估算結果頁」）改良並保留於內，名為「手排機算機」，其中也埋下了追蹤器，以便日後針對此功能做取捨。

新增備註功能

由於信用卡的使用情境有太多變數，不定期也有各種優惠活動，因此特別新增備註功能，讓使用者可以針對信用卡進行註記，並可透過點擊信用卡來查看備註。

國家清單中加入常用國家

透過 GA 找出使用者最常用的幾個國家，並優先於國家清單中顯示，盡可能省去使用者搜尋的時間。

提升設計的一致性

除了導入 8px Grid System，也以 iOS 和 Android 皆通用的設計以統一各平台的使用體驗，並善用 Sketch 的 Symbol 產出 Zeplin Styleguide 的 Colors & Text Styles 和 Components，透過附有詳細樣式規格的設計指南讓工程師更容易還原設計稿。

在配色上，也因應改版後有類似計算機和走勢圖的兩大重要功能，便先以此二功能多用的暗色系發展，透過顏色去暗示使用者該如何使用新功能，統一使用者在手機上的體驗，順勢也減輕了因圖片元素不多，在淺色主題上可能會感到留白或文字過多的問題。

除此之外，為了讓整體設計更為一致，也對 Logo 進行調整，使其在不同平台的 Home Screen 上都能夠不失和諧地刷存在感。

改版結果

由於工程師並無多餘心力實行 A/B Testing，且新舊版差異非常大（由上方 UI Flow 可知），難以透過數據分析對上述賣點一一進行驗證，仍有待質性研究，目前只得先看整體成效。

改版上架後的三個月內，在 Google Play 評論上，約有五個舊使用者抱怨，推估是更動過大，在使用者需要使用 App 的時候，發現操作方式完全改變了，難免手足無措覺得難用，至於負面評論出現的時間區間之所以會持續三個月，估計是使用者久久才海外消費一次，使用 App 的間隔時間本身就比較長，因此數月後才發現產品改版。當時為此特別加強 Onboarding 的體驗，以期使用者可以更快上手。

上架三個月過後，在設計沒什麼太大變更的情況下，出現的評論多為正面評價，像是「直覺、簡單、好用」，在 App Store 或是 Google Play 甚至是粉專訊息等皆有出現希望 iOS App 也能同步改版的聲音，個人覺得應該不是 Onboarding 的功勞，只是因為使用者習慣了。