擔任角色
Designer
團隊成員
PM x1
iOS x1
Android x2
Backend x1
專案時長
3 個月 /
Q2 2023
產品
Moneybook 麻布記帳
App
團隊於 2022 Q4 進行為期 2 週的用戶訪談 ，邀請用戶分享關於 Moneybook 的使用經驗與想法。
訪談目的主要為：輔助 — ① 釐清 Moneybook 定位、② 制定 2023 roadmap 主軸與項目、③ 探索能留下、黏住用戶的可能因素
延伸出的想法有很多，此專案主要著重於分享 [分析 Tab — 收支分頁優化] 相關內容
[目前已上線] 的收支分頁，由於有部分功能尚未上線，因此右圖非最終版。
右邊為收支分頁新架構 (含未上線功能)，藍線為 [新增、優化] 功能，灰線為既有功能。
↓ 下滑查看更多細節 ↓
台灣市面上的記帳 App 大多需要用戶手動輸入每筆收支，一些則以遊戲化或提供多元功能來吸引用戶。而 Moneybook 擁有獨特的 [自動記帳] 功能，透過與各大銀行同步，整合各類金融帳戶並記錄下帳務資訊，讓用戶在一個 App 就能輕鬆追蹤所有資產。
然而，隨著 [資產整合] 的目標逐漸實現，團隊開始思考除了既有功能外，Moneybook 還能提供什麼樣價值給用戶？
從訪談中發現：用戶對於 Moneybook 有著更多的期待，除了資產整合外，還希望使用 Moneybook 來輔助他們進行 [收支管理]。
記帳，就像是在替自己的 [金錢流向] 建檔，而養成記帳習慣 ≠ 存到錢，因爲重點在於：記帳後採取了什麼行動？若只是單純的流水帳，沒有運用蒐集到的資訊來了解 [消費輪廓]，做下一步的規劃，更有意識地花錢或達成生活目標，那麼記帳的效益就無法充分發揮。
因此，對於那些已成功養成記帳習慣的用戶來說，接下來的行為才是關鍵，同時也是 Moneybook 能給予更多協助的部分。
延續發現，我們想探討 —
「如何在現有基礎上，幫助用戶更有效的進行收支管理？讓 Moneybook 不單只是一個資產整合的工具，更是能幫助用戶實現目標的理財夥伴。」
方向 01 — 審視目前流程 / 功能
前面有提到進行收支管理前，得先了解自身的消費習慣，因此我們提出在 [了解收支狀況 & 釐清收支去向] 時要完成的任務。根據這幾個 job story 來觀察 ：目前 Moneybook 是否讓用戶能有效檢視 [收支狀況與去向]，這之中存在什麼樣的問題或機會？
在「同步完成後」，我想要「知道收入、支出的金額 & 金額的變動」，如此才能「了解目前的收支狀況 & 並比較與前次的差異」
"舉例：當我查看收支卡片時，發現目前的收支狀況不如預期，而且支出金額似乎比上次同步高出許多。"
由於收入、支出的金額可能受到 [分類錯誤的明細] 影響，因此無法確保數字呈現的準確性
每次同步後，不會顯示收入、支出的 [金額變動] 資訊，用戶較難迅速了解與前一次同步的金額增減，以及差異是否在合理範圍內等等
在「確認目前的收支狀況後」，我想要「知道有哪些新增的明細」，如此才能「了解是哪些明細導致收入、支出的金額變動」
"舉例：我固定每週進行同步，確認收支狀況後，我會到明細列表查看這週有哪些新增的收入、支出明細。"
每次同步 [新增的明細] 不會被標示出來，用戶需自行識別
由於各銀行匯入明細的時間不同，因此無法單靠時間是準確判斷哪些是新增的明細
在「確認目前的收支狀況後」，我想要「知道收入、支出的各項分類佔比」，如此才能「了解消費狀況與金錢流向」
"舉例：確認收支狀況後，我透過分類圖表發現這個月的咖啡分類開銷的佔比最高，甚至超越了交通分類。"
不確定現有的 [分類長條圖] 是否為最適合呈現 [各項分類佔比] 的圖表
不確定是否會影響洞察 [需留意的分類] 效率
在「了解消費狀況與金錢流向後」，我想要「仔細檢視明細」，如此才能「抓出需留意的明細」
"舉例：當我檢視明細後，才發現原來是因為我上週在 711 寄了 50 杯咖啡，導致咖啡分類開銷的佔比大幅攀升。"
明細列表以日期排列，並無提供其他篩選條件，可能使查找特定明細不那麼方便
若利用現有的明細資料提供更多分析，如大筆支出排名、top 5 消費商家等，是否能協助用戶更容易辨識出非預期、非必要或來源不明的支出
方向 02 — User Voice
將平時蒐集的用戶回饋，彙整成以下 2 點
voice 1
用戶表示有時無法 [直覺的找到所需功能 / 頁面、資訊]，如搜尋細項時需思考要從哪操作、需好幾個點擊才會找到需要的功能等等
voice 2
用戶表示若能新增 [各種圖表] 會更好，在解讀數字上會有幫助，有些用戶認為既然有資料，那為何無法提供有價值的分析等等
用戶期望 vs 現況
有效進行收支管理的關鍵是：先滿足 [了解收支狀況與去向] 的基本需求，後續的判斷與效率才有機會提升
用戶期望
將省下的手動記帳時間 ➝ 投入到需要思考的 [收支管理 / 財務決策] 任務上，例如判斷是否需節省開支、設定預算，甚至是制定更長遠、未來的理財計劃等。
用戶自有一套控制開銷 & 理財方式，因此他們不需要直接的財務建議，而是能輔助 [收支管理 / 財務決策] 判斷的資訊。
現況
雖然省下了記帳時間，但用戶在現有流程中仍需自行抽絲剝繭，耗費不少時間在 [釐清收支去向]，進而影響到後續的 [收支管理 / 財務決策] 任務。
目前的功能架構偏複雜 + 部分頁面定位不清，導致有些用戶在尋找功能 / 頁面上有困難，有時甚至找不到所需資訊。
目前的分析資訊不夠豐富 / 有價值，用戶 ① 較難直觀瞭解花費習慣、洞察消費盲點，同時也 ② 無法視覺化的追蹤、比較數據變化，因此無法在 [收支管理 / 財務決策] 判斷上得到充分的輔助。
根據分析發現，我們將問題範圍再收斂，列舉出幾個「我們如何…」
讓用戶能「輕鬆解讀」帳務數字，降低認知負擔？
以「易於用戶了解」自身「整體財務狀況」的方式呈現資訊？
縮小理解（收支狀況）與行動（收支管理）之間的差距，更快得到好的財務結果？
從 [優化基礎功能] 著手，重新梳理功能架構，提升檢視收支狀況的效率，改善用戶體驗。
逐步提供 [深化的分析功能]，如多元的視覺化圖表、提示資訊等，協助用戶全面掌握、洞察收支去向，快速且精準的做出財務決策。
收支分頁的定位本該是幫助用戶了解短、中、長期的收支狀況，進而找到需要注意項目，但目前該分頁中的卡片類型與收支的關聯性較低，且提供的分析資訊不夠充足，導致用戶對該分頁的定位感到疑惑。
根據先前的分析與策略並審視收支分頁現況，我們梳理出數個優化目標，以下列出我有參與的 4 個部分
目標 / 原則 — 高效、便捷、直觀
提升資料正確性
提升財務檢視的基本效率，方便用戶進一步監控、尋找明細
引導用戶使用相關功能，幫助掌握財務變動
提升財務檢視的高級效率，協助用戶掌握不同週期的趨勢、追溯特定明細
… 更多
✨ 以 high impact & low cost 來考量優化順序 ✨
觀察
直接 — 收支分頁曝光率
進入此頁的用戶數量與點擊 by 週 / 日 / 月
直接 — 各功能相關數據
是否達成制定的指標
間接 — 有效 WAU、MAU
每週、每月的活躍人數是否提升
註：用戶開啟 App 頻率會因理財習慣而不同
過往 [待確認明細] 區塊經常被忽視，因為它附著於收支總和卡片底下，但實際上，正確的明細分類是獲得精確分析圖表的關鍵之一。
為了提升資料和分析的正確性，故將 [待確認明細] 區塊拉出，成為一個獨立卡片，並且把它的排列順序拉到最上面，讓用戶在一進到收支分頁，就能馬上看到自己有需確認的明細。
↓ 改動帶來的 3 個好處 ↓
更容易被注意到
獨立的卡片讓此區塊更顯眼，用戶遺漏待確認明細的可能性降低
區塊定位明確
加上卡片說明，用戶能更清楚此區塊用途，不會被其他收支總和資料分散注意力
分析正確性提升
當用戶能更積極進行明細確認時，分析結果會更加可靠，有助於用戶制定更明智的決策
該卡片的收入、支出進度軸有時候會出現計算 bug，讓用戶感到困惑，但因為這是蠻初期的功能，團隊內部對其計算方式了解有限，難以進行有效的優化。
因此，我們決定
移除收入、支出進度軸，只留下重要數字資訊。
將標題拉出，並新增相應的說明文字，以確保分析 Tab 卡片的風格保持一致，且在工程方面可以共用元件。
如此一來不僅可以簡化介面，使其更加直觀、易讀，提升用戶查找所需資訊的效率，也減輕了團隊在維護方面的壓力。
儘管透過現有的分類長條圖就能了解各分類的比例，但對於 Moneybook 用戶來說，圓餅圖似乎還是最直觀的選擇。其實在規劃初期，我們也曾糾結過真的非圓餅圖不可嗎？畢竟它其實有不少缺點。
但在回顧用戶需求與我們的目標後，便意識到使用哪種圖表並非最重要的，畢竟圖表易讀性還是得詢問用戶感受。況且我們已嘗試過不同圖表，而用戶回饋還是更偏好圓餅圖。
最後我們選擇了 donut chart 而非傳統的圓餅圖，因為它省去了圓中心，有更多空間放額外資訊、視覺上也比較清爽，用戶可以迅速了解分布情況。
於中央顯示了該月的總計，當未選取特定分類時，所有分類和比例一目瞭然。
若選取任一分類，中央將顯示該分類的名稱、金額和比例。
考量到相同顏色的分類有機會排在一起，所以用白色線條將它們區隔開來，使每個分類區塊顯示得更加清楚。
↓ 除此之外，還有… ↓
分類數量
通常建議圓餅圖數量控制在 5 ～ 8，超過這範圍可能造成視覺效果過於分散，使得各部分比例難以辨認。
我們假設是：用戶主要關心哪些分類使用最頻繁，而那些佔比較小的分類對他們的重要性相對較低，在與 PM 討論後決定將佔比 <= 4% 的分類歸類為 [其他]，避免分類過多，導致圖表太破碎而難以點擊和閱讀。
極端狀況
因為目前 App 的分類數量是無限制的，所以必須考慮到極端狀況。在與 PM 討論後決定將 donut chart 至多顯示的數量訂在 25，這麼做可以確保即使有非常多分類，用戶仍然能夠清晰地閱讀標籤文字，保持圖表的易讀性。
趨勢圖表是 Moneybook 從初期就提供的功能，但它被放在某個卡片內頁，若用戶沒好奇去點擊，就很難發現它存在。除此之外，它也有一些 bug，即使用戶查看了圖表，也很快會發現其中存在著計算問題。
因此，為了引導用戶使用它，我們決定將趨勢圖表拉出成為獨立卡片，打掉重練的趨勢卡片除了解決過往 bug 外，還加上輔助的資訊以及優化了滑動、點擊的體驗。
較可惜的是由於套件限制，目前無法在選取時加粗時間 label (如：5 2023)，以幫助用戶理解正在選取的月份為何，儘管如此，像是這類細節都會列入優化的 backlog 中，以便在未來的優化中提供更好的使用體驗。
↓ 調整範圍 ↓
新增變動值
讓用戶更容易比較與前一月的增減，以確認是否在預期內
新增 Y 軸
確保用戶能夠清晰地閱讀和理解數據
調整結餘圖表
為使資訊更清爽，調整為單獨顯示的折線圖，用戶能更輕易追蹤結餘變化
我們也優化了趨勢頁，保持了基本邏輯和內容，但翻新了介面和交互。除了更新固定於上方的趨勢圖外，下方的交易明細區塊也改以 bottom sheet 呈現，讓用戶可以一次查看更多的明細，這也與 App 中其他明細頁面的設計一致。
此次還新增了明細排序功能，用戶可以依日期遠至或金額高低進行排序，提供更彈性的查看方式。
卡片搬動通知
因信用卡分期卡片性質與收支關聯性低，故將它搬移到債務分頁。我們使用 tooltip（不想讓提示佔太多空間）來提示用戶該卡片已搬家，為確保用戶都有看到該通知，tooltip 消失且不再出現的時機為當用戶點進債務分頁後。
常見問題入口
為了應對收支頁優化上線隨之而來的可能客服需求，故在 navigation 新增常見問題入口並連結至 Moneybook Blog，提供該頁的常見問題解答或教學資源，希望用戶能在需要時快速找到答案。由於疑難雜症太多了所以不考慮再做一頁 QA 頁，日後要維護、優化，在時間與資源考量上不太划算。
尚未上線的功能
提升資料正確性
➝ 同步提示：在用戶瀏覽收支分頁前，提示他們要同步，以確保所看到的分析結果是實時且準確的，這對於財務決策是非常重要的。如此一來，用戶也更可能對 App 提供的資訊感到信心，並將 App 作為可靠的依據。
提升財務檢視的基本效率，方便用戶進一步監控、尋找明細
➝ 分類列表：提供更完整的分類資料，以補充 donut chart 的不足。
➝ 分類內頁 & 詳細頁：當用戶查看 donut chart 後，想檢視特定分類的消費，該頁可提供更詳細的資訊，讓用戶更進一步瞭解收支流動的細節，找出是否有需留意的明細。
引導用戶使用相關功能，幫助掌握財務變動
➝ 卡片顯示 & 排序工具：用戶可按需求自定義顯示的卡片，也可按偏好選擇卡片排序方式，此功能可提升用戶體驗，也能增強 App 與用戶之間的互動性。
提升財務檢視的高級效率，協助用戶掌握不同週期的趨勢、追溯特定明細
➝ 篩選工具：可透過參數自定義資料範圍，讓用戶更方便瞭解關心的趨勢。此功能賦予用戶更靈活掌握分析內容的自主性，同時也讓分析資料有更多層次、更全面的可能。
➝ 起始日設定：每人的財務週期都不同（如發薪日可能是 1 號 or 5 號），該設定能夠滿足不同用戶的需求，確保 Moneybook 符合他們的財務習慣。另外，在設定起始日後，用戶不再需要每次透過篩選工具手動調整日期，這樣能節省他們時間，提高使用效率。其次，準確的起始日也有助於日後的預算功能優化，讓用戶能更好的追蹤每月的收支，進而更精確進行財務管理。
有限的發開資源
工程需同時支援兩個團隊，導致時程緊迫 / 以及技術的限制
設計能做的
清晰交付
交付時盡可能提供清晰、詳細的設計 spec，以減少來回溝通的時間成本
快速適應套件限制
根據套件的限制，快速進行設計調整，同時確保不犧牲用戶體驗
實際問題分享
狀況
忽略了資料量過多可能導致長時間載入的問題
如何解決
因工程方面是沿用既有邏輯，所以由設計方面緊急調整圖表樣式和交互
後續
此調整會稍微降低用戶體驗，所以有與 pm 確認之後是否會安排該功能優化
如何避免
在討論階段、未進開發前，應有自覺關注相關問題，並納入設計考量。也可針對龐大的資料量進行載入測試，評估等待時間是否合理
還會觀察什麼 / 其他的指標
直接 — # of subscribers
是否願意付費解鎖功能（待訂閱相關功能上線）
間接 — WAU/MAU or DAU/MAU
是否提升黏著度，一個月會使用幾天
間接 — 留存率 wk1 - wk4
是否會延續 [已註冊且綁定帳戶] 的新用戶留存
間接 — # of download
是否被新功能吸引
有更多時間或資源 / 訪談與測試
因為資源關係，目前只能自行假設，但是只把團隊想法當依據一定會有偏誤，因為我們對於產品的了解程度和用戶有落差
我想針對 [收支管理] 的主題進行訪談，理解用戶的流程、目的為何，通常是在哪裡卡關等
訪談 [想有更多圖表] 的用戶，釐清對現狀有什麼不滿
訪談 [找不到部分功能] 的用戶，釐清操作流程中的困難點為何
在設計流程中進行 user testing，評估、確認設計決策和方向有滿足用戶的需求
如針對長條 / 圓餅圖進行 usability testing，驗證圖表類型是否會影響檢視效率
其他可能性 / fun ideas
除了追蹤過去、控制現在外，如何幫助用戶規劃未來？
建立更好的財務習慣
→ 透過設計有趣的獎勵或挑戰機制來激勵用戶，如每次成功降低信用卡費用都能獲得獎勵，提高用戶參與動機，進而培養更健康的財務習慣
→ 可能也因此提高回訪率？
尋找省錢的機會
→ 識別可幫助用戶省錢的機會，如取消未使用的訂閱
目標和規劃
→ 協助用戶設定明確的短、長期財務目標，並提供建議，幫助用戶在期望時間內實現目標
→ 可能也因此提高回訪率？
在有限時間內找到平衡與解法
從初期探索 ➝ 到提出可行的設計方案 ➝ 再到最終完成交付與階段性上線，過程中和 PM 大量討論並且不斷迭代設計方案，也免不了有意見不同的時候，但最終都找到了很好的平衡和解決方式。在範圍廣 + 有時間限制的情況下，還是可以透過定義改動範疇與排列優先級，在有限的時間內產出不錯的成果。
設計取捨與反覆溝通
此次優化牽涉到圖表，所以有使用到一些套件，在設計過程免不了要做出取捨，也遇過進開發後才發現套件限制而需緊急調整設計的狀況。但透過良好溝通，還可以讓工程師明白設計師對細節的堅持，並且願意和我一起多次嘗試，產出現在的第一版。
多問為什麼與不必一次做到完美
這是我近半年的感想，理解問題、分析問題、討論問題，思考過根本原因才知道該如何做決策，而有方向後不必急著一次性解決所有問題，先嘗試看看，得到回饋後再去優化。產品開發是一段無止盡的優化旅程，而功能需透過不斷實驗，才能確定哪些方案是最有效的。
盡可能的記錄工作 / 設計流程 🥲！
才能隨時回顧 feedback、過往會議討論進度和結果、不合適的設計決策等等。在事後彙整專案內容也更加全面、快速，有助於抓出下次需改善的項目。
這專案很可惜無法得知上線後的相關數據，進而檢驗設計決策的品質，了解優化是否有滿足用戶需求，但整個過程是非常珍貴的經驗。有些新增、調整的功能看似微小，但我認為透過逐步累積，微小改變也可以帶來巨大的影響。即便這只是第一版，尚有很多優化空間，但期望這次優化會給收支分頁正面的影響，幫助用戶更有效的進行收支管理，在財富自由的路上大步邁進 ─=≡Σ((( つ•̀ω•́)つ