Greg Mathews

Nerdwallet

Nerdwallet helps users find the best financial products and provides guidance for tough money questions. While at Nerdwallet, I helped build out the design system, re-designed some of the highest grossing pages, and designed the initial version of the consumer product.

Credit Score v1

Nerdwallet started as the go-to site to find a new credit card and expanded to a broader audience by helping people answer a range of financial questions. The main issue with being a destination is that people would only visit NerdWallet when they had a question. We weren’t doing enough to meet people where they were and surface potential issues before they became a financial problem.

We needed to make a product that would build a lasting relationship with our users so that we could be there when users have a question and suggest ways they could improve. We started by focusing on the user’s credit score as it underlies almost every large financial decision. After pitching this product, a Product Manager and I got the green light to assemble a team of two engineers to build out the first version.

Design Sprint

To kick off this project we ran a design sprint, similar to the way Google runs theirs. We had a User Researcher, Product Manager, and Engineers in the room. We brought in our experts on credit score to give us an overview. We looked at competitors to see what they were doing well and identified what we could improve. We then built a rough wireframe prototype for user testing.

Through testing, we learned that the main problems with credit score were that people didn't understand what makes up a credit score and they didn't know how to improve it.

The Six Factors

The UI focused on the six main factors that contribute to credit score. We ordered the factors by most impactful to least, and included an overview of how the user was performing so they could quickly understand where they need to focus to improve. In addition to this, we included explanations of what the factors were and additional articles to further educate the users.

How to Improve

One of the biggest competitor learnings we gathered was the fact that nobody told you how to improve your credit score. The third party API we were using had a credit score simulator, but users had to proactively try and guess what might improve their score.

We flipped this around and proactively selected numbers that would most likely increase people's scores, ran the simulations for them, and presented them with the results. This ended up giving people actionable insights and ways they could increase their score.

Results

In a quarter we were able to grow from 5k users to ~150k users. We proved that credit score was something that people were extremely interested in and that they were interested in proactive ways to improve their situation.

More designs

Expanding from credit score

Since the beginning we knew we wanted to build something that expanded beyond credit score. After proving the worth of credit score, we expanded the team and started building a product that encompassed more of a person's financial life. We focused on categories such as transactions, home, auto, and wealth. With the additional categories we needed to rethink our dashboard structure and the navigation.

Expandable Navigation

The main constraint of the previous design was our navigation. We wanted to create a navigation pattern that could expand way past credit score. We opted to use a sidebar navigation with expandable categories. This was a more scalable solve as we considered adding future categories.

Updated dashboard

With our updated dashboard, it was important to build something modular and could expand as new categories were added. We introduced a homepage for the logged-in experience to surface the most important information. The content includes various content types from relevant articles to the latest spending update. With a modular approach, other teams were able to add to this homepage.

Motion System

The last piece we added was a motion system when navigating. This helped the user make sense of how the page was changing. When the page initially loads, or you change categories, the content loads in from right to left. When you change to a new category the content fades down and away, and when you navigate deeper into a category the content fades back and away and the new content comes in from the right.

Results

In the same quarter we built this new navigation and dashboard design we were able to grow the product from 150k users to 500k users. The new design set up the future of where the product was heading. This ended up being my last project at Nerdwallet, after Nerdwallet I contracted at babylist for a few months and then took a full time job at smash.gg.

More designs