Product / UX Designer
Content audit, information architecture, wireframes and responsive UI proposal.
Product design case study · Citi credit cards · 2019
Credit Card
Story Statement
Reframed a desktop-first PDF statement into a responsive, task-oriented experience—helping customers understand, share and print only what they need.
The work began as a content and information-architecture problem: one dense A4 document was serving every customer intent, even when the statement was opened on a phone.
13statement content groups audited
3purpose-led actions designed
2responsive surfaces: web + mobile
00 · Snapshot
A statement redesigned around customer intent.
The project moved beyond shrinking an A4 document. It reorganised the statement so essential information could be scanned first and supporting detail accessed only when needed.
Web + mobile
Citi credit-card statement experience across authenticated digital channels.
PDF-first ecosystem
Preserve regulated statement information while improving mobile access.
2019
A forward-looking concept for responsive statements and task-led actions.
I translated a dense financial document into a layered digital experience.
I owned the statement audit, content grouping, purpose mapping, responsive wireframes, share and print concepts, and the long-term responsive-PDF recommendation.
One statement, multiple customer intents.
No production metrics were available.
01 · Problem
A desktop document was being squeezed into a mobile viewport.
The current experience displayed an A4 statement at phone size. Customers had to zoom, pan and hunt through every section—even when their goal was simply to understand a balance, share the statement or print a payment slip.
Observed experience gaps
Not mobile friendly
The full A4 statement was scaled down rather than reorganised responsively.
High interaction effort
Reading required repeated zooming, panning and orientation changes.
One format for every intent
Viewing, sharing, printing and paying were treated as the same task.
Storage did not solve access
Saving the A4 PDF on a phone preserved the original usability problem.
02 · Anatomy
First, I decomposed the statement into 13 meaningful content groups.
Breaking the document apart revealed that the statement was not one information object. It was a stack of summaries, transactions, payment tools, programme details, contact information and regulatory content.
01
Identity
Client details and card context.
02
Summary
Balance, due amount and minimum payment.
03
Activity
Transactions and category detail.
04
Action
Payment slip, share and print.
05
Support
Rewards, contact and regulatory information.
03 · Mapping
Not every customer intent needs the full statement.
I mapped each content group to the reason a customer opened the statement. This separated essential information from content needed only for sharing, printing or payment.
Content group
View
Share
Print full
Print slip
Client details + bill summary
✓
✓
✓
—
Balance, due + minimum payment
✓
✓
✓
✓
Transactions + grand total
✓
✓
✓
—
Reward programme
✓
—
✓
—
Payment slip
—
—
✓
✓
Contact + regulatory information
—
—
✓
—
Design implication: lead with the information customers repeatedly scan, then make the full regulated statement and specialised outputs available on demand.
04 · Responsive
The statement became a hierarchy—not a shrunken page.
The responsive concept prioritised the card, balance, due date and primary action. Supporting details were stacked into readable groups that adapt to the available width.
Put the financial summary first.
Learned: the statement’s highest-value information was buried inside a document layout.
Changed: balance, due date and payment action became the first read.
Allow content to stack naturally.
Learned: scaling preserved visual order but destroyed legibility.
Changed: sections reflow across desktop and mobile instead of shrinking.
Keep complete records available.
Learned: customers need quick answers and a formal document.
Changed: essential content is immediate; the full statement remains accessible.
05 · Solution
Give customers the right output for the task.
Instead of forcing every action through one PDF, the proposed experience exposes three clear paths: share the statement, print the full statement, or print only the payment slip.
Purpose 01
Share statement
Use familiar device sharing to send the statement through installed apps and services.
Purpose 02
Print full statement
Preserve the complete document for formal records, reimbursement or offline review.
Purpose 03
Print payment slip
Let customers print only the payment slip when that is the sole reason for opening the statement.
06 · Scale
A responsive PDF was the longer-term platform recommendation.
The immediate proposal improved the in-app experience. The scalable direction was a conversion layer that could reflow existing statement PDFs for mobile viewing while retaining downloadable A4 output.
Separate the viewing experience from the printable document.
Use a responsive rendering service or custom API for in-app reading, while keeping the standard PDF available for download and print.
07 · Experience
The final concept turns the statement into a monthly financial story.
Customers begin with the month’s key message, move through spend and savings, inspect transactions when needed, and understand their rewards without leaving the statement context.
Final responsive experience · desktop + mobile
08 · Reflection
What this early work still reinforces.
Responsive design is not a formatting exercise. The experience improves when the product understands why someone opened a document and reveals the right depth of information for that intent.
Essential financial information becomes immediately visible; detail remains available without dominating the first view.
Share and print paths are separated so customers do not handle more content than the task requires.
The digital reading experience can evolve while the formal A4 document continues to serve compliance and record-keeping.
Audit before redesigning.
A dense interface often contains several products’ worth of information. Decomposition reveals the actual hierarchy.
Design for the reason, not the file.
The PDF was only a container. The real experience was understanding, sharing, paying and keeping records.
Protect truth while improving access.
Financial experiences need both progressive disclosure and a complete, reliable source document.