Capital One
Adding a Feature to Capital One’s mobile App: The Spending Analyzer
Capital One Overview
As one of the major credit card issuers, Capital One’s mobile app features some of the most essential functions of a Fintech app. Users have the ability to check their current balance, available credit, credit score, and are able to locate the nearest ATMs/Branches. Some unique features include Capital One Shopping and Capital One Offers.
Problem & Feature Proposal
How can we enhance the user’s experience? Some banks provide a monthly expense breakdown on the account holder's mobile app. Why not provide that function to credit card holders at Capital One? With a Spending Analysis tool, users could keep track of how much they spend on different expenses. Shopping benefits such as cashback or discounts could also be advertised according to the user’s expenses.
Methodology
I incorporated a mix of human-centric qualitative research methods and an iterative design process to create a feature that promotes a holistic view of a user's spending.
Role
UX/UI Designer
Tools
Figma, FigJam, Google Docs, Google Sheets
How does Capital One Compare to Other Bank Apps?
Chase, Citi, and Discover are major credit card issuers with mobile banking apps. The research done in this comparative analysis looks at the strengths and weaknesses of each mobile app and highlights the features and their advantages. With this comparative analysis, I gained insight into the importance of various features, gauged by the frequency of their appearance in these apps.
All of these mobile apps feature a tool that breaks down the user’s spending habits. Chase distinguishes itself by showing users the number of reward points they earn weekly. After more research, customers have commented that Citi’s spending summary occasionally misclassifies transactions, suggesting a need for more categories to help users see where their money is going each month. Otherwise, these mobile apps consist of features that provide the main functionalities of a financial app.
How do Capital One App Users Feel?
User Interviews were conducted to help identify the most important user interactions and pain points. I conducted five interviews with participants ranging from ages 25-34, who frequently uses mobile bank apps, and have used the Capital One mobile app. From the user interviews, I created an Affinity Map to sort the users' feedback on the financial apps they’ve used.
Research Objectives:
Determine the main reasons why users use the Capital One app.
Determine how users manage their spending.
Determine whether users use any rewards or coupons when shopping.
Understand how I can enhance the user’s experience on the Capital One app.
Determine what other banking mobile apps they use and understand how the users interact with those apps.
Affinity Map
To gain a better understanding of the interviewees’ needs, I identify common themes in their responses. Each participants' answers were sorted into 5 categories: Purpose of Mobile Bank Apps, Pain Points with Mobile Bank Apps, Advantages of Mobile Bank Apps, Feelings towards Coupons and Rewards, and Behavior with Finances. From the Affinity Map, I created a user persona that reflected the key insights pulled from the user interviews.
Lauren Allen
User Persona
How might we help Capital One app users like Lauren keep track of their spending, so they have a better understanding of their expenses?
Feature Set
I created a Feature Set to help prioritize interactions that would help users with their financial goals and pain points.
Site Map
A Site Map was created to help visualize the current layout of the Capital One app, with the addition of my proposed feature. I included the higher prioritized interactions from my Feature Set in the Spending Analyzer.
Task Flow
It is important for transactions to be categorized correctly when we are providing a spending summary. Users want a breakdown of their spendings, but there are times when the system fails to recognize the type of purchase. Thus, I decided to focus on the ability to edit the category, so users can easily change the transaction type.
The Development
I designed low-fidelity wireframes to explore how my feature would appear in the existing app. This process was followed by high-fidelity wireframes to refine visual aesthetics and interaction details. These wireframes served as blueprints for the final product design, allowing for rapid iteration and feedback. I had to ensure consistency with Capital One's existing branding throughout the design process. For instance, the types of buttons, colors, and fonts had to align with the original app's visual.
Lo-fi Wireframes
Hi-Fi Wireframes
Usability Testing
I conducted usability testing sessions with participants who have used a financial mobile app, to evaluate the effectiveness and efficiency of the prototype. Observations and feedback gathered during these sessions were analyzed to identify usability issues and to refine the design.
Task Flow to Evaluate
View the “Shopping” transactions in the Spending Analyzer and change the Amazon transaction category from “Shopping” to “Entertainment”.
Success Metrics
The effectiveness and efficiency of the Spending Analyzer were measured using various metrics. First, the task flow aimed for a 90% completion rate, indicating strong usability. To highlight efficiency and ease of navigation, I measured the average completion time of each task. Additionally, the number of errors encountered was tracked, to help determine the ease of use. Subsequently, users were prompted to rate ease of use on a scale of 1 to 5 and provide feedback explaining their ratings. Finally, users were asked whether they would use the feature again or recommend it to a friend, offering insights into its overall appeal and usability.
What Worked Well
The overall process of my added feature was simple to use. All the testers were able to complete the task and expressed that the feature was easy to use. All the testers rated the ease of use 4.5 or 5, with 1 being very difficult and 5 being very easy. They all stated they would use this feature or recommend it to Capital One app users.
Iterations
According to the feedback, there were smaller things that needed change for a better experience:
Changes to the category colors to provide more distinction.
Increase the font for the “Edit Transaction” button on the Transaction screen.
Changes were made to the category colors to distinguish them, which worked well especially for the pie chart. The font size for “Edit Transaction” was increased but was kept smaller than “Report a Problem”, maintaining the priority level, considering “Report a Problem” is more frequently used.
The Final Hi-fi Wireframe & Prototype
Following multiple iterations based on user feedback and design refinements, the high-fidelity prototype was finalized. Click on the image below to view the final Prototype.
Conclusion
As the UX designer, I am responsible for creating simple and useful designs for the user, however, I also have to keep in mind business goals, and how my design aligns with it. While working on this project, I thought about how the Spending Analyzer could possibly benefit Capital One too. I believe users are more inclined to use the app if they can visualize how they are spending their money, which in turn brings in more app users. The next step in this project would be to curate a coupons and shopping experience curated to the user’s spending habit.
Adding a feature to the Capital One app posed some challenges. The main constraint I faced was keeping the high-fidelity wireframes as consistent with the existing brand as much as possible. There were many iterations made on the small details such as buttons, icons and headlines.