A refreshed credit card statement experience that helps users understand their expenses.
The Bill Summary is where users land to check their spending, debt, and payment dates. For many, it's their main way to understand their financial life. But as their expenses grew more complex, the experience fell short.
In early user observation of the Bill Summary interaction, we noticed a pattern of frustration. They'd open their monthly statement, see a total, nod, and then... stop.
To understand where that number actually came from and what they were being charged for, they had to remember what they'd already paid, cross-reference due dates, and mentally do the math themselves.
We realized we weren't just solving a comprehension problem; we were solving a behavior problem.
Users viewed their bill as a stack of numbers they had to mentally piece together. Our hypothesis: if we made spending feel like one connected journey across time, people could actually truly understand their bill instead of recalculating it.
We needed to lean on temporal visibility to help users recognize what's happening now, compare it to before, and anticipate what's coming next.
Built for a simpler journey, the original statement only handed users a total inside a full-bleed colored header and a list of transactions. The experience leaned heavily on color as a shortcut for simplicity, but as spending grew more complex, the interface gave low context and the color signals turned out to be the only insight but carried the wrong messages... so the cracks started to show.
The rigid architecture of the old statement presented a distinct set of UX hurdles:
Misaligned Cultural Semantics. Each bill state was dominated by a full-bleed colored hero banner at the top. In Mexico, a massive red block signals an error or a critical warning, making the interface feel overly aggressive and punitive. Green implied money in your favor rather than a settled balance, while blue carried no semantic meaning at all.
Opaque Financial Logic. The interface led with a flat total but hid the calculation behind it. Forcing users to mentally subtract payments and cross-reference dates turned a simple review into a high cognitive load task. This lack of transparency quickly bred anxiety, occasionally triggering the perception of being overcharged.
Inaccessible Vocabulary. Technical terms like "Fecha de Corte" and "Gastos del periodo" required a steep learning curve. First-time users couldn't decipher them intuitively, disrupting their relationship with the product from day one. When static help icons failed to bridge this gap, the friction inevitably cascaded into support calls.
Temporal Isolation. Each billing cycle existed independently in an individual screen, detached from past or future context. While users experience their spending as a continuous flow of interconnected events, the UI forced them to rely entirely on memory to track their financial trajectory.
Transform the Bill Summary into one integrated, evolving flow that customers can read, trust, and navigate through.
Lead with concise, plain language statements that immediately define the user's financial status, using color as a supportive visual cue rather than the primary carrier of meaning.
Prioritize and expose the most critical financial figures upfront, eliminating the friction of mental calculations and ensuring instant comprehension of the balance.
Bridge past, present, and future billing cycles into a singular, cohesive interaction model, treating time as an interconnected flow rather than isolated screens.
Ensure every transaction, deadline, and financial term is contextualized and explainable on the spot, providing instant clarity that eliminates friction, lowers skepticism, and builds long-term user trust.
Designing a single affordance that scaled across a closed bill, an active cycle, and future charges without fragmenting the UI was our biggest challenge. We iterated through several concepts that failed to resonate during user research interviews.
Why it failed: Confusing terminology. The card's name suggested it held all of the month's spending, but it only showed purchases still in process. Users saw two different "totals," and got confused.
Why it failed: Poor discoverability. The entry point had no clear label or visual cue, so most users never tried to tap it. Once they did, the filter made sense. They just never got there.
We landed on a single, continuous flow that transforms fragmented billing cycles into a connected experience. Subtle color shifts communicate the user's current financial state, defaulting to the current bill to anchor the experience.
Linked perspectives. Selecting the chart instantly updates the transaction list, while navigating dates adjusts the chart, keeping both perspectives in sync as you move through time.
Side-by-Side Clarity. Total spending and advance payments are pulled out of nested cards and placed side-by-side with plain labels, removing the need for manual or mental math.
Tabs at First Impact. Expense filters like "Todos" and "Por tarjeta" sit upfront as explicit tabs next to the core view. A brief onboarding moment introduces this control the first time it appears instead of leaving it to be found.
Semantic clarity. The interface leads with direct, plain-language status lines ("Ya llegó tu fecha de corte," "Ya pagaste tu estado de cuenta"), leaving text to drive the message while color drops into a supportive accent.
These affordances are able to scale and accompany users through more complex financial moments, making it easier to understand and manage their situation.
"I always feared my statement at the end of the month. It was a nightmare to understand. Now I can see how it behaves and feels easier to create a plan."
The redesign solved most of our core testing points, but one thing never felt fully resolved: people still couldn't tell why they were charged a specific interest amount based on their own expenses.
The new proposal still couldn't explain a little bit further that why, the way a customer service person could while reviewing the statement along them.
So I explored a concept: adding an AI feature that helped clear the air about a specific charge, based directly on the user's behavior.
The interesting part is not the AI character itself. It's defining its behavior.
A translator, never a generator. Where a confident wrong answer about someone's money would break trust instantly, this feature only puts the bank's breakdown (charges, interest, payments) into a more conversational tone.
It hands off when it can't explain. When the AI can't confidently explain a charge, it steps back by stating, "No puedo explicar este cargo con seguridad" (I can't confidently explain this charge) and instantly directs the user to customer service.
Strict scope limiting. Restricting the AI to a single explanatory function ensures the feature doesn't break out of its primary user flow or create unintended interaction paths.
Thinking about the future maturity of this idea, it would be necessary to evaluate the investment and see if it would actually impact metrics and truly elevate the experience before scaling it.
Simple is hard. Our first iterations failed because we tried to solve a lack of features by turning everything into its own feature. Both concepts looked smart on paper. But testing them against real human confusion, not our own logic, made the right answer obvious and saved us from shipping cleverness over clarity. True simplicity isn't about being explicit about every single thing; it's about making the interface absorb the mental load so the user can just breathe and understand.
Copy can do what layout can't. A massive red banner might seem like the most straightforward choice, but in a Mexican financial context, it triggers an immediate warning. It feels punitive, intrusive, and stressful. This project taught us to never rely on color as a shortcut for communication. Plain language must lead the message, while color drops back into a purely supportive role.
Financial UI is about managing anxiety. People don't open a statement just to look at numbers; they want to know if they're going to be okay. When financial logic is opaque, users assume the worst. Viewing different bill states as a single, unified wave rather than isolated elements was the analogy that helped us respect the user's emotional reality.
Good design is a measurable cost-saver. A beautiful prototype means nothing if it doesn't move the needle. Seeing an 18% drop in support calls proved that intuitive UX directly impacts the business bottom line. We didn't just fix a screen; we optimized an operation.
This project started in Brazil, where a researcher surfaced the pain point and pulled in the Colombia and Mexico teams to solve it for their own markets. I ended up the only designer on the Mexico solution. My peer designer's maternity leave started early, and the team agreed I could carry the full approach myself, with the Brazil and Colombia designers backing me up if I needed them. In a controlled setting, it was my first real moment of ownership, and my first time running interviews with real users, watching their reactions in real time. What made it hard was also what made it matter: all three countries were solving the same pain, but what a "better experience" meant changed at every border, and my job was figuring out what it looked like for Mexico.