Feature Add Case Study:
Feature Add Case:
American Express
American Express
Feature Add Case:
American Express
Wouldn't it be nice to see personalized spending directly from your credit card?
Conceptual feature, not affiliated with American Express
Conceptual feature, not affiliated with American Express
Timeline:
Dec 2024 - Feb 2025
67 hours
Timeline:
Dec 2024 - Feb 2025, 67 hours
Role:
UI UX
Designer
Role:
Solo UI UX
Designer
Tools Used:
Figma
Loom
Maze
Tools Used:
Figma
Loom
Maze
Key Skills:
Mobile UX
Data visualization
Ideation, Content Strategy
Key Skills:
Mobile UX
Data visualization
Finding the Gap
Finding the Gap
This is a concept project I created as part of a design challenge. It is not affiliated with or endorsed by American Express.
This is a concept project I created as part of a design challenge. It is not affiliated with or endorsed by American Express.
Amex users, including myself, were frustrated by the lack of spending breakdown in the mobile experience, often resorting to third-party apps like Rocket Money to understand where the money went.
With competitors like Chase seeing a 23% increase in app stickiness after launching spending categories, this gap risked both user satisfaction and loyalty.
Amex users, including myself, were frustrated by the lack of spending breakdown in the mobile experience, often resorting to third-party apps like Rocket Money to understand where the money went.
With competitors like Chase seeing a 23% increase in app stickiness after launching spending categories, this gap risked both user satisfaction and loyalty.
My challenge: design an intuitive categorization feature that made expense tracking effortless and worth staying.
Design Goals & Strategy
Design Goals & Strategy
I focused on creating a simple categorization system.
Keeping familiar elements, like pop-ups and in-app ads, to ensure a smooth user experience and work within Amex's design system. As a bonus, a new interaction I created was the chart view switcher to spark the user's delight.
The goal was to enhance functionality while staying true to the Amex look and feel.
Research & Insights
Research & Insights
To validate the feature, I collaborated with the Research team before sketching any solutions.
Through 5 user interviews, including four small business owners, I uncovered that most users rely on mental math or third-party tools like Rocket Money to track spending and optimize rewards.
To validate the feature, I collaborated with the Research team before sketching any solutions.
Through 5 user interviews, including four small business owners, I uncovered that most users rely on mental math or third-party tools like Rocket Money to track spending and optimize rewards.
75% of Gen Z and Millennials want clearer, visual ways to manage finances, preferring interactive graphics over traditional pie charts (NerdWallet). 60% of interviewees said, “I treat my credit card like a debit card,” highlighting the need for simple, essential categories like Grocery or Eating Out.
75% of Gen Z and Millennials want clearer, visual ways to manage finances, preferring interactive graphics over traditional pie charts (NerdWallet). 60% of interviewees said, “I treat my credit card like a debit card,” highlighting the need for simple, essential categories like Grocery or Eating Out.
To deepen insights, I:
To deepen insights, I:
Mapped behaviors via affinity diagrams
Aligned user + business goals with Venn diagrams
Created personas and task flows to shape a seamless app journey
Mapped behaviors via affinity diagrams
Aligned user + business goals with Venn diagrams
Created personas and task flows to shape a seamless app journey
Competitive analysis revealed that Chase and Capital One are setting new expectations with intuitive, dynamic spending breakdowns. Chase’s spending feature alone led to a 23% boost in app stickiness—and their 2023 market share hit 16.92% vs. Amex at 12.01%.
Competitive analysis revealed that Chase and Capital One are setting new expectations with intuitive, dynamic spending breakdowns. Chase’s spending feature alone led to a 23% boost in app stickiness—and their 2023 market share hit 16.92% vs. Amex at 12.01%.
As AI begins shaping personalization in finance, Amex risks falling behind unless it prioritizes customization and visual clarity in its native experience.
As AI begins shaping personalization in finance, Amex risks falling behind unless it prioritizes customization and visual clarity in its native experience.
Exploration & Wireframes
Exploration & Wireframes
I began by hand sketching key task flows and low-fi wireframes. This feature had multiple exploration screens to confirm what users expected, i.e. button placement and what they expect for grouping expenses.
Weekly group discussions refined the designs and emphasized the importance of clear content strategy when labeling new elements.
A key insight was the confusion around the term "monthly goal," with many participants associating it with savings, leading to a suggestion to change it to "monthly amount" for better clarity.
I reviewed American Express's desktop design patterns, and found a "tags" feature for categorizing expenses but only on desktop.
Drawing inspiration from this, I added a similar button on the main page and allowed users to pay for the Grocery category total with a single tap that led into the existing payment flow. Currently you have to manually calculate and input the amount you want.
I began by hand sketching key task flows and low-fi wireframes. This feature had multiple exploration screens to confirm what users expected, i.e. button placement and what they expect for grouping expenses.
Weekly group discussions refined the designs and emphasized the importance of clear content strategy when labeling new elements.
A key insight was the confusion around the term "monthly goal," with many participants associating it with savings, leading to a suggestion to change it to "monthly amount" for better clarity.
I reviewed American Express's desktop design patterns, and found a "tags" feature for categorizing expenses but only on desktop.
Drawing inspiration from this, I added a similar button on the main page and allowed users to pay for the Grocery category total with a single tap that led into the existing payment flow. Currently you have to manually calculate and input the amount you want.
A/B Testing & Content Strategy
A/B Testing & Content Strategy
Early user feedback included 13 participants who helped clear up key areas such as navigation, priorities, and the main components.
Early user feedback included 13 participants who helped shape the design and cleared up key areas such as navigation, priorities, and the main components.
During group critiques, some suggested shortening the payment flow, but I decided to keep it unchanged, as it wasn’t central to this feature. My focus was on improving categorization and providing clearer spending insights, while utilizing existing branding for a neutral and encouraging UI that fosters self-awareness without judgment.
During group critiques, some suggested shortening the payment flow, but I decided to keep it unchanged, as it wasn’t central to this feature. My focus was on improving categorization and providing clearer spending insights, aiming for a neutral and encouraging UI that fosters self-awareness without judgment.
Prototype & Iterations
I tested with five new users. This revealed both opportunity and friction.
Several participants said they’d consider switching to Amex if the app offered built-in spending insights like this—signaling a growth opportunity.
Early testing revealed some confusion. The "Categorize?" button wasn’t noticeable enough, which caused two users to restart the flow. A specific expense task confused testers which added unnecessary friction.
In the second flow, users expected tappable elements like “Pay It” or the transaction card to be interactive.
I tested with five new users. This revealed both opportunity and friction.
Several participants said they’d consider switching to Amex if the app offered built-in spending insights like this—signaling a growth opportunity.
Early testing revealed some confusion. The "Categorize?" button wasn’t noticeable enough, which caused two users to restart the flow. A specific expense task confused testers which added unnecessary friction.
In the second flow, users expected tappable elements like “Pay It” or the transaction card to be interactive.
Once they discovered the Categorize flow, they completed the flow easily. 92% said the category naming process felt intuitive, and 84% rated the feature as easy to use.
Once they discovered the Categorize flow, they completed the flow easily. 92% said the category naming process felt intuitive, and 84% rated the feature as easy to use.
Based on this feedback, I made several key updates:
improved visual states for the “Categorize?” button, added a hover state, thickened outlines for uncategorized items,
introduced a new list view of uncategorized transactions.
I connected chart visuals and added a “Pay All” action.
These refinements help make the experience smoother, more discoverable, and aligned with how users naturally explore financial tools.
Based on this feedback, I made several key updates:
improved visual states for the “Categorize?” button, added a hover state, thickened outlines for uncategorized items,
introduced a new list view of uncategorized transactions.
I connected chart visuals and added a “Pay All” action.
These refinements help make the experience smoother, more discoverable, and aligned with how users naturally explore financial tools.
Final Designs
Final Designs
Meet the "Amex Smart View"— Categorize and visualize your spending, all in one place.
Meet the "Amex Smart View"— Categorize and visualize your spending, all in one place. Plus Your top category will make your data work harder for you with custom store recommendations.
Check out the prototype:
Meet the "Amex Smart View"— Categorize and visualize your spending, all in one place. Plus Your top category will make your data work harder for you with custom store recommendations.
New Buttons on Home
Add a New Category
Categorize an Expense
AI Recommendation for greater rewards
AI Recommendation for greater rewards
New Page
Preview
Key Takeaways & What I Learned
This project sharpened my understanding of how small language choices and UI cues shape how people think about money.
Content strategy drives user flow and iteration. Clear labeling made a noticeable difference in reducing confusion and improving success across testing and feedback.
Working within American Express's established design system provided valuable insight into the collaborative and structured process of product design. It reinforced the importance of designing within constraints.
The categorization flow brought in new interactions, but by anchoring them in familiar patterns—like popups and in-app ads—I avoided disrupting existing user behavior.
Lastly, testing with new to Amex users reminded me that clarity and discoverability beat cleverness. Clear labeling, visible actions, and reinforcing user intent led to higher ease-of-use scores and overall trust in the feature.
This project sharpened my understanding of how small language choices and UI cues shape how people think about money. Even a word like “goal” triggered confusion for some users. This showed how much content strategy drives user flow and iteration. Clear labeling made a noticeable difference in reducing confusion and improving success across testing and feedback.
Working within American Express's established design system provided valuable insight into the collaborative and structured process of product design. It reinforced the importance of designing within constraints.
The categorization flow brought in new interactions, but by anchoring them in familiar patterns—like popups and in-app ads—I avoided disrupting existing user behavior.
Lastly, testing with new to Amex users reminded me that clarity and discoverability beat cleverness. Clear labeling, visible actions, and reinforcing user intent led to higher ease-of-use scores and overall trust in the feature.
Explore Other Work
