Morgan Stanley, like many major corporations around the world, manages large amounts of data on a wide range of topics. Similar to other companies, they utilize internal research portals, intranets, and dashboards to track this information. They aim to visualize the data in ways that go beyond just standard tables.

​

When designing for the financial world, at some point, someone will say the dreaded word "heatmap". Sometimes they want to apply it to a map, others (like here) want to apply it to a table of data, indicating that the data is good, bad or some level in between. Frankly, heatmaps are a bit of a nightmare from a UX/UI point of view, but also a development one as well. 

​

The challenge for user experience designers is determining how many levels exist between red and green. Should there be 5, 10, or 20 levels? How detailed is your data? 

 

On the technical side, designers must define the thresholds—specifically, at what point does a number become "bad" or "good"? From a user interface perspective, it’s important to choose the appropriate colors that represent the various levels. Are the shades and tints distinct enough to show users a change? 

 

When designing for individuals with color blindness, which we should always consider, as many people are affected by it, it’s crucial to assess whether the text color contrasts well against the background. Does it also maintain readability for those without color blindness? Should we include visual cues, such as up or down arrows, to indicate any changes? Lastly, is there enough space in the table to accommodate these elements?

​

Then, after you've spent time picking all the right hex codes and verifying with the tech team that they can build it, someone will come along and say, "It's too bright, can you dial it back?".

​

In the end, we got a great heatmap that everyone was happy with, with an enlightening journey for all along the way.

​

Thanks for reading.

​