Before I worked for Morningstar, I was an admirer of their data visualizations and reports. The clarity, the precision, the quality. The polish. I wondered: what were they doing differently? A few years after I joined the company, I took on a project that encapsulated what was historically effective about the design practice there, and how I could contribute as a first-and-only user researcher.
Challenge
This story is about equity investing, and if you’re not familiar, you need to know a few basics about people who trade on fundamentals: When you buy a share of stock, you’re not making a bet—you’re buying growth and future returns. You want a piece of a certain company because you think it will increase in value, pay out dividends, and so on. A savvy investor wants to buy at or below the fair market value of the stock price so they can boost their chances of success and enjoy more of the upside growth. In short, they’re looking for a bargain price on a high-quality item.
By 2014, Morningstar had fair market valuation estimates on individual stock tickers that could also be rolled up into sector or geographic views, but they were still working out a signature method to display the data. Those signature assets, such as the famous star rating for mutual funds, are their library of flagship IP that gets used across products and regions. There was a product team dedicated to producing and distributing signature assets, but the upfront design work involved intensive rounds of debate amongst subject matter experts and leadership. This particular debate included the founder, the original designer of the brand system, people who had defined the underlying ratings methodology, and people who had shepherded past works of similar importance.
This team was doing great work and had all the right people in the room, but they became stuck on a single, crucial design decision and needed data to be the tie-breaker.
The problem was a one-way door decision about color, and it was down to red/green versus blue/orange. Most of the team wanted to use blue/orange to communicate a warmer/cooler metaphor, but there was concern that this would be odd for a financial audience and thus harder to learn. You need consensus on this kind of choice—if you’re reserving precisely defined colors in your design system and rolling out a new chart type across many products and regions, knowing that real-life decisions will be made with it, you can’t A/B test it or guess. You have to get it right.
Approach
Having been there for a few years, and having recently tested a product that used an early version of the new chart, I understood the team’s dilemma and the stakes immediately. I built a visual survey using a within-subjects design where everyone saw both variations of the chart’s color scheme, and sent it to two key cohorts of people: retail subscribers who pay for the ratings, and internal teams who produce and sell the supporting equity data. These are groups that should know the context, and needed to understand the new color scheme.
Survey flow
- Several short “first-click” tasks to interpret the meaning (under- vs over-valued) from the red/green and blue/orange version of the charts
- Closed-ended question to gauge their preference between the color schemes
- Open-ended question to comment on their choice
The survey went out smoothly, the data came back conclusively, and it was time to share the results. Normally, you would expect a big project like this to conclude with a slide deck presented to the whole team, then debated again in a conference room—but this project was different, and I was happy to roll with it! It was summer, and two of the executives were going to meet up on their vacation time to make a decision so the subsequent work could move ahead. For that meeting, the team printed out a tabloid-sized dossier of the design exploration and what had been tried and ruled out. I added a summary of the survey, screenshots recapping the exact contents and results, and a brief commentary with my interpretation and recommendation.
Here’s what I recommended:
Reframe the problem—this design problem is about meaning, not color choice.
- Don’t use red/green simply because it’s familiar to most people at a glance—it does not suit the valuation concept and will cause more confusion in the long run with our existing red/green assets. Also, this is culturally loaded and causes further inconvenience for our color blind users.
Focus on the most familiar and actionable metaphor, and solve for that in the design.
- Temperature, thermometer, “hot and cold” is what seems to make the most sense to users when they think about valuation, so use that mental model.
- Try a non-binary approach, such as one color at 5 steps of intensity, or patterns. (More hot vs. less hot)
Bottom line: help investors see whatever opportunity the data represents. Can I make money here? Should I stay away and look elsewhere? Given a choice between distinctive and intuitive, err on the side of intuitive first, and distinctive second.
Impact
The team moved forward with blue and orange.
Explore Morningstar’s fair value charts.
The takeaway for researchers and strategists is this: Respect the history and decision-making culture of an established company, and work with it. Know what the team is stuck on, and use your skills to help them keep moving.
Fun fact: in east Asian markets, red and green have different cultural associations, so their localized color coding for price charts is the inverse of other markets.
Interested in working together? Get in touch.