As one of the largest commercial banks in the United States, Capital One wants to use their reach to improve the financial health of its customers. While their current mobile app is very well rated, it is also very basic in functionality. The features offered focus primarily on spending and making payments. As such, Capital One would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances. To compete with the evolving financial industry, I designed a non-invasive new feature for Capital One called "MoneyWise" that enables users to easily budget, track, save, and manage finances all within one convenient app.
01. Project Details
Challenge | Design a new personal finance management feature that embeds smoothly within the current Capital One app
Client | Capital One (fictitious project)
Duration | 3 weeks
Role | Lead UI UX Designer: Design Researcher, IxDesigner, Visual Designer
02. Design Goals
Investigate a new feature within the Capital One's app interface
Seamlessly integrate feature within existing app
Identify, test, and validate a solution among the target user segment
03. Tools Used
Research | Industry Research, App Audit, Competitive Analysis, Provisional Personas, Contextual Inquiries, User Interviews
Synthesis | Empathy Map, Trello, Personas
Product Strategy + Ideation | Whiteboard, POV + HMWs, App Map, LucidChart
Interaction Design + Testing | Pen + Paper, User Flow, Illustrator, Photoshop, MarvelApp, Apowersoft Recorder
Delivery | Zeplin
Research & Synthesis
01. Industry Research
In order to position Capital One as a leading provider of financial management services, I conducted online market research focused on the rapidly evolving fin-tech industry. In essence, there are 3 major market research insights critical to the scope of this project:
Insight #1: Millennial habits are driving financial innovation
- Big banks are likely to be facing increasing pressure not just from upstart companies, but large, well-recognized brands (Amazon, Apple and Google) — to offer a comprehensive suite of financial services.
- 73% of millennials would be more interested in new financial services from Google, Apple, Amazon, PayPal, or Square than from their own nationwide bank.
Insight #2: Huge changes in the financial landscape
- Many banks are building automated savings, budgeting and management capabilities into their existing mobile experiences.
- Chase recently launched Finn, a mobile banking app with personal finance features folded in, and Wells Fargo will soon launch Greenhouse, a similar concept.
- 3rd party options like Mint are needing to re-think about their strategies to compete.
Insight #3: There's lots of competition
- Research uncovers around 14 top players within the finance management space.
- The major key functionalities and services offered by these companies in personal finance and money management market are: 1. Income and spending analysis, including cash flow, 2. Budget and goal setting, 3. Financial account aggregation, 4. Invest Tech portfolio, 4. Financial advice
From our aforementioned insights, it is clear that Capital One needs to focus on improving its app experience for millennials. Effectively the first generation to grow up with nearly unlimited access to information, and a group that now comprises roughly 25 percent of the U.S. population, it would be wise to deliver sophisticated customer experiences for millennials, while of course, remaining attentive to the unique needs of current audiences. While aforementioned insights clarified some of the initial questions running through my mind, from it also birthed a second round of inquisitiveness and uncertainty.
2. What functionalities and services should Capital One offer?
We know that the money management market is offering a variety of functionalities and services, but there is simply not enough information to determine which of these features should be integrated and which of these features Capital One's users would like to have.
In order to answer these questions, we would need to first conduct a competitive analysis and prepare for user interviews.
1. Would a standalone app be a better option?
When asked why Wells Fargo decided to create a new mobile banking app rather than fold the features within their existing mobile banking app, to Wells Fargo, it’s a segmentation strategy. Steve Ellis, head of innovation at Wells Fargo, said the company decided to build a standalone app so that it could focus solely on the needs of the targeted customers. If it built the functionality within the existing Wells Fargo app, the target audience would be burdened with features that were not applicable to them. Would this also be the case with Capital One?
02. Competitive Analysis
While a plethora of useful, accurate, and engaging content is available online, the web is also filled with inaccurate, misleading, and outdated information. I took the "top players" from my desk research and cross-referenced the list with a Google search for "top personal finance apps of 2018" to eliminate date options.
From the cross-examine emerged 5 finalists to conduct a competitive analysis on 3 direct mobile first banking options with finance management features integrated within, and 2 indirect independent fin-tech apps. I weighed the strengths and weakness of the features within each and also briefly highlighted who would be most interested in using each app (later paved the way for proto-persona development.)
03. App Audits
A competitive analysis was a great starting point for understanding the feature components of each competitor, but as a visual person, it simply was not enough for me to understand the full scope of how each feature is integrated, what opportunities there are for improvement, and considerations of “best design practices” so, I did an app audit of all competitors. I noted design patterns, important feature components, and flow of screens.
All this would be naught if I did not also audit Capital One’s mobile app. Doing so gave me a rough idea of what features, elements, and design patterns are currently integrated within and where integration of personal finance management features may be plausible. From our audit, we quickly discovered 4 possible areas that may be subtle for enough for existing users but also discernible enough for our new millennial audience.
04. Provisional Persona
With a firm understanding of the landscape and the competition, I created a provisional persona using the research I currently possessed. Luke, a rough preliminary profile of “what I knew thus far about my users” ultimately informed the interview recruitment process.
05. User Interviews / Contextual Inquiries
Prior to interviews, I laid out all my objectives, goals, and assumptions on the table, and structured my interview questions around them. I then visited 2 neighborhood banks / financial advisory centers: Capital One Cafe and Next Door State Farm. There I sought out a total of 7 users that aligned to my proto-persona: 3 were male, 4 were female, all were millennials (anyone between ages 22–37 in 2018).
- Understand how millennials currently manage their finances, what resources they use, and why they prefer that method.
- Gain insight into context and determine pain points, motivations, and frustrations of the finance management experience
- Discover if there is interest in a personal finance management feature via Capital One’s mobile app.
- Users predominantly use mobile to manage their finances.
- Users want a mobile banking experiences with personal finance features folded in
- Majority of millennials will not feel knowledgeable or confident about personal finance
06. Empathy Mapping
After 7 user interviews, dozens of articles, and competitive auditing, I began synthesizing my findings, capturing quotes, observations, facts, and musings. Recognizing similarities in the context and use cases, I rearranged my data into an empathy map via Trello, creating different groupings to reveal trends in feelings, habits and behaviors. From this exercise, I extracted 4 points of tension, or insights, to help inform my persona’s motivations, needs, and idiosyncrasies related to their usage of personal finance management tools.
Armed with needs, I crafted my composite user, Roger, focusing heavily on the goals, frustrations, and motivations discovery during empathy research.
02. Pain points:
Millennials are hesitant in using financial management apps because of:
1. Concern about 3rd party information security
2. Inaccurate syncing of data / frustrating account setup
3. Time consuming processes
04. Desk Research Confirmations:
- Interview findings confirm preference to manage finances via mobile app over both online site and in-person.
- 1 user wanted investment features within a banking app, however, 4 deemed it unnecessary. In the case of this project, we will abide with the majority.
- Users are indeed skeptical about the agenda of large banking institutions.
01. Refinement of our target audience:
Based on findings, we can narrow the age range of our target audience from “millennials” to individuals in their 20s. Interest in financial aggregation platforms peak during college (because of being newly independent / loan payments) and tapers off early to mid 30s, oftentimes when individuals have complex family finances with non-fixed cash flow.
03. Strong desire for personal finance management tools within banking apps:
3 of 3 pain points could be resolved by integrating finance management features within a user’s primary banking app that already fulfills most of their financial needs.
Defining And Ideation
01. POV Statements / HMW Questions
Following research, I revisited my insights. From there, I attempted to narrow the focus and pinpoint user problems: 4 POV statements were developed that directly corresponded to Roger’s use case. We than re-framed our POVs into “How Might We Questions,” which ultimately opens up to ideation sessions.
To guide my brainstorming and feature prioritization, I mapped my HMW's on a digital whiteboard and tossed around ideas ranging in scope, size, and feasibility.
01. Business And User Goals
Wanting the feature outcome to be both customer and market driven, I defined the high level business objectives and key customer attributes necessary to achieve success. Along with Roger’s needs, it is also imperative that I consider the goals of Capital One. In lieu of speaking directly with the Capital One team, I relied on their brand mission and positioning to offer perspective into the company's values. While Capital One’s goals does center around monetizing of the app, there are still overlaps between user and business.
02. Feature Roadmap
To refine my brainstormed solutions, I considered each idea alongside Capital One’s positioning and goals as well as the user’s. From there, I determined which ideas could be further developed into a money management feature that would respond to the needs of both parties. Lastly, I outlined the specific details for each and prioritized them.
01. App Mapping
Informed by the features and priorities outlined in my product roadmap, I created an app map for Capital One, showing how the new “MoneyWise” feature would integrate within the existing architecture.
02. User Flow
Highlighting two distinct paths, I wanted to understand how users would navigate through the app with the goal of 1. categorizing and rating transaction, and 2. creating budget and savings goals. A user flow helped to capture multiple user paths and decisions points in completing these 2 tasks. It also informs all the screen states that we would need to design.
Before moving to digital wire-frames, I quickly mapped out design elements and conceptualized the key pages of the user flow using pen and paper sketches, a quick, easy, and dispensable way of iterating ideas.
02. High Fidelity Wireframe Annotations
Because Capital One's visual design is fairly simple and my time was limited, I made the decision to go from sketches directly to high-fidelity frames. I re-designed existing frames so that they were part of the user's "MoneyWise" feature journey and to demonstrate how the feature would fit into the overall app: This includes the homepage, the checking account screen, the savings account screen, and the transaction details page. There were of course additional screens that were brand new to the app as well, so I designed those screens as true as possible to analogous ones.
Because we were moving directly into high fidelity frames, the interaction design also had to be well thought-out before moving forward with prototyping. I included annotations for wire-frames to help document how the new feature would integrate within the existing interface.
User Interface Design
01. User Interface Kit
My focus was on adding a new feature to an existing app, not reinventing the existing app. To that end, I adopted all of Capital One's existing UI design principles and styles to create a prototype that demonstrated the functionality of the new feature while seamlessly integrating into the existing flow.
I created a working high fidelity prototype of the designed screens using MarvelApp. The task flows observed in the prototype are as follows:
- Task #1: Find the coffee purchase that you’ve made just now, categorize it, and rate it as a purchase that you “want.”
- Task #2: After categorizing and rating, from your current screen, find and view “spending trends: by needs and wants.” Then view your spending breakdown(s) for the month of April.
- Task #3: Locate all of your budget goals. You’ve completed your goal for “car” and now want to delete this budget. How would you go about doing so?
- Task #4: From your current screen, locate and view all your savings goals. After viewing your savings goals, you decide that you eventually want to go on vacation (sometime around May). Add a $1000 savings goals for vacation and allow for auto-savings.
- Task #5: Now that you have all your budgets and savings goals in check, you want to view all the alerts that you have for your spending. How would you go about doing that?
Usability Testing & Validation
01. Usability Testing
In order to validate my design, I spent the afternoon at neighborhood banks / financial advisory centers filled with millennials. I conducted 5 in-person usability tests with the primary tasks outlined above. My goals were to assess how well the solution assisted with transaction categorization, how well the solution assisted with budgeting and saving, and how well it integrated within user's expectations.
02. Affinity Charts
From these findings, came an affinity chart, crafted based on errors and issues observed during usability testing, user feedback, and the flows for each task.
Final High Fidelity Frames
Takeaways & Next Steps
Overall, the feature successfully aided users in being mindful of spending (through transaction categorization), and in creating an experience that offered the opportunity to create goals / savings when financial situations turn rather complicated. But while validation proved our initial design to be fairly successful, it is by no means a final design. There is definitely room for improvement. Our next stages should consist of the following:
- Further testing should be conducted to determine the direction to take in regards to the organization of savings and budgeting goals.
- Now that we have identified the preferred user flow for categorizing and rating purchases, our second round of iteration should focus on how we can make these actions even easier for users.
- Further testing needs to be conducted to see if the lack of usage of some elements (Eg. "uncategorized link") are due to hesitancy in using new features or whether this is a feature that users deem useless.