NerdWallet App - Cash flow page
Improved feature discoverability by optimizing product architecture for easier access.
UX/UI Design
Overview
Problem:
The Cash Flow tab of the native app houses popular features like the 50/30/20 budget, bills, transactions, and spending analyses. However, as new features were added without strategic changes to the app architecture, it led to bloat and clutter, making it difficult for users to discover and access relevant tools.
Solution:
I reduced clutter by improving UI hierarchies to enhance scan-ability and feature discovery. This involved refining card UI, addressing implementation inconsistencies, and upgrading data visualizations, with a particular focus on highlighting the new 50/30/20 budgeting tool.
CONSLIDATION
To reduce page clutter and bloat while managing limited engineering resources, I consolidated related features into individual cards. This streamlined the Cash Flow page, reduced its height, and prioritized the high-impact 50/30/20 budgeting tool by positioning it higher on the page.
ACCOMPLIMENTS 🎉
Boosted discoverability of the 50/30/20 feature by approximately 40%.
Improved the "Look and Feel" score of the Cash Flow page from 2.5 to 3.5 (out of 5).
Established new design standards and hierarchy rules, which were integrated into the internal design system to ensure consistency when adding new features.
Reduced user confusion and increased engagement by clarifying feature labels and adding intuitive tooltips across the Cash Flow page.
Enhanced feature adoption by improving the visual hierarchy and making key tools like the 50/30/20 budget more prominent and accessible within the app.