Linked In Profile of Cecilia Huster

Simplifying Information

To help clients' employees 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. 

Investment Scorecards help clients' employees make decisions for their 401(k) plans.

Business Context

Content audit of existing Scorecards

These were the goals the visual designer and I agreed on when we started the project. 

  • 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
  • Responsive design
  • Launch! Negotiate compromises to get the project into Production. 

Redesign Goals

Existing Scorecards

The existing Scorecards were designed without the benefit of user research. Some elements were so incomprehensible that internal stakeholders didn't understand them. 


For this project I was the lead designer and worked with a visual designer for some parts. I started by auditing the existing pages and tried to understand them. 


Then I ran comprehension tests on UserTesting.com with the stimuli on SurveyMonkey. 

Redesigned Investment Scorecard
New Investment Scorecard top in Production.

Historical performance

Historical performance graph
Investment risk graph, using the "sweet spot" metaphor.
Investment style bar 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. 

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.

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 were still in use when I left the company a few years later. 


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 2010s Look and Feel

Old visualization: Risk is bad

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.