Introduction
Overview
Problem Breakdown
Research & Ideation
Iterations
Solution
Conclusion

CFNA · Spending Insights · ✅ Shipped

Introduced Spending Insights for the CFNA Cardholders, with 42% feature adoption in month one

Designing and shipping CFNA's first category-level spending insights experience to help cardholders quickly understand where their money goes.

Introduced Spending Insights for the CFNA Cardholders, with 42% feature adoption in month one

Designing and shipping CFNA's first category-level spending insights experience to help cardholders quickly understand where their money goes.
8 Categories

Fixed MVP taxonomy

Shipped

Web + mobile

Feature Adoption

42% cardholders in first 30 days

💳 ABOUT CFNA

CFNA is a co-branded consumer credit provider primarily used at automotive service retailers.

CFNA is a co-branded consumer credit provider primarily used at automotive service retailers.

This project targeted cardholders in the 8701 cobranded Mastercard portfolio through CFNA.com and the myCFNA mobile app.

This project targeted cardholders in the 8701 cobranded Mastercard portfolio through CFNA.com and the myCFNA mobile app.

Overview

Overview

The previous experience was a transaction list. It answered what happened, but not where am I spending. I redesigned the flow into a new Transactions & Insights experience combining category visualization, exact-value comparison, time and cardholder filters, and clear data-freshness communication. This shipped as an MVP with fixed taxonomy and explicit edge-case handling.

The previous experience was a transaction list. It answered what happened, but not where am I spending. I redesigned the flow into a new Transactions & Insights experience combining category visualization, exact-value comparison, time and cardholder filters, and clear data-freshness communication. This shipped as an MVP with fixed taxonomy and explicit edge-case handling.
My Role

Owned design end-to-end: research synthesis, strategy, interaction/UI design, edge-case definition, prototyping direction, and handoff with metrics framework.

My Role

Owned design end-to-end: research synthesis, strategy, interaction/UI design, edge-case definition, prototyping direction, and handoff with metrics framework.

Team

Product Manager (scope and prioritization) , Engineering Lead (Technical envelope) , Research Partner (Interviews + survey synthesis) , Content/UX Writer (Disclaimer and tooltip language)

⛓️‍💥 Problem Breakdown

Getting product, business and user context

Getting product, business and user context

User need, product gap, and business risk aligned around one issue: lack of spend interpretation.

User need, product gap, and business risk aligned around one issue: lack of spend interpretation.
User Problem

Users could see purchases but not spending patterns. Research showed clear demand for category-level understanding.

Product Problem

Transactions History was buried and list-only, with no category rollups, no comparative framing, and weak interpretation support.

Business Problem
Business
Problem

Parity risk in a digital-banking context where insight behaviors are increasingly expected.

🔍 Research & Ideation

Research to Decision Mapping

Research to Decision Mapping

The scope was intentionally constrained to high-confidence MVP bets.

The scope was intentionally constrained to high-confidence MVP bets.
01. Interviews + Surveys

Top-valued capability: date filtering (4.23/5), then cardholder filtering (3.51/5).

01. Interviews + Surveys

Top-valued capability: date filtering (4.23/5), then cardholder filtering (3.51/5).

02. Competitive reads

Chart-heavy and list-heavy references revealed complementary strengths.

02. Competitive reads

Chart-heavy and list-heavy references revealed complementary strengths.

03. Filter-pattern audit

A separate audit of how peer apps handled time and cardholder filters, calendar pickers vs. presets.

🔁 Iterations

  1. Why two visualizations, not one

Chart-only
Bad at exact values

Loses exact dollar comparisons, especially for adjacent categories with similar percentages.

❌ REJECTED
Chart-only
Bad at exact values

Loses exact dollar comparisons, especially for adjacent categories with similar percentages.

❌ REJECTED
List-only
Bad at pattern

Loses the pattern-recognition speed that is the entire point of an “insight” feature.

❌ REJECTED
List-only
Bad at pattern

Loses the pattern-recognition speed that is the entire point of an “insight” feature.

❌ REJECTED
Paired
Each takes what it's best at

Each surface takes the load it’s best at, and they share a selection state so the user is never comparing two parallel truths.

✅ CHOSEN

  1. Additional visualisation cues to the list categories

  1. Additional visualisation cues to the list categories

BG sync with chart
Each takes what it's best at

Each surface takes the load it’s best at, and they share a selection state so the user is never comparing two parallel truths.

✅ CHOSEN
BG sync with chart
Each takes what it's best at

Each surface takes the load it’s best at, and they share a selection state so the user is never comparing two parallel truths.

✅ CHOSEN
Same BG for each category
Bad at exact values

Loses exact dollar comparisons, especially for adjacent categories with similar percentages.

❌ REJECTED
Same BG for each category
Bad at exact values

Loses exact dollar comparisons, especially for adjacent categories with similar percentages.

❌ REJECTED

🗝️ Solution

What Shipped 👀

What Shipped 👀

01. Built a new Transactions & Insights entry point

Replaced old transaction-history link behavior with a clear destination for spend interpretation.

02. Designed a dual-surface comprehension model

Paired donut chart + ranked list for glance-level + exact-value reasoning.

03. Filter first interaction

Time and cardholder filters are prominent. Cardholder hides when irrelevant.

04. Added trust cues into core layout

Data updated shown near totals; tooltips explain spend-total interpretation.

05. Edge-case resilience

Empty, single-category, multi-cardholder, and value edge states.

📄 Conclusion

🏁Conclusion

In summary, I made spending behavior easier to understand by

In summary, I made spending behavior easier to understand by

Redesigning the flow

Turning a buried nav action into a dedicated insight surface.

42%

Feature adoption in first 30 days

28%

30-day repeat visit rate

Improving interpretation

Combining distribution + exact values through one linked interaction model.

2.4

Avg. category interactions per session

61%

Sessions using at least one filter

Building trust into details

Making freshness and edge-case behavior explicit instead of implicit, with inline data timestamps, tooltips, and intentional empty states.

18%

Sessions drilled through to Transactions Summary

4.1/5

User confidence in data freshness and totals

Enter password to view case study