A NerdWallet case study • 2018
Elevating the flagship credit card acquisition experience with improved account creation and conversion rates
NerdWallet had a short quiz asking users about their spending goals and preferences for their new credit card. After about ten questions, users saw credit card recommendations based on their answers.
The quiz was an immediate success. It aligned with NerdWallet's mission to give users confidence in their financial decisions and created a more curated credit card shopping experience.
Due to our heavily optimized SEO, we have many credit card shopping entry points, but lack a single credit card shopping destination we can confidently send all consumers to.
The original credit card recommendation quiz flow performed well; however, to confidently adopt the quiz as our flagship experience, we needed to expand its functionality.
The main outcome we hoped to positively impact with the proposed changes was getting more users to apply and get approved for a credit card. Increasing the users who created a NerdWallet account and activated their credit score were also outcomes we hoped to positively affect.
Updates required:
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 rebuild the overarching logic, but 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.
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.
Gathering inspiration
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 quiz. The entire product and engineering team showed and told 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 only 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 whether they answer one question or all the questions
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
Layout exploration
I initiated layout and structure explorations for 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.
Component styling explorations led us to adopt a 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, I decided to adopt a card pattern similar to a pattern already used on the homepage.
My layout explorations from left: immersive, embedded, traditional modal, interactive modal, and vertical scroll
Different select patterns explored for our answers
Gathering user feedback
Demo of the prototype used during our second round of user research
Round one focused on copy and question order
Our first round of user research used a SurveyMonkey survey as a prototype to test the new travel branch questions.
We saw users have difficulty answering with 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 noted no desire to pay an annual fee, yet still wanted a card with top benefits. We aimed to improve how users understood the value of an annual fee by introducing confirmation messaging when a user selected that they were not okay with an annual fee. It warned users that travel credit card options with no annual are limited so they would be better suited for a cash-back card. Users could make educated changes during the quiz, rather than wait for the results page.
Lastly, we also noticed users had difficulty answering our ranking questions. They would often easily choose a first and second choice, then stumble over the other options, which they cared less about. At the same time, our logic only took the top two answers into account. We decided to simplify the ranking questions by only asking for a user’s top two choices to minimize unnecessary work on their part.
Round two was a high fidelity prototype
In this round, we wanted to workshop our copy and branch updates. We also wanted to gauge the overall usability of the new quiz UI. Users went through a high-fidelity Invision prototype of the entire quiz.
Users were overwhelmingly positive about the tone and level of questions included in our flow. One user in particular shared that when recommendations are given with minimal questions, he is suspicious. On the other hand, he loses patience with quizzes that ask too many questions. His opinion was that we had found the right balance of how many questions and were asking enough to give him confidence in our recommendations.
After our first round of testing we had changed how we displayed card benefits to the user. We chose to only show card benefits that fit the selected card type. For instance, if a user declared a preference for an airline rewards credit card rather than a hotel-specific card, we would only show airline credit card benefits. We saw this backfire with users in our second round of research. It confused them rather than simplifying their choice. We reverted and made sure to show all benefits to all users, regardless of credit card preference.
Final design details
The final stretch of the project required me to create the question page template, finalize components, and define screen transition animation.
While the card pattern was based on an existing component, the use case was slightly different. This required additional behavior and interactive characteristics to be determined. I also collaborated with our Brand Studio team to create animated illustrations on our intro and outro screens.
Animation tests for screen transitions
The final quiz
Results
The expanded credit card quiz successfully achieved conversion, account registration, and credit score activation targets. It was rolled out as the primary credit card experience for all incoming credit card traffic.
The recommendation template would go on to be adopted by multiple NerdWallet verticals to create their own personalized quiz flow.
Next, read about NerdWallet’s feature giving users more insights into their odds of being approved for credit cards.