Fintech — Data Visualization

The following heat map displays how value of spend for certain categories changed over two period of times.

The size of the box represents relative size of the spend and colors indicated whether the spend increased or decreased in comparison to the previous period.

Pain point: User is confused with how the visualization works.

First approach

The first thing to do was to get the budgets organized from small to large and place it on the Y axis and normally time periods go on the X. This would be a quick solution.

On hover info would display.

In many cases, simpler visualizations such as bar charts are preferred.

Second approach

Just in case the client was adamant about keeping a heat map, was to leave out the all the guessing out and use copy to communicate what exactly is going on.

Circles replaced the rectangles to represent wholeness.

The round shapes give the feeling of mystery, allowing users to interact and reveal information.

A good practice of using a visually distinct border around a selected section of with additional details about the category in a popup window.

A second overview perspective was introduced to view by category.

The second view option provides the essential information that the user can absorb quickly, without having to think. The information can be consumed fast, with minimum interaction or cognitive processing.