Brian Turley
Work About Approach

Spending

Nerdwallet is a personal finance company with the mission to provide clarity for all of life’s financial decisions. I was asked to create an experience that would help NerdWallet members manage their spending.

What we built

We built a page on our mobile app and website where NerdWallet members could know about their spending. The page answers spending questions like, “How much do I have left to spend this month?”, “What bills do I have coming up?” and and “where have I spent the most?” We also highlighted the most important things to know and what to do next.

How we measured success: Activation & retention

To measure success we tracked how many people connected their bank accounts to the experience and what percentage of people returned to the page again. We compared this against a transactions page that existed previously.

My role: Product designer

I was the product designer on the project. My work included concept exploration, IA, user flows, wireframes, prototypes, visual design, engineering support, and design quality assurance. I worked with a talented team which included a project manager, engineers, copywriters, a user researcher, and QA experts. We worked on several iterations of the project together.

Discovery

We did a bit of work early on to identify how we might help our users. Our user research team had just completed a study that acted as a great starting place for us to answer initial questions.

Based on what we learned, we identified an opportunity to help people so they don't have to do mental math to keep track of their budget. This task wasn’t completely solved by competition. We also believed we could help people stay aware of other things they care about like avoiding fees.

Whiteboard notes from an early discussion with the user research team.

Ideation

Once we knew more about what people needed, we did a user study comparing competitor’s solutions see what worked or didn't about them. I then began mapping out ideas. Working low-fi to high-fi I created user task flows, IA and wireframed of concepts.

Affinity mapping themes from user ops

User research

We did a number of rounds of user testing to get feedback on our work. One noteworthy usability test revealed how people responded to various visualizations of a monthly budget. We found some options were visually interesting but lacked clarity and others had less flair but were easy to understand. We heard a number of positive reactions such as, “This is how I think” and “When will you have this?”

Screens from user test comparing ways we might show a budget. We settled on a design which people read quickly and easily.

Internal feedback

Throughout the project I frequently shared designs with my team and stakeholders. It gave everyone visibility into my work, drew us closer as a team and helped us make quick decisions as the project went on.

Phasing work

The project manager and I synced often to make decisions about work and phasing. We weighed the information we had from users and stakeholders with our timeline and the capacity of the team. Work was broken out into phases which allowed us to release often.

Testing intuition

While working on a page empty state, I had an ah-ha moment. “What if we showed people a taste of what they’d get by connecting their bank accounts instead of telling them about it? Would this prompt more activations?” The team said this would be lightweight to build, so we build it, launched it and found it really successful at prompting people to link their bank accounts to our service.

Prototyping

Prototyping helped me show the team how features might work, iron out kinks and made it easy to loosely cost engineering efforts.

The prototype below shows how a person might confirm the bills we’ve found for them. After viewing this prototype we decided as a team to cut scope slightly by simplifying the modal interaction.

Polish, development and launch

Dealing with money and time can make for all kinds of funky data scenarios. To make sure I designed for potential use cases, I put my work through visual stress tests before handing them off to engineers. During development, I was available for questions and did testing to make sure features were high quality.

Use cases I ran through for a graph showing spending this month vs. last month.

Results

When we first released the spending page we saw a significant jump in members who connected financial accounts. Since then, we’ve seen steady and continual increases to our other key metrics like returning members. The spending page has become a highly sticky feature for NerdWallet members and one that has internally gotten people excited about where NerdWallet is headed as a company. I’m proud to have been able to work on it.

2%
Web activation lift
64%
Android activation lift
42%
iOS activation lift
22%
W1 Retention lift
28%
M1 Retention lift

Team credits