Resume
Twitter UXcecilia
LinkedIn

UX Designer

Customers used this Investment Scorecard to validate the company's 401(k) investment advice.

Simplifying Information

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.

BUSINESS BACKGROUND

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: 


  1. Because the company's primary relationship is with the user's employer, they have access to data about all funds offered in the employer's 401(k) plan. This includes the many employer-specific funds not available on other financial sites.
  2. The company aims to break down complex financial information in ways that the average consumer can understand. 


The Scorecards were consistently among the Top 10 Visited Pages. 

My first step was to inventory the Scorecard from the 90s.

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.

  • Better reflect consumer values, needs and wants
  • Easier to understand for people outside the financial industry
  • More accessible to disabled people
  • Brand adherence and contemporary look and feel
  • Mobile friendly
  • Launch! Negotiate compromises to get the project into Production. 

We decided on the following objectives:

Let's take a look at the new Investment Scorecard 
section by section.

Historical performance

Historical performance graph

But wait, there's more...

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. 

Cost to own

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.

Accessibility

In the top section of the Investment Scorecard, you can see that we've increased the contrast, e.g. on the bars. That helps color blind people, i.e. ~8% of American men.

I also added a word to describe the value from Not Great to Best. That way it matters less if the user can see the bars or not.

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

We wanted to make the information easier to digest for financial lay people. A proven way of doing that, is to introduce interactivity that allows users to seek their own answers.

We followed the lead of most financial sites by adding a hover state for date-specific price information, and a way to narrow down the time you're looking at.

We also made the element much larger and more prominent on the page. 

Improving comprehension through interaction

Many of our customers say that they want more help understanding financial concepts. The old Scorecard provided customer education through pop-up windows. They often contained chapters of financial books for lay people that early senior staff had written. I edited the text for the online medium and greatly reduced the word count. 


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. 

Contextual glossary

Data visualization

New: Bar chart with labels

Old: Pie chart with legend

Our own, as well as third party, research shows that bar charts are easier to understand than pie charts with a legend attached. 

Determining the relative sizes of categories is more or less instantaneous in a bar graph. That's the main purpose of this graph, so we went with the bars.