When one screen must give you the big picture and the little picture

How we rethought our app’s home screen to get it ready for primetime

hasslunsford
Apr 12 · 7 min read

At NerdWallet, our passion is your life well spent, and we strive for a world where everyone makes financial decisions with confidence. When I joined the team, there was a consistent belief that the home screen of our native app didn’t help accomplish those goals. So it was my task — with the support of some amazing cross-functional partners — to redesign it.

The NerdWallet app

Our native mobile app is different from our website in that you must make an account to use it. When you launch the app, the emphasis is on your personal finances — like credit score and net worth. The goal is to help you stay on top of your money and get personalized insights for leveling up.

The app first launched in 2016 and was initially oriented around monitoring your credit score only. From 2017 to early 2020, features like tracking your net worth, understanding your cash flow, and optimizing your credit card rewards and financial products were added progressively. As the app’s offerings grew more sophisticated, NerdWallet planned on running its first ever advertising campaign focused exclusively on the app.

Four screenshots of the NerdWallet app’s home screen that show what it looked like in 206, 2017, 2018, and 2019. In the first one, only credit score is featured. As the years progress, the screenshots show more information about the user’s personal finances.
The evolution of the NerdWallet app’s home screen

Renovating the NerdWallet app home screen

The problem: while the app’s various features were iterated upon after their initial releases, the home screen hadn’t gotten as much in-depth attention — as is common with many apps on a similar growth path. Along the way, as new content and modules were added to the home screen, it began to feel disjointed. If we were going to showcase the NerdWallet app in advertising, its starting screen needed some love to be ready for showtime.

The old home screen had a lot of potential: after connecting your financial accounts, you’d see your top numbers (e.g. net worth, credit score, monthly cash flow) along with corresponding updates and data visualizations. However, these useful nuggets of information weren’t organized well or balanced in their presentation. Your top numbers dominated the entire screen on most devices, making the first impression feel more static than it actually was. When you did scroll down, some information was unnecessarily repeated, and it was all mixed in with generic content and offers.

Working backwards

Like any complex project, redesigning a core part of an experience can feel daunting. But when a campaign is planned around a set of features, the deadline it imposes can actually be a forcing function to break down the work in a manageable way. This campaign was planned to launch in the fall of 2020, and I only started working at NerdWallet in the spring. In order to get the job done, we had to work backwards.

Two months isn’t a lot of time to conduct the discovery and design phase of a major feature, but thanks to the wealth of past research and design explorations I could leverage, I was able to make rapid progress by focusing each week on a key theme before crafting a design proposal for executive approval:

  • The first two weeks of discovery involved immersing myself in past research, conducting competitive analysis, and completing heuristic evaluations of the existing home screen.
  • The next two weeks revolved around concept ideation, which entailed working both independently and collaboratively. I framed the problem for project partners and involved them in workshops suitable to the participants (e.g. a Figma design jam for designers only vs. a more show-and-tell type activity for non-designers).
  • Starting in the second month, I gathered feedback from stakeholders on a series of low to mid-fidelity concepts. Along the way, we also honed in what we’d evaluate our concepts on in testing: what about a particular design element best helps someone monitor their money intuitively and feel more informed about their options?
  • The next week, using stakeholder feedback, I iterated and narrowed down the concepts to 3 variants suitable for a user research study conducted and reviewed the same week. The goal was to find out which concept or elements of a concept:

1) Allowed users to stay on top of their finances “without lifting a finger”

2) Let users zoom into ways of mastering their money without losing the context of their current financial situation

3) Would be ever evolving based on the user’s money moves as well as product experimentation and eventual customization

  • This left the last week of the second month to refine these down to one design recommendation based on the study findings.

Planning for both knowns and unknowns

Getting the design approved was only the first step. Now we had to build, test, and launch the new home screen in less than three months.

The great thing about working in an agile development environment is that design deliverables — just like engineering output — can be planned and delivered incrementally. Even when we go in with an idea of the broad design concept, we always discover unforeseen dependencies during implementation. We prioritized building certain pieces of the new design before others, and I was able to deliver the assets needed in parallel.

Fortunately, we also built in enough padding in the project timeline to account for a “polish sprint” that would enable additional refinement. This proved invaluable, as we knew unforeseen technical issues could spring up. In the end, the “polish sprint” wasn’t just needed to button up what was shipping — it was necessary so that inevitable implementation snags along the way wouldn’t delay the release.

Big picture, little picture

Our app primarily targets users who feel confident and in control of their money, yet want to level up. With both the advertising campaign and the home screen itself, we wanted to orient around the theme of “big picture and little picture,” showing that we could provide users with both tightly focused and zoomed-out views of their finances.

Two screenshots, showing the app’s home screen before and after the redesign. Before, information is stacked vertically and the only things “above the fold” are the user’s top financial numbers. After, the information is displayed more compactly so there’s additional space for a section called “Your latest insights.”
Before and after

The new home screen isn’t a drastic departure from the old one; it still has your top numbers in focus, provides entry points to unactivated features, and shows account updates, featured articles and offers. The difference is how we now prioritize, organize and emphasize them:

  • Top numbers are in a more space-efficient format that preserves their key details.
  • Financial updates now sit directly below these and provide rotating contextual insights — including data visualizations and recommendations — driven by recent account activity.
  • Unactivated features, articles and offers were given more purposeful placements.
Two screenshots, showing how the redesign looks for a new user and a returning user. In the former, the activation entrypoints are more prominent. In the latter, the primary focus is the user’s top financial numbers.

Impact and learnings

In tandem with catchy, beach-themed ad creative featuring a quirky character seeking financial zen, the redesign drove dramatic and immediate impact on our key metrics:

  • Single feature activation increased by 10% and multiple feature activation by 20%.
  • Week 1 retention of new users went up by 20% and our internal leading indicator of users’ likelihood to stick around improved by 30%.
  • Engagement with financial updates/recommendations and articles increased by 50% and 23%, respectively.

This is only the beginning of the transformation of the NerdWallet app as part of a longer term strategy to become the one-stop shop for all your financial questions — and I know we’ll have a lot more to learn along the way. But when I reflect on my role in this cross-functional success, there are some key insights I’d love to share for anyone working on projects of similar scope — and for my future self, the next time I tackle a design challenge like this.

  • Fall in love with the problem, not the solution
    In the event that you’re working on a problem others have worked on before, leverage learnings from past research and share-outs, as well as from coworkers who were there before you. Keep asking questions about who and what you’re trying to solve for, and don’t stop until you’ve gotten as specific as possible. Then, ensure your team is aligned around that.
  • Expect the unexpected
    De-risk projects not just by being willing to cut scope along the way, but by intentionally adding more time for solving hiccups that arise from unknowns.
  • Knowing how you measure success is critical for achieving it
    Sometimes success shows up in tangible revenue gains. For more nascent products, it’s often more appropriate to measure the impact of your efforts through usage metrics or leading indicators that precede profits. Sometimes the goal is even less tangible (such as raising brand awareness). Be clear with the desired outcomes and track to those.

Want to be part of a team that writes about stuff like this? Check out open roles in Design + User Experience at NerdWallet.

NerdWallet Design

Building experiences to help you make the most of your…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store