Improving investment clarity through better information architecture
Role
Product designer
Timeline:
2 weeks
A redesign of the mutual fund details page to prioritize earnings visibility, declutter the interface, and provide users with a clearer understanding of their investment performance through better information hierarchy and grouping.
The Problem
The existing mutual fund details page had grown organically over time, and while functional, it lacked intentional structure. The page prioritized secondary information over giving users a complete understanding of their investment journey.
Project goals
Prioritize visibility of earnings and investment performance
Declutter the page through better grouping of related actions
Tell a clearer story about the user's investment journey
Make the interface more approachable for users who aren't investment experts
Design process
This project took 2 weeks and involved close collaboration with my design team lead. We brainstormed different approaches together, with me leading the execution and design decisions.
Design
Brainstrom
Feedback
Handoff
Key design decisions
Plan performance overview
The goal:
Users want to understand their investment journey at a glance: how much they've put in, how much they've earned, and how much they've withdrawn.
The design:
I introduced a bar chart visualization showing three key metrics:
Deposits: Total amount invested
Earnings: Total returns over time (all-time earnings, not just monthly)
Withdrawals: Any money taken out
The challenge:
Bar charts typically start at zero, which created a problem when displaying negative earnings. We couldn't have bars extending below the baseline without disrupting the design structure.
The solution:
When there's a loss, the earnings section shows empty space with a label displaying the negative amount (e.g., "−5k"). This maintains visual consistency while clearly communicating the loss.
Sticky "Invest more" CTA
The problem:
The primary call-to-action was positioned at the top of the page which felt visually awkward among all the other content.
The solution:
I moved the "Invest more" button to the bottom of the screen as a persistent, sticky element. This leverages thumb zone optimization as the button remains in the natural reach zone for one-handed mobile use and is always accessible regardless of scroll position.
Moving fund performance data
The goal:
Most users, especially those who aren't investment-savvy, care primarily about their personal performance, not how the broader fund is performing in the market.
The design:
The graph showing the fund's overall market performance was moved from the main details page into an "About this fund" section.
Outcome and feedback
After launch, we received positive feedback from customers noting that the page felt much cleaner and that they could more easily understand what was happening with their money. Users specifically mentioned finding the information they needed more quickly.