The NerdWallet home page gives you a bird's-eye-view of your credit and spending accounts, along with a feed of personalized recommendations to help you grow your money and improve your finances.
I redesigned NerdWallet’s home page as part of the team’s larger mobile app redesign. As the sole designer on this project, it was my responsibility to improve the overall experience of our highest impact page.
Officially, the goal was to apply our new design system and increase CTR on cards in the home page’s feed, but I felt that we could also improve other metrics like activations (number of users connecting financial accounts), as well as some other adjustments that would improve user experience and alleviate pressure on our copy team.
Prior research data showed that when people open the app, they’re primarily looking for two things:
The previous design’s visual hierarchy did not reflect what users were looking for most, so I emphasized these numbers. The more liberal use of space allowed us to be clearer with our labeling, which we had received feedback about in the past. Additionally, this granted us the ability to show the user’s credit score delta over the previous week, giving the user more insight at a glance.
With these changes, I saw an easy opportunity to increase the percentage of users with linked financial accounts, which was one of our most important metrics. If a user has no account linked, the corresponding financial number is replaced with a call to action, which leads the user through the account linking flow.
The feed is where users are given updates on changes to the various financial accounts they’ve linked, along with actions they can take to help improve their financial health. The cards in the feed act as entry points into other areas of the app, such as the credit score and spending dashboards, as well as financial articles, calculators, and product marketplaces.
Any team at NerdWallet can create cards from templates which are presented to specific users based on relevance.
In order to alleviate these issues, I segmented the feed by categories like credit monitoring, spending and income, debt management, and more. At the top of each segment there’s a summary statement of the category’s current status. The statement eliminates the need for each card to set its own context, greatly reducing the amount of redundant text on the page, along with the work required to maintain it. It provided a better reading experience for the user, and gave them the ability to parse through the feed more efficiently.
During this project, NerdWallet was at the tail end of defining their new brand expression; an effort led by the company’s creative team. This coincided perfectly with the mobile redesign, so we decided to apply it to our app. I worked with the creative team to develop NerdWallet’s brand in the context of the mobile app, making adjustments to typography and illustration style.
In the header, we feature an illustration. At the beginning of each month, the illustration changes like a calendar, and your spending and income for the month is back at $0.
To test and iterate on interactions and animations, I created prototypes in Origami. For the loading screen animation, we worked again with the creative team to design an animation that would transition seamlessly from the splash screen to the home screen.
Logo animation by Chloe Dalby.
Throughout this project, I sought feedback from others through weekly design and product reviews. I met early and often with engineers about design decisions so they could plan their work effectively. When it came time to build, I provided the engineering team with detailed specs, made note of any new components, fielded questions from engineers, and worked through unexpected problems that came up during development.
After the release of this redesign, we saw CTR on cards increase by 22%, along with a significant boost in the number of linked accounts. We received many more positive reviews, and noticed a newly upward trend in App Store and Play Store ratings.
Internally, this update marked a shift in the company’s optimism toward our mobile app, and left a lasting impression on NerdWallet’s new brand.
If I could go back to the beginning of this project, I would have tried harder to make a case for changing the app’s interaction model, despite it being a constraint. I believe a feed-like interaction model is not appropriate for the type of content that NerdWallet pushes to the user because it’s usually very finite, and only changes as the user’s financial accounts change, which for most people happens very gradually over time. Designing and testing alternatives like a dashboard model for example, could have eliminated the need for a feed at all, which would have drastically simplified development and improved user experience.