Quick clarity
People return to card pages to verify their status, not to browse decorative content.
SAVVII / 2022—2023
Card clarity, when it matters.
Redesigning card management for a cleaner, faster, and more controlled digital banking experience.
00 / Overview
Make the card’s state readable before asking the user to act.
The “My Card” surface should work as a quick financial checkpoint—not a page to explore.
I redesigned the experience to foreground balance, amount due, available credit, and payment actions while progressively layering settings and security-sensitive controls. The goal was simple: reduce noise, support faster verification, and make high-intent moments feel controlled.
Above the fold
Balance, due amount, and available credit need to appear before the first scroll.
Signal over surface
Decorative components become friction when they dominate the most valuable space.
01 / Problem
The card looked important. The information felt secondary.
An oversized decorative card consumed most of the first viewport, pushing the financial state below the fold.
Users had to scroll and scan before they could answer the simplest question: “Where does my card stand?”
Balance, due amount, available credit, and card actions were fragmented across modules with similar visual weight. The screen had the right pieces, but no clear decision order.
Design question
How might the card page answer the user’s financial question before asking them to navigate or interpret the interface?
Problem diagnosis / 04
Four symptoms of the same broken hierarchy.
01 / 04
-
Problem #1
Misaligned hierarchy
- Example
- The oversized card component in the old design consumed almost the entire first fold, hiding the balance and due date until the user scrolled.
- Impact
- Users lose immediate clarity, increase their cognitive load, and are more likely to miss critical information such as upcoming payments.
-
Problem #2
Oversized decorative elements
- Example
- The decorative card graphic appears significantly larger than the financial data, overshadowing the content users need to act on.
- Impact
- Users spend more time navigating the layout instead of assessing their card status, making the experience feel inefficient and visually heavy.
-
Problem #3
Scattered financial indicators
- Example
- Balance and available credit were separated into isolated blocks, each requiring separate visual attention rather than forming a cohesive overview.
- Impact
- Users take longer to understand card health, which can delay decisions like payments or spending checks.
-
Problem #4
Hidden or ambiguous actions
- Example
- Icons for View Card, Members, and Settings sat in a row without labeling or prioritization, leaving users to guess which action performed what.
- Impact
- Ambiguous controls introduce friction and can lead users to feel uncertain, especially in urgent moments like needing to lock a compromised card.
02 / Decisions
Reframe the surface around decisions, not decoration.
I changed the reading order from “see the card, then find the data” to “understand the state, then choose the next action.” Balance, amount due, available credit, and payment now form one clear financial block.
Business goals
Reduce avoidable friction.
- Surface essential metrics immediately.
- Reduce scroll-dependent core tasks.
- Make secondary actions predictable.
- Reinforce confidence in the product.
User goals
Read, decide, move.
- Understand card health at first glance.
- Reach payment without interpretation.
- Access secondary controls without constant noise.
- Move through the page in one clear pass.
Process / 04 decisions
The hierarchy changed one decision at a time.
01 / 04
-
Process #1
Reframing the surface
The original experience treated the card as the centrepiece of the page.
I reframed the surface around decision-making instead; prioritizing the information users check most frequently, such as balance, due amount, and available credit.
The redesign shifts the interface from decorative presentation toward functional clarity.
BeforeVisual priority assigned to decoration 
AfterPriority shifted to actionable data -
Process #2
Establishing hierarchy
The previous layout treated financial details and actions with almost equal weight. As a result, the Pay button was easy to overlook, despite being one of the most important user tasks.
I redesigned the structure so users can first understand their card status, then immediately act on it. Balance, due amount, and available credit are grouped into one readable section, while the Pay button is positioned as a clear primary action beneath the financial summary.
BeforePayment action was visually buried next to financial details 
AfterFinancial information grouped before a clear primary action -
Process #3
Layering secondary actions
Secondary actions like Lock Card, Members, Settings, and Card Number were still important, but they did not need to compete with the main card information at all times.
Instead of exposing every action upfront, I moved these controls into a layered interaction. Users can reveal them when needed, while the default state stays focused on the card, balance, and payment tasks.
This reduces visual noise without hiding functionality.
BeforeSecondary actions competed with the payment flow 
AfterControls stay accessible behind a simple gesture -
Process #4
Structuring transaction activity
Previously, transactions were displayed as a flat chronological list. Pending and posted activity shared the same visual treatment, requiring users to read line by line to understand transaction status.
The redesign separates Pending and Posted activity. Pending transactions are surfaced first, while posted transactions form a structured section below—creating a clearer hierarchy and making the transaction view easier to review at a glance.
BeforePending and posted activity required more scanning 
AfterActivity grouped by status for faster review
03 / Final design
Essential information first. Sensitive actions when needed.
The final experience shifts the focus from decorative presentation to financial readability. A single status block connects current balance, balance due, available credit, and payment.
Secondary and security-sensitive actions are progressively layered, reducing noise without sacrificing access or control.
Final product / In motion
A calmer path from checking to acting.
The prototype shows the redesigned reading order, clearer transaction hierarchy, and a more intentional approach to secondary card controls.
04 / Outcome
A financial surface that reads in one pass.
The redesign gives each element a clearer job: financial information explains the state, primary actions support the next decision, and secondary controls remain available without competing for attention.
01
Faster understanding
Balance, due amount, available credit, and payment actions are visible together instead of across fragmented modules.
02
Reduced visual noise
Decorative elements and secondary actions no longer compete with the information users came to verify.
03
Intentional control
Security-sensitive actions are layered progressively, preserving access while reducing uncertainty.
04
Readable activity
Pending and posted transactions form clearer groups that are easier to scan and review.
What this project reinforced
Hierarchy is part of trust.
Confidence follows priority.
Correct information can still feel uncertain when its hierarchy does not match the user’s question.
Not every action deserves equal visibility.
Progressive layering can reduce noise without reducing functionality.
Banking is for deciding, not browsing.
People arrive to verify, act, and leave; the interface should support that rhythm.
Next project
04 / 08UX research · 2022
UTRADEA
View in selected work