Customers used this Investment Scorecard to validate the company's 401(k) investment advice.
The existing Scorecard was designed in the 90s, without the benefit of user research. Some elements were so incomprehensible that internal stakeholders had trouble understanding them.
To help investors understand the funds and equities available to them, a financial services company provides an Investment Scorecard for each of them. The Scorecards add value to the user in two ways:
The Scorecards were consistently among the Top 10 Visited Pages.
Then I performed comprehension user testing on the old Scorecard.
Running unfacilitated tests on UserTesting.com, with the stimuli on Survey Monkey, gave me a pretty good read of what participants did and didn't understand.
Many lay people do not know that the cost to own a fund varies widely. The cost can and will eat into any profits you make, so it's one of the most important considerations when investing. To help our customers understand that, I designed four variations on a Cost-to-Own feature with the help of our financial SME.
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.
2. Table
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
Cost-to-Own Wireframes
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.
2. Table
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
Cost-to-Own Wireframes
Reprioritizing information
Armed with years of internal and external research, we had many serious discusions with business stakeholders about customer priorities. The result was the compromise on the right. It's not perfect, but it's much closer to consumer wishes than the previous version on the left.
The biggest win was surfacing historical performance. The argument that won the day was that we need to meet customers where they are. Otherwise we risk talking to dead air.
Old: Yellow on yellow is nearly invisible.
While the visual designer had an updated brand styleguide, he also had to create many new elements. Those became part of the styleguide and are still in use today.
The new Risk visualization treats risk as a sweet spot, rather than a bad thing. That's why both ends of the graphic are dark. It's unorthodox, but more in line with both our customers' and the company's way of seeing investment risk.
Contemporary look and feel
Old visualization: Bad Thing
New visualization: Sweet Spot
New visualization: Large and interactive
Old visualization: Small and static
Instead of pop-ups we introduced a slide-in from the right. That way the user can read the glossary at the same time as they try to digest information about one of their funds. Interested customers can also read through the entire glossary through a linked index.
New: Bar chart with labels
Old: Pie chart with legend
More Projects
Highlighted Projects
Design Process