At a glance
Role
Product design and prototyping
Product
A client investment balance summary
Team
Solo project
What I owned
I framed the problem, designed the flow, built the prototype, and put together the sample data.
Delivery
Working prototype
Scope
Based on Farther’s public app previews, with fictional data.
My balance is down. Did I take money out, or did my investments lose value? I wanted that answer to be clear from the balance screen. I built a working prototype using fictional data and Farther’s public app previews as a starting point.
Why did the balance drop?
In my example, the account started at $100,000. The client deposited $12,000 and withdrew $5,000. That’s $7,000 net going in. Investment changes, including income and fees, reduced the balance by $14,691.80. It ended at $92,308.20. Even with more money coming in than going out, the balance fell $7,691.80.
Separate transfers from investments
I grouped deposits and withdrawals in one card. That’s the money the client moved. Both amounts are visible alongside the net. Investment change has its own card. Tap either card to see the related activity. The full summary adds up every change through the selected date.
Show how the numbers connect
When I select Deposits and withdrawals, the lighter band shows how much withdrawals took off the deposit subtotal. The dashed line shows where that leaves the balance. The gap from that line to the actual balance shows what investments added or took away in dollars.
Keep the chart in place
I tried putting the comparison in a box under the chart. It pushed the cards down when I selected Investment change. I moved the amount into the existing legend so the chart and cards stay in place. I also tried animating the fills. It was hard to tell what the motion meant, so I kept the opening line draw and made the highlights static. Pick a month with a tap or the arrow keys and the chart, amounts, and activity update together.
What I looked at
Fidelity breaks down what changed an account balance. Schwab compares account value with net contributions. Wealthfront explains why the timing of money going in and out matters when you calculate a return. I kept this view focused on the change in dollars.
What I checked
I checked that the amounts add up for every selectable date across the three periods. I also checked the chart and cards at phone widths and selected dates and cards with the keyboard.
What I’d test next
I’d hand someone the phone and ask why the balance fell after they added money. Then I’d ask them to find a withdrawal, explain the dashed line, and point to the balance for an earlier month. I’m curious whether the two shaded areas read as money in and money out on a first look. Client testing is next.
Try the prototype
This prototype uses fictional data.
Sources
Have questions about the workflow, the prototype, or the design decisions? Happy to walk through it live.