Afterpay Financial Dashboard
New home screen feature for Afterpay that gives users real-time visibility into their payment health before they ever shop.
UX/UI
Overview
Afterpay built its reputation on making purchases feel effortless. But for many users, that ease comes at a cost. Without clear visibility into outstanding balances, upcoming due dates, or how close they are to their limits, financial stress quietly builds in the background. This solo project explored what it would look like to put financial clarity front and center, designing a dashboard feature that lives at the top of the home screen and gives users an honest snapshot of where they stand. Taken from concept through to a full Figma prototype over a 2 to 3 week sprint, the goal was to make Afterpay feel less like a shopping tool and more like a financial one.
Context
Tools
Figma
FigJam
Problem Description
Afterpay's core promise is simplicity: split any purchase into four interest-free payments, no surprises. But the reality for many users looks different. 24% of BNPL users report overspending, 16% miss payments, and Gen Z users experience the highest rate of issues at 66%. Users consistently flagged the same pain points: unclear total balances across active orders, no easy way to see what is due and when, and no tools to set boundaries before overspending happens. The problem was not that users lacked financial awareness. It was that the app gave them no way to act on it.
Value Proposition
The Financial Dashboard brings payment status, spending limits, and financial health into one glanceable view at the top of the home screen. It does not interrupt the shopping experience. It just makes sure users always know what they are working with.
Design Solution
The dashboard sits at the top of the home screen and covers three core needs. A progress bar with color-coded urgency shows current payment status across active orders, with a quick pay now action for anything overdue or upcoming. Customizable spending controls let users set monthly or merchant-level limits and receive alerts before they hit them. A financial health indicator summarizes outstanding balances and surfaces a clear status: Safe, Approaching Limit, or At Risk. Together these features shift Afterpay from a checkout tool into something that helps users follow through on the pay smarter promise, not just at the point of purchase but throughout the entire payment cycle.
Reflections
The biggest design tension was balancing honesty with anxiety. Surfacing financial stress clearly is useful, but done poorly it makes an app feel punishing to open. A lot of the iteration went into making At Risk feel informative rather than alarming, and ensuring the dashboard reads as supportive rather than surveillant. If I continued this project, I would want to test how users respond to the health status framing in real use, and whether customizable limits actually change spending behavior or just add UI complexity.
View More Works!
