Credit Card Recommendation Concept

Role: Product Designer
Output: Prototype, High fidelity screens
Time: February - May '18

Problem

This project began when I was searching for a new credit card. I realized most online tools only utilized my credit score to make a card recommendation. Because the results were so generalized, I had trouble identifying which credit card maximized rewards for my spending habits. On top of this, complexities and options for credit card rewards are increasing by the year (according to the CFPB credit card report). With this realization, I decided to create an experience that enables consumers to choose a credit card uniquely suited to their use case.
 

SUMMARY

After researching existing solutions and gathering insights from consumers, I decided this new experience would be best suited as a new feature in the NerdWallet application. This concept would give users credit card recommendations based on calculated quantitative rewards from their personal financial history. If successful, this feature would not only further NerdWallet's mission, but also increase their main source of revenue - payment by credit card issuers for approved applications (CFPB 292).

Process

In this concept study, I applied the process below to inform my design decisions.  

Screen Shot 2018-05-18 at 1.04.22 AM.png

Research and Synthesis

Consumer and Industry Research

Were there any solutions out there?

After researching current solutions on third-party credit (TPC) card comparison sites, I found were three companies that offered some semblance of a solution:

  1. Nerd Wallet
  2. Mint
  3. Credit Karma

Aside from these sites, the other TPC sites were just editorial and credit card research content (the Points Guy, Simple Dollar, Value Penguin). NerdWallet had the best solution followed by Mint. I paired this research with asking credit card users how they currently go about finding a credit card best suited for their spending.

Solution analysis of financial applications

Solution analysis of financial applications

Target Audience

Although I wanted to build this experience to help all credit card users, I needed to start somewhere that would be profitable to the company building the experience as well as their client base.  I decided to focus on recommendations for rewards cards for medium to high credit score individuals (superprime and prime users with credit scores of 660+). 

I chose to target this audience because it encompasses 79% of individuals in the U.S. with a credit score.  This also matches up with which consumers have the largest share of general purpose purchase volume on reward cards (61).

Context + Motivation

In what context do people start looking for a new rewards card? + What is their main motivation behind solving this problem?

Analyzing user research, I wanted to create an experience that could accommodate for as many of the scenarios leading to the problem as possible.  I needed to analyze the context in which the problem was occurring as well as the motivation behind solving the problem. I created these job stories (using the jobs to be done framework) to help guide the design decisions:

  • When I have a big purchase coming up, I want to find a new credit card, so I can get the most rewards possible out of my purchase.
  • When I need to build credit, I want to find a card that I will be accepted for, so that my credit score will go up.
  • When I hear my friends talk about a new credit card, I want to learn more about that card, so that I can figure out if that card will help me earn more rewards than my current card.
  • When I am going to travel, I want to find a reward card that doesn’t give me fees for exchanges, so that I am not wasting money on fees.
  • When I want to increase my credit card rewards, I want to find the best reward card for my needs, so that I save the most money.
  • When I read about a new card online, I want to see how the card compares to my current card, so that I can determine if I should apply for it.

PUTTING TWO Pieces TOGETHER

Job Stories + Current Solutions

After brainstorming concepts and pitching ideas to people who would listen, I settled on an experience that would build upon NerdWallet's current application.  The solution I arrived at takes in a user's financial data to get exact spending habits as well as their credit score.  It then processes this data through an algorithm and returns list a of cards with actual reward values attached based on the user's historical spending data.  I felt that this solution encompassed the context of the job stories as well as fit into NerdWallet's application.  

    Storyboarding and Task Development

    After synthesizing my user research data into manageable jobs, I created a simple storyboard describing how a user might use this experience.  From this storyboard, I was able to come up with a list of tasks that the user would be able to perform in the application.  The tasks are as follows: 

    • Login to NerdWallet
    • Link bank and credit card accounts
    • View personalized reward card rankings by potential yearly reward value
    • View ranked potential reward cards
    • Apply for a card
    • View card analysis + rewards breakdown
    • View card ratings
    • View card perks
    • Average approved score range
    • Ability to search credit cards
    • Ability to compare cards

    Ultimately, the goal of this feature was to give the user enough knowledge to confidently decide on a new credit card and apply within the NerdWallet application.

        Prototyping

        I broke my experience into four parts containing all of my tasks:

        1. Ranked Card List: This screen is the center of the experience.  It provides the user with our most important information and also lets them apply for a new card.
        2. Search and Compare Cards: Searching and comparing cards was very important to users - whether users wanted to look up cards they heard about, or compare a new offering with their current card, this was an essential part of the experience.
        3. View Reward Calculations: This feature is key to the experience because it enables the user to delve into how we give a quantitative card ranking.  From this screen, users will also be able to enter the edit spending screen.
        4. Edit Spending: Allowing the user to edit their spending accomplishes two goals at once.  First, it allows the user to customize the estimated spending numbers we generate from them. Second, it allows users to account upcoming spend.

        I presented these design concepts to fellow designers.  Based on feedback, I created the final application flow.

        Sketches detailing card list screens and other features

        Prototyping different ways to interperet the card list screen

        Prototyping different ways to interperet the card list screen

        Desktop HD Copy 3@3x.png

        Notable Insights and Iteration

        1. Spending category bar and informational text
          • In an earlier iteration, users didn't "get" that the annual rewards were personalized uniquely to their spending habits.  I added a spending category bar to clarify and provide at a glance information.
          • I struggled with the positioning of the spending category bar.  I initially wanted it positioned in the middle, however after listening to feedback from other designers, I realized it broke up the flow of information on the screen and disrupted the horizontal scroll.
        2. Horizontal Scroll
          • When brainstorming how the user would interact with their recommended cards, I prioritized minimizing the user input steps to view personally relevant data.  Since a main objective of this experience is to give the user the info they need to apply for a new credit card, I wanted to make access to information as simple as possible. I achieved this by utilizing NerdWallet's categorical info grouping along with a horizontal scroll.  This grouping is used in their current iteration of their recommendation system. Because our recommendation system can give an absolute highest estimated reward value per card, I felt it was more valuable to present a single card and more of its details rather than several top options. 

        3. Visible features

          • I wanted to present all the features on the screen without hiding them behind menus.  Search, "Apply Now", and Comparison buttons are quickly accessible from the main recommendation screen and allows users to know what tools are available from the get go.
        Ranked Card List Screen

        Ranked Card List Screen

         

          Engineering Effort

          Thinking about this project form an engineering perspective, the bulk of engineering effort for this feature would center around building the engine that matches user spending with credit card reward properties.  Since credit cards have many different categories associated with their rewards (including some store specific reward values), the complexity of this task would be high.  Users would also be edit their spend and be able to recalculate their spending based on these new values. While this engineering effort is all postulation without knowing the architecture of the NerdWallet platform, I feel that my experience as an engineer gives me adqueate understanding of the effort required.

          Business Impact

          Why would this feature be useful to NerdWallet?

          According to the CFPB consumer credit card market report: Credit card comparison sites account for sourcing nearly one-fifth of all credit card applications, which resulted in the origination of over 5 million new credit cards.  From these originations, credit card issuers paid comparison sites more than $1 billion in 2016.  This represents the bulk of the sites revenue and a significant share of all credit card marketing spending on consumer cards.

          Positive impact:

          • Increase number of applications through nerd wallet -> increases NerdWallet's main source of revenue
          • Fulfills NerdWallet's mission, "NerdWallet is focused on helping people lead better lives through financial education and empowerment."
          • If successful, the feature has the potential to increase NerdWallet's customer base.  Functionality of the feature is only enabled by utilizing NerdWallet's core features.  If a user really wants to use the feature, they will be required to use NerdWallet's other features.

          FINAL DESIGN

          Apple TV@3x.png

          Measuring Success

          Most simply, success can be measured in comparison to NerdWallet's current card recommendation system.  If the number of applications through the feature increases while the click through rate stays the same, we can infer that the feature is increasing the number of applications. 

          Comparing usage of the feature could also provide some feedback on success of the recommendation system.  Since people often turn to the internet when looking for a new card, if the usage of NerdWallet's recommendation increases from its historical numbers, we could draw a hypothetical impact.

          What's Next

          While this study is mostly core feature work, it could be expanded to much more and act as an AI for your credit card preferences.  If I were to expand on this feature, I would begin working on the following extensions:

          • Multiple Card Combos - recommend cards based on current cards in the user's wallet.  We could assume what types of spend goes to the user's current cards and recommend a card based on the leftover spend.
          • How do recommended cards compare with cards in the user's wallet?
          • Ranked Perks - ranking of non-monetary rewards that can factor into the recommendation engine
          • Probability of application approval
          • Utility that helps users determine what card to use when