Statements & Activity Redesign
UX Design
Visual Design
Strategy
Product Manager
Scrum Team
Business Partners
Compliance
Redesign the American Express Statements & Activity experience to empower customers to utilize, access, and manage their financial activity through improved discoverability and accessibility
Redesign
Outcome
Feature Hightlights
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?"
Feature Hightlights
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).
Feature Hightlights
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.
Analytics Data
Statistics Highlights
14.8M
Active users/ mo
(36% of all Website visits)
4.7
Average logins/ mo
(3.3 average login on web)
2.4M
Statement downloads/ mo
Disputes Start: 220K
(73% of Web)
Statement downloads
PDF billing statement page
Transaction search page
Call back rate: 2%
Pafe load time: 7.7 secs
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
Secondary priorities included, balance summary per billing period, make a payment, dispute transactions & payments, download & print, view spending report, Plan It, view activity summary by card, etc...
Mid fidelity Prototypes
3 Design Directions were Brought to Stakeholders
Design A - Side Panels
Navigational components are anchored to a side panel that stays in place as user scrolls through transactions.
Design B - Merged IA
Activity feed (transactions) is accessed from the home dashboard as modal or drawer.
Design C - Full Width
The activity feed spans the full width of the page and directs users to transactions and statements through two tabs located at the top of the screen.
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.
System Default
Strengthening Proximity for Clarity
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 & Iteration: Learning from Real Use
The firs 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.
Design to Production
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 1% - 5%, and 25% ramp-ups.
Outcome
1.4M
Released to US Card Members
20%+
Statement Download Intent
18%+
Increased in View Transaction Details
