A NerdWallet Case Study
Likelihood of getting approved for a credit card
One of the areas we could be most useful to users as they shop for credit cards is giving them a sense of how likely they are to be approved for a credit card ahead of applying.
NerdWallet initially solved for this problem with a feature called Likelihood of Approval (LOA). It allowed users to understand where they fell within the recommended credit score range.
However, more factors than just a person's credit score are taken into consideration when they apply for a credit card. NerdWallet wanted to create a more holistic and personalized experience to communicate approval likelihood to users.
I worked alongside a Product Manager and Copywriter on this project and we turned this project around in four weeks.
The original Likelihood of Approval (LOA) feature
No credit score
With credit score
Design process
I began by brainstorming different ways to visualize a user’s approval odds. At this point we had several open questions yet to be answered:
How should approval be communicated? Data? Text?
What is the NerdWallet-only value we can contribute when calculating approval?
Should we reflect user’s credit score within each approval widget, or globally?
How much explanation is necessary to make this feature useful and comprehensible?
How similar should the visualization be to the preceding LOA experience?
Is a consistent label important across the different use cases?
Constraints
We unfortunately did not have the necessary data for all credit card issuers. This means that LOA will remain the fall-back for displaying a user’s likelihood of being approved when card information is not available.
Additionally, there are a certain amount of legal and compliance considerations that design and copy needed to balance.
There are multiple use cases to consider:
Not enough data provided by issuer for approval odds
New credit card, therefore, not enough data
Ability to calculate approval odds
Option 1 : Odds as a binary
Treat approval as binary—thumbs up or down—and communicate NerdWallet user data as explanation.
Option 2 : Odds as a range
Visualize the NerdWallet user data as a range in addition to a textual explanation.
Option 3 : Over-communicate data
Display credit score within recommended range while also showing minimum score we’ve seen approved for specific cards.
Option 4 : Odds language on top of LOA
Describe approval odds with language like, ‘okay’ ‘good’ etc. on top of mapping user’s credit score on top of recommended range.
Based on the data we had available to us to calculate approval odds, we felt that showing a user’s approval odds as a range was the right direction to move forward. The visualization represented the number of NerdWallet members with similar credit who had been approved. Since the odds were based on an actual value it felt less like we were passing judgement on a user. Instead, we were giving user’s more information in order for them to make a more informed credit card decision. Below is an early depiction of approval odds represented from high (left) to low (right).
In anticipation of getting user feedback, we chose to simplify the information as much as possible to gauge users’ understanding of what we were trying to communicate. I also altered the visual from dots to a bar graph to better correspond with the current LOA design.
User feedback learnings
We observed 16 participants go through a prototype via UserTesting.com in order to better understand what was and wasn’t working.
Based on what we observed and their feedback we made several changes:
A common observation by users was that they felt 7 should be labeled as '"high" and not "medium.”
None of the users proactively explored the tooltip during our test. However, none of the users misunderstood the information being communicated. Consequently, we felt confident that the tool tip served as a supporting mechanism rather than hiding information vital to users understanding the data. I did move the popover from a tool tip trigger to appearing when the approval odds label is hovered or tapped.
Removed 10 out of 10 as a possibility. It was almost unanimously interpreted as a sure thing and we were not comfortable giving that impression.
Simplified our no-denial and new-product-no-data vis use cases to the same graph and tooltip language. Users didn’t care—or understand the difference.
Almost all users said this feature was "valuable" and something to the effect of, "It would save me from wasting my time applying for a card I might not get."
Finally, there were many areas worth trying to clarify through copy:
What data we do not have
The different credit scores
That checking their credit score will not negatively impact their score (pre-flow or on the create account screen)
Make it clearer that creating an account is *part* of the credit score flow
Introduce explanation into account creation step that references approval odds. Many felt unsure how the CTA would pan out.
Add copy about it not being a guarantee into tooltip
The final pieces from CTA to Approval Odds
Logged out CTA of “See your approval odds”
Likelihood of Approval visual activated by a user signing up to view their credit score
Approval Odds visual activated by a user signing up to view their credit score
The final approval odds component.
Likelihood of approval updates
The original likelihood of approval (left) before design updates.
The current LOA feature would still be leveraged when Approval Odds data is unavailable so I updated the LOA’s styling to match the Approval Odds feature. Updates included using the same underlying grid, color palette, and moving the credit score into a label similar to Approval Odds.
