Statements & Activity Redesign
UX Design
Visual Design
Strategy
Product Manager
Scrum Team
Business Partners
Compliance
Analytics Data
Impact
+14.8M Active Users
+2.4M Downloads
+4.7 times Login
Feature Hightlights
What's New
More Date Range Options
New Last 30 Days, Last 60 Days, Last 90 Days preset date ranges help you review your transactions. Research points to Customers thinking of transactions outside of cut off statement dates and more along the lines of "what have I spent in the last month?"
View Your Balance Summary
You get expanded details about your balance for each date period when you expand "View Summary". This consolidates the previous two different areas of balance details (vitals area on top and summary section on the bottom).
Download Your Documents
Easier way to find and download your statements, year-end summaries, and other files. This addresses the pain point of customers not being able to easily navigate to the billing statements page.
Before Redesign
Customer Experience Problems
01. Poor findability for critical transactions functions
Cardmembers struggle to find critical info pertaining to transactions. For example, search & billing period selection are disconnected from the list of transactions.
02. Overly prominent Balances and Your Spending Report causes visual hierarchy and user intent misalignment
The Balances and View Spending Report sections hold too much visual prominence in the Statements & Activity tab, making it harder for users to quickly locate and focus on their Transactions, which is likely their primary intent.
03. Low discoverability for statements
Customers express difficulties in discovering statements, including: viewing, printing, and exporting functions. Currently, Ineffective placement and lack of visual cues to the All Pdf Billing Statements page and actions buttons (download, print) reduces visibility.
Workshop Outsome
Focus on the Core Missions
Our concepts were centered around the core missions that we identified during a workshop with designers, product partners, and engineering collaborators.
01. Browse and navigate transactions & statements
02. Search for a specific transaction or statement
03. View details of transactions
Mid fidelity Prototypes
3 Design Directions were Brought to Stakeholders
User Testing
Validation of Key User Goals
We refined the ideas and selected two concepts for testing. Both concepts were evaluated with 5 participants, focusing on the key tasks. These tasks stemmed from the core missions, primarily centered on browsing and searching through transactions and statements, as well as reviewing transaction details.
Design A - Side Panel
Design C - Full width
1. During user testing, Participants neither noticed nor missed the absence of balance information. They valued the emphasis on transactions, specifically noting that their primary goal was to review their transactions.
2. Users tended to scroll and search to find specific transactions they were looking for. It was important to optimize scroll on the next design iteration.
3. On Design concept A, Users felt the balance information in the side navigation was particularly cluttered and confusing, especially due to how it was divided between recent transactions and the current statement.
Overall, Users performed well and scored higher on the completion rate for design concept C. Concept C was our clear winner, and we decided to develop the concept further according to user feedback.
User Testing II
Feedback Loop
After our first user testing session, We responded promptly with iterative design and prioritization for our MVP release. Before we delivered our features, We wanted to revaluate our task completions because there has been significant design changes along the way.
User Testing Round II repeated the same tasks given for the first user testing. The tasks were also based off of the core missions involving browsing transactions, searching transaction, downloading statement, and viewing details of transaction. All 5 users were able to complete the tasks (User completion 5/5) for all 4 tasks.
Visual Design
Design System Uplift Challenges
One of the key challenges during the project was aligning our redesign with the new DLS 7 design system, which was still evolving in parallel. While the uplift aimed to modernize visuals and improve consistency across the platform, it introduced limitations in components and subtle structural shifts.
The updated visual rhythm also changed how users scanned and processed information. For example, increased padding and larger type sizes improved readability but weakened percieved relativitiye of contents. This spacing unintentionally created a disconnect between the search input and filters from the data table they controlled, reducing their perceived association and making the experience feel more fragmented.
Before: System Default
After: Strengthening Proximity
We reduced the spacing between the search, filters, and transaction table to improve visual grouping and reinforce their relationship. This tighter layout made the interface feel more connected and intuitive, helping users understand that these controls directly impact the data below — all while staying aligned with the design system’s intent.
MVP Release
MVP Release & Iteration: Learning from Real Use
The first phase of MVP release allowed us to validate design assumptions early and identify areas needing refinement through internal feedback and real-world usage.
01. Low clickability of the date period
Users didn’t perceive the date range selector as interactive, prompting us to rework its affordance and placement for clarity.
02. Balance summary placement
The balance at breakpoint was getting visually lost between account vitals, filters, and the transaction rows. It lacked hierarchy and clear context, which led us to adjust its placement and reinforce visual anchors.
03. Missing checkbox feature
Users expected the ability to select individual transactions to download or print. The absence of this familiar utility highlighted a gap in functionality, informing future iterations.
Visual Design
Iterative Refinement Roadmap
Step 1: Improve Time Controller
Improved the time controller’s clickability by separating it from the top card art and refining the date picker copy to clearly distinguish between recent activity periods and older statement periods, guiding users back to PDF statements for dates no longer available in the interface.
Step 2: Uplift Statement Balance + Consolidated Filter
Removed the statement breakpoint to reduce visual clutter and streamline the experience. Account balances were brought to the top of the page to meet user expectations and create a clearer starting point. We also consolidated filters into a single, scalable section to improve clarity and support future enhancements, ensuring the layout remains clean and adaptable as more features are introduced.
Step 2: Add Multi-Select Checkboxes for Print and Download
Reintroduced multi-select checkboxes to enable users to individually select transactions or perform batch actions like printing and downloading. This familiar pattern improves efficiency and brings back a key piece of functionality that many users relied on in the legacy experience.
Designing Reusable Components
Going Beyond one product
Our team worked with the design systems team to define specs and create components that could be reusued across different platforms and journeys.
Design to Production
MVP Release
Our team recorded 30+ features to improve on confluence. The page included detailed specs for engineering to refer to. The QA process took multiple rounds of communication and in-person sessions until the final first release to 25% of US CardMembers - 1.4M customers.
Outcome
15%+
Customer Visual Design Satisfaction
25%+
Statement Download Intent
19%+
Increased in View Transaction Details
