A NerdWallet Case Study
Personalized Credit Card Recommendations
About NerdWallet
NerdWallet wants people to make smart money moves. NerdWallet has helpful tools, expert info and tailored insights to make money questions and topics less complicated and simple to understand.
Background
In Q2 of 2017 NerdWallet launched a feature we called personalized recommendations. It was a short quiz asking users their goals and preferences for their new credit card. After answering around ten questions users are given several credit card recommendations based on their answers.
We immediately saw success with this feature. It aligned with NerdWallet's mission for giving users confidence in their financial decisions and gave users who wanted a more curated credit card shopping experience the opportunity to see only cards that were right for them.
Project goals
A year later, we were looking to create a single credit cards shopping destination that could be the starting point for all our consumers. Due to SEO traffic, we have numerous credit cards shopping entry points that we have optimized; but we lacked a single credit cards shopping destination where we can confidently send all consumers.
The original personalized recommendation quiz flow performed very well in account registration, credit score activation, and net conversion. However, to confidently pitch this updated version of the quiz flow as our flagship experience we needed to solve the entry points, quiz flow experience, and suitability for popular Airline/Travel cards.
The core features of new experience would be:
Updated quiz flow design and copy
Travel/airline card recommendations
A compelling value prop for credit score activation
Considerations:
We did not want to change the quiz format of the personal recommendation experience as it was working well.
We did not want to re-make the overarching logic, just add the new travel reward credit card branch and make minor adjustments.
The entry points and results page were outside the scope of this project, they would be part of phase II.
Success for this next iteration of personalized recommendation would be increased net conversion for users who complete the quiz. A secondary metric we will consider is TransUnion credit score activation.
The team
The personalized recommendation project team consisted of a product manager, designer, copywriter, user experience researcher, and four engineers. I was responsible for the end-to-end design, therefore, I had the opportunity to collaborate with many other designers as the project incorporated illustration and motion design elements, and introduced new elements into our design system.
Timeline of personalized recommendation work across design, copy, user research and engineering.
Product recommendation/onboarding experiences that inspired our project. Clockwise from top left: Care Of vitamins, Warby Parker’s eyeglass style quiz, Duolingo onboarding, Havenly design quiz
Design Process
I kicked off the project with a team-wide workshop. We compiled examples of other apps and products that would help to inspire the next iteration of the personalized recommendation feature. The entire product and engineering team show and tell-ed examples of recommendation experiences they found compelling.
Based on the group’s inspiration and discussion I created a rough list of design principles to keep us oriented throughout the process:
Set the stage with some humanizing questions, don’t jump right in
Show rather than just ask
Use transitions to help communicate how their answers impact their recommendations
Allow users to be uncertain
Don’t punish users for not knowing
Include opportunities to learn
Create value regardless of if they answer one question or all the questions
Early brainstorming focused on defining the layout of the quiz. As a team we weighed the pros and cons of the various options. We decided to pursue the immersive quiz experience because it had the right amount of flexibility, therefore, the same product experience could be initiated from a variety of entry points. It also provided us the most real estate for our questions.
In addition to page layout, I explored question and input formats. We ultimately decided to maintain the one-question-at-a-time structure because of the dynamic question flow. It allowed for the most seamless question experience as a user’s answers would dictate their follow-up questions.
The appropriate selection patterns for our answers were the final visual element to define. Following an internal audit of patterns used in similar product experiences we decided to adopt a card pattern that was recently introduced on our homepage.
Our layout explorations from left: immersive, embedded, traditional modal, interactive modal, and vertical scroll
Different select patterns explored for our answers
Demo of the prototype used during our second round of user research
User feedback, round one
We focused our first round of user research on copy using a SurveyMonkey prototype of the new travel branch questions. We learned several things that we were able to fold into design and copy.
First, we saw users having difficulty answering a hard yes or no to specific card features like a sign-up bonus, no foreign transaction fees, and annual fee. To solve this, we added a third, non-committal answer option that allowed users to say “it depends.”
We also saw misaligned expectations from users when it came to rewards credit cards. Many users denoted no desire to pay an annual fee of any kind, yet still expected the cards to have top benefits. In an effort to better communicate the value of an annual fee we introduced confirmation messaging when a user selects that they are not okay with annual fee. It warns users that travel credit card options with no annual are limited so they would be better suited for a cash-back card. This way users could make an educated decision ahead of the results page.
Lastly, we also noticed users have difficulty answering our ranking questions. They would often easily choose a first and second choice and then stumble over the other options which they cared less about. At the same time, our logic was only taking the top two answers into account for the results anyway. We decided to simplify the ranking questions to only asking for a user’s top two choices to minimize unnecessary work on their part.
User feedback, round two
Following these design and copy changes we launched a second round of user research. In this round users went through a high fidelity Invision prototype of the whole quiz. We wanted to evaluate our copy & branch updates, while also gauging overall usability of the quiz’s UI. Users were overwhelmingly positive around the tone and level of questions included in our flow. One user in-particular was quick to point out his suspicion when recommendations are given with minimal questions. On the other hand, he loses patience with quiz’s that ask too many questions. His opinion was that we had found the right balance for how many questions and that we were asking enough to give him confidence in our recommendations.
Feedback from the first round of user testing led us to optimize the card benefits we showed to users later in the quiz. We had decided to only show benefits that fit the criteria of the card type they had previously selected. For instance, if a user declared a preference for a airline rewards credit card rather than a hotel-specific card, we would only show card benefits associated with airline credit cards. We saw this backfire with users in our second round of research. It confused them rather than make their choice easier. Based on this observation we decided to show all benefits to all users, regardless of travel credit card preference.
Final design details
The final stretch of the project consisted of templating the page layout, components, and defining screen transition animation. While I had based the card pattern I used for answers on an existing component used on the site, I needed to add some behavior and interactive characteristics for them to meet our needs. I also collaborated with our Brand Studio team to leverage animated illustrations on our intro and outro screens.
Animation tests for screen transitions
