top of page
Chase background.png

CHAse bank app

 

CASE STUDY

iphone-screen.png

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
  • White LinkedIn Icon
  • White Twitter Icon
  • White Google+ Icon

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
  • White LinkedIn Icon
  • White Twitter Icon
  • White Google+ Icon

Researching other popular mobile banking apps, I compared features that had good user feedback as well as weak designs.

3

PERSONAL
INTERVIEWS
  • White LinkedIn Icon
  • White Twitter Icon
  • White Google+ Icon

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.

STICKY NOTE PROCESS

PROVISIONAL PERSONAS

Prov. Personas Copy 3.png

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

Prov. Personas Copy 4.png

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

Prov. Personas Copy 5.png

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.

Mobile Sitemap.png

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.png

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.

User Flow.png

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. 

IMG_8306.JPG
IMG_8307.JPG
IMG_8308.JPG

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

chase-logo-transparent.png

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

phone-app.png

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. 

Icons.png
Screen Shot 2019-01-27 at 1.32.14 AM.png

BUTTONS

MENU

Menu (1) Copy.png

I created the new "Management" section to incorporate both new features and make them accessible through the home menu.

Buttons-UI.png

GRAPHS

Graph-mockup.png

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.

UI KIT Copy.png

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

Accounts.png

MENU-OPEN

Menu.png

SPENDING- PAGE 2 (BUDGETS)

Budgets.png

SET NEW BUDGET-

ENTER AMOUNT

New Budget.png

SECONDARY MENU- OPEN

Secondary Menu (1).png

SET NEW BUDGET-

SELECT CATEGORY

Budget Final.png

SPENDING HOME PAGE

Spending Summary.png

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

Accounts.png

MENU-OPEN

Menu.png

SECONDARY MENU- OPEN

Secondary Menu.png

GOALS HOMEPAGE

Goals1.png

ADD A NEW GOAL

Choose Goal.png

NEW GOAL FORM

Car 3.png

CONFIRMATION NEW GOAL

Car 5.png

NEW GOAL ADDED

Goals Final.png

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

Chase Affinity Map.png

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!

bottom of page