Lead Product Designer
Go to LinkedIn
This interaction was part of an app used by financial advisors. Their workflow is illustrated in the storyboard above:
When the advisor comes to the page, it presents the information needed to calculate and optimize a married couple's taxes. In this case, all three drop downs affect each other, as well as the tax rate table below.
This page is prepopulated with information we already have. In the vast majority of cases, advisors won't need to make any edits. They can just hit Continue and be on their way.
In the rare case that the advisor needs to adjust the tax rates, they can do so inline in the table. We use a pen icon as an inline editing button throughout the app.
When the advisor clicks the pen icon after Martina's name, her tax column splits into two:
The same interaction is available for the spouse or partner. This is an example of not simplifying the functionality to a lay person's level. Financial advisors are used to complex interactions in tabular data.
1. Text only
I included this version in the user testing only because it would require minimal Development effort. We'd simply add a line to the details boxes at the bottom of the page with a cost estimate.
4. Interactive slider
There's even less information in this version, but I think that if we can get users to engage with it, the impact will be much stronger.
3. Static bar graph
There's less information in the bar graph, because it assumes that you've invested $10,000. But the visual impact is greater than with a table.
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
MADE IN PIXEL TOGETHER