A NerdWallet case study • 2018
Driving more conversions with a streamlined approval odds visualization
Important value NerdWallet brings to a user’s credit card shopping experience is giving them a sense of how likely they are to be approved for a credit card before they apply.
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.
Yet, 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 that would communicate approval odds to users.
I worked alongside a Product Manager and a copywriter to build an improved version of our Likelihood of Approval visualization.
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
Considerations
Unfortunately, we did not have the necessary data for all credit card issuers. This means that old LOA will remain the fallback visualization when adequate card information is not available.
Additionally, there are considerable 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
I explored different ways to visualize a user’s 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 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 judgment on a user. Instead, we were giving users all the information we could for them to make an informed decision.
Early depictions of approval odds represented from high (left) to low (right).
Ahead of putting it in front of users, I chose to simplify the information displayed. I wanted to learn if users could still understand the visualization without the top-level description.
I also changed the graph 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 visual treatment
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 is 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.
Remember, the current LOA graphic would still be leveraged when Approval Odds data is unavailable. I updated the LOA’s styling to match the Approval Odds feature. Updates included:
Used the same underlying grid and color palette
Moved the credit score into a label similar to Approval Odds
Might I recommend the redesign of Groupon’s Merchant self-service platform, Merchant Center next?