CHAse bank app
CASE STUDY
BACKGROUND
Chase Bank is looking to expand their personal finance management capabilities for their mobile app. As one of the largest banks in the U.S., serving over half of America’s households, Chase wants to use their reach to improve the financial health of its customers. The features that they are offering focus primarily on spending and making payments. Chase would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances. Chase wants this Personal Finance Management feature to embed within the current Chase Bank app. The design of Chase is already embedded in their brand, and working off their brand which aesthetics are Clean, Modern, Human and Approachable, and Trustworthy and Reliable.
MY PROCESS: RESEARCH, SITEMAPS, WIREFRAMES, PROTOTYPING, USABILITY TESTING
TOOLS USED: SKETCH, PHOTOSHOP, INDESIGN, ILLUSTRATOR, INVISION
TIME FRAME: 80 HOURS
01 RESEARCH
This is the stage where we attempt to understand our users at a deeply human level. This means we go beyond logic and rational behavior. To gain empathy, we need to understand the emotional, social and irrational drivers that affect the way our users behave. To gain a better understanding of the nonprofit world, I completed in person interviews, online surveys, and competitive analysis. These methodologies help highlight the current trends and any gaps in the designs.
User Needs
-
Seamless actions
-
Convenience
-
Easy to navigate
-
App friendly over website friendly
Paint Points
-
Option to check budgeting within the app
-
Tracking of a certain expense
-
Raising credit limits
According to the Consumer Federation of America, 71% of American households are involved in very light financial planning, such as basic budgeting and savings goals. The average debt of a household is $16,000 for those without a mortgage, and $132,500 for those with. Another sobering fact is that the average credit score for Millennials is below 621 (bad) whereas the average credit score for those 50 and older is considered fair or higher.
Taking all of this into account, Chase sees an opportunity to make a difference, and help Millennials with their financial challenges. The typical personal finance management features include saving goals, budgets, calculators, and expense tracking
RESEARCH METHODOLOGIES
1
SECONDARY
RESEARCH
This method will give us insight into mobile banking apps, features, and designs that motivate and attract customers. As well as trends in the market and what has already been discovered.
2
COMPETITIVE
ANALYSIS
Researching other popular mobile banking apps, I compared features that had good user feedback as well as weak designs.
3
PERSONAL
INTERVIEWS
Help gain empathy on the customers and understand their personal needs, wants, and pains in mobile banking
Research Findings:
- Users prefer their bank’s mobile app vs the website bc of the convenience and additional features the app has to offer over the website.
- Banking habits lean towards concerns with credit cards and depositing money/checks
- Chase is very popular that already has a high expectation and rating with their customers
- Depositing checks and finding routing number was the only reoccurring frustration throughout participants
- Users appreciate personalization, feels pleasant to use, more friendly
- Limit the need to call customer service. When users need to call for something they can’t complete on their own adds more frustration.
After conducting my user interviews, I started with an empathy map to synthesize my findings. I used different colored sticky notes for each participant and sorted key insights that stood out to me into five categories: doing, seeing, hearing, pains & gains, thinking & feeling. This really helped identify user needs, pains, and wants. I then went on to create provisional personas and a user persona based on a common Chase app user.
PROVISIONAL PERSONAS
The Spender
Age: 21
Goals
- Needs to be able to send and receive money easily and fast
- Help stay on top of bills
so they aren’t forgotten
- Overdraft protection
Pains
- Doesn’t know where money goes
- Has a lot of expenses but doesn’t budget well
- Not disciplined to save
- Always splitting bills with friends and needs to use three credit cards at dinner
The Investor
Age: 42
Goals
- Manage all accounts in one place
- See savings grow
- Pay bills on time
- Alerts for every transaction
to prevent fraud
Pains
- Constantly going back and forth to check his savings funds and investments and credit card statements
- Needs app support from time to time but hates calling and being on hold with customer service
- Always on the go, needs quick access
The Family
Age: 36
Goals
- Keep track of multiple
saving accounts
- Budget sheets linked to their account
Pains
-Managing their mortgage savings together with other
accounts is confusing
- Don’t like linking their account to third party finance apps
- Tracking expenses
02 iNFORMATION ARCHITECTURE
Information Architecture (IA) uses the metaphor of architecture because it's meant to help us better organize "places made of information." The work of information architecture requires identifying all types of content within a product, sorting them, and then mapping them out in a way that feels familiar to the user.
CHASE MOBILE APP SITEMAP
After figuring out whom I was designing for and delving into the user’s needs, I went to organize the content of the app with two sitemaps, one for each feature. I then created a sitemap to show how the feature fit into the overall. The second sitemap content is based on Chase's mobile app's current menu.
03 iNteraction design
Interaction design is a major component of the user experience. It incorporates information architecture and usability to define how a product will behave. Good interaction design considers a user’s goals, context and understanding of the world in order to present an interface the user easily understands.
TASK FLOW
The task flow shows how the user might navigate through the site to accomplish the task of completing a search.
USER FLOW
The user flow is similar to the task flow, but it shows the path the user might take to navigate through the site to accomplish the task of completing a search.
WIREFRAMES
After completing the previous process phases I sketched out low-fidelity wireframes for a few pages. I thought through different ideas to which was the best way to incorporate a new feature within an existing app. I wanted the design to be seamless and very user friendly.
04 USER INTERFACE design
With the UI kit, I focused on building upon the brand identity with interactive UI elements. I still want the color palette and icons for the new features to resemble the rest of the app. I designed the new icons and screens based on the app's current themes to feel as though this feature really fits in and is already familiar to the user.
ORIGINAL CHASE LOGO
COLOR PALETTE
#105BA7
#0092FF
#24CBFF
#26201C
#3D3734
#FF625F
#7ED321
#FEBD01
All the screens in Chase's mobile app are designed with white backgrounds (besides for the menu which is only white text). I made sure the colors I chose worked well on white vs darker colors.
These colors are more vibrant but almost a soft vibrant, not a neon, which works well on white. It's not too bright that it's hard too see. Working with vibrant colors I had to make sure it wouldn't be too hard on the eyes, as well keeping the feel of the original app. I used Adobe Illustrator's "color guide" to find the right shade of red, green, and yellow that paired with the main blues in the app.
ICONS- SAVING GOALS
Amongst the icons, the car and the house icons already exist in the Chase app. My challenge was to create new icons that matched the style and look based on the designs I had, creating a full icon set.
BUTTONS
MENU
%20Copy.png)
I created the new "Management" section to incorporate both new features and make them accessible through the home menu.
GRAPHS
Graphs were used to give a visual representation of the user's buying habits. Each category has it's own vibrant color, making the process of delving into one's finances more attractive and easy to follow.
TYPOGRAPHY
Avenir Next. Regular, 16pt
Avenir Next. Regular, 25pt
Avenir Next. Regular, 30 pt
Avenir Next Medium, 30 pt
Avenir Next Regular, 50 pt
Now moving to the visual design I was finally able to put all my research and planning into the look of the features. I designed two features for the mobile app to target two areas of interest for Chase.
The first feature is Budgets and Spending. The user can access this feature through the menu
and can visually keep an eye on their spending habits. The user can set budgets for different categories that is organized and appealing.
All the set budgets are displayed as bars so it is easy to see when the user is reaching their limit. Since the target market was geared to millennials, I wanted to keep the design simple and attractive. With little effort on the user's end, this feature could help strengthen good finance habits and tackle the bad ones.
HI-FIDELITY WIREFRAMES
HOME SCREEN
MENU-OPEN
SPENDING- PAGE 2 (BUDGETS)
SET NEW BUDGET-
ENTER AMOUNT
SECONDARY MENU- OPEN
.png)
SET NEW BUDGET-
SELECT CATEGORY
SPENDING HOME PAGE
The second feature is for saving. Now with no one carrying around cash these days, it's hard to keep a savings goal without a tangible item. Gone are the days of physical piggy banks.
A common trend in our target market is spending and not saving. Living above our means, trying to keep up a status quo, instant gratification, are all reasons why people spend rather than save. With this feature, the user can see how far they are to reaching their goal. I created icons for the most common large expenses and designed a visual more tangible way to save. This will hopefully encourage more saving and less spending habits.
HOME SCREEN
MENU-OPEN
SECONDARY MENU- OPEN
GOALS HOMEPAGE
ADD A NEW GOAL
NEW GOAL FORM
CONFIRMATION NEW GOAL
NEW GOAL ADDED
05 Iteration & Implementation
The testing phase is our greatest opportunity to improve our products by studying how people respond and interact with our ideas. Using the feedback we get from our users, we then create the next iteration of our work and repeat the design process again as necessary.
Test Objectives:
- Test overall look and attraction of the features
- Good flow, if steps easy to follow
- Test users understanding of where to navigate
- Test value of the feature
CONCLUSION & NEXT STEPS
After creating the affinity map, I was able to draw conclusions with the most important findings.
I organized each participants notes into a few categories and focused on repeating issues or comments. Overall the features were appreciated and seemed valuable to the user. The design received only positive feedback and fit well into the existing Chase app. One participant, who uses the Chase app regularly, said "I can see this being a new update."
In my next steps, I will separate “Budgets” from “Budgets and Spending” since it is hard to find and is valuable on it's own needing it's own focus. Upon separating budgets, I will elaborate more on each feature, adding more detail to each page and give more for the user to do.
Under "Spending Categories", the pie chart needs each category to have titles because it is confusing for new users what each one means and what to do. Under labeling, the “new” icon in "Saving Goals" is entirely obvious it’s for a new category and I will add text to the icon. This way we eliminate the guessing game factor.
I would finish by continuing the design of the initial homepage, scrolling below the accounts, to show a block for the new features as an advertisement. And to incorporate more places where the features are advertised and direct links.
Why stop here? View my other case studies!
