A guide on how to structure and visualize financial data from chart and color basics to user-centered interactions.
--
Have you ever struggled to find a quick answer for your boss, client, or co-worker because you got lost in data overload? You’re not alone.
The answer is often hidden somewhere in between layering tables, graphs, and numbers all packed into one screen. But by introducing intuitive interactions and structure we can improve daily performance to search and read complex data more effortlessly. I’ve had the chance to explore this topic while working on a project that designed an Analytics Hub for the banking software provider, Avaloq. Through reflecting on this project, I will provide 5 steps that look into the interactivity and visual elements of data visualization.
In the process, we revealed how financial data can be displayed with more clarity and efficiency. By applying Edward Tufte’s philosophy of minimalism and balancing data visualization with user needs, managers can investigate further into their client’s portfolio for specific dates, allocation, and performance to help quickly find and answer complex financial questions.
Our goal was to help Investment Advisors (IAs) or Portfolio Managers (PMs) to find quick answers, for certain scenarios, such as trying to explain to a customer over the phone why there was a drop in their portfolio.
Our challenge was to simplify the display of information and put answers at the forefront of our design.
Two important methods to ensure success and a fruitful process are:
1. Good collaboration with your client — through a series of workshops we printed out screen layouts and tried to understand the function of each chart and the data source. We then stripped each one down to its basics and slowly started adding and enhancing the features that were needed.
2. User Testing — find out which chart features are really needed to balance understanding and usability.
It’s not just the chart itself that determines its readability but also its placement and surroundings. We wanted to create a dashboard layout that would guide the user quickly to their end goal.
The following criteria helped determine a chart’s placement:
- Purpose — A good criterion to decide where to place your chart on a screen is its purpose and relationship with other charts.
- Write out the questions the chart is aimed to answer. Are there supporting or related questions?
-Visualize these together on simple block layouts.
-Purpose-based placement will help the user find answers more quickly within the data. - Storytelling — What general story should the charts help you tell? Once you understand the questions each chart is meant to answer and in which order the answers should be revealed, then it will also become more clear what the story can tell, not only of the story of data, but the story the layout reveals.
- Static vs Interactive — In certain cases, separating static from dynamic charts helps to create a dashboard, by simply separating charts with functions (interactive) versus read-only charts (static).
I.e. non-clickable KPI’s which provide readable at a glance info, versus graphs that provide drill downs and filter functionality
As you know there are various chart types, and several specific to investment banking, but it’s important to focus on the most fundamental first and build up. By building a foundation and understanding each one we could select the chart that provides the fastest answer and best story to represent the data.
Here are a few common examples of charts and their usage:
Bar charts: for comparison, trends, and distribution.
In finance: helps to show allocation and contribution.
Waterfall charts: for trends or comparison over time.
In finance: helps to tell a story and to show the contribution to performance and allocation. For example, in our project, we choose the waterfall chart as a priority instead of a bar chart, since the waterfall chart helps visualize the story of the contribution of allocation much faster.
Donut charts: part-to-whole analysis.
In finance: commonly used to show the portfolio’s exposure.
Stacked charts: part-to-whole analysis
In finance: also useful for showing the portfolio’s exposure but horizontally.
Bubble chart: best to compare three dimensions of data without relying on color or 3D charts.
In finance: good for comparison and correlations, commonly used to represent risk/return.
Line chart: for trends and comparisons.
In finance: used for performance over time.
Area chart: for trends and part-to-whole charts.
In finance: helps to show wealth evolution or multiple portfolios over time.
Gauge: A part-to-whole chart.
In finance: most commonly used to show the risk level of a portfolio.
From a designer’s perspective, I would advise having a full understanding of the chart types, it helps to make better decisions and have clear discussions with the expert users or clients. These small enhancements and discussions (such as the waterfall chart example above) increase the quality of your platform through thoughtful data visualization.
While working closely with our client to fully understand the data source, we determined that our solution would allow for interactive charts, including drill-downs and dynamic charts that constantly adapt to the new data points.
Below I point out methods to keep in mind in order to make sure your dashboard supports interactive charts in an efficient manner:
- Traceability: As users drill down into their charts, they need to be able to retrace their path in the data in order to provide an answer and explanation to their client. A solution could be dynamic navigation and chips.
- Data Trailing: If the chart layout spans across multiple screens (or tabs) create a simple link between each of them. Allow your software to memorize the user selection as they navigate across the screens to help them analyze the data faster.
- Consistency: If all charts keep the same anatomy, the faster your user will be able to navigate through the dashboard. Not just charts, but also filters and navigation.
Ultimately supporting clear and easy navigation in the platform is the best way to help your users find their answers quickly. By following these three methods you will already have a jump start in achieving an easy-to-use and navigate dashboard.
Color is one of the most important things to clarify data visualization but it is also frequently misused. Color behavior is the way colors work together in charts, which guides the user in understanding patterns, so remember to use them purposefully. A consistent scheme helps your user develop a mental map of the data.
Patterns to learn when designing your charts:
- Categorical colors: colors that are visually equidistant and have a multi-hue pattern. This helps the users distinguish the differences and cross-reference the categories.
- Sequential colors: colors that follow the same hue, mean a gradation of color.
- Diverging colors: this pattern is used when you have two extremes, especially useful for positive and negative values.
- Comparison colors: when trying to allow comparison of values, colors need to not conflict with the main palette.
Once you understand the patterns above it’s much easier to experiment with different color palettes. Defining color behavior increases flexibility and allows you to replace a color palette at any moment, for instance, if you are designing for a white label platform.
An example of how color behavior helped us in our project: We had two categorical color palettes, main and secondary, we used the main to show the primary portfolio colors that were fixed (liquidity, equity, fixed income, etc.). The secondary was used for grouping or comparison of graphs for example currency, region, sector, etc.
Two things to keep in mind when defining a color palette:
- Accessibility — To design accessible charts choose enough variation in your hues and always test your color palette with accessibility tools such as the “Stark” plugin for Figma.
- Industry-driven color palettes — help the user’s experience and subconscious workflow. For example, choosing bright neon colors for a U.S. electoral or polling chart would not be as fitting as red blues and whites.
I hope this guide saves you time researching and adds confidence to how you approach data visualization in finance. I highly recommend checking the links and books shared below and letting the experts speak for themselves. Like in all projects, successful systems take time and patience and even the project referred to in this article is still being iterated on as time continues.
Do you have any thoughts or tips on creating dashboards? Do let us know in the comments.
Thanks for reading and happy designing!
Special thanks to the design team, Nathan Ben Hamou, Lei Zhang, Galatea Mancini, and to our very supportive client Avaloq. For content editing on this blog post thank you to Tiago Pedras, Jessica Mueller, Romain Allemann, and Leila Strebel.
Resources:
For dashboard layouts:
https://material.io/design/communication/data-visualization.html#dashboards
Useful resources about chart types and categories:
https://material.io/design/communication/data-visualization.html#types
https://www.ibm.com/design/language/data-visualization/charts
For a great explanation on color refer to:
Chapter one in The Big Book of Dashboards: Visualizing Your Data Using Real-World Business Scenarios by Steve Wexler, Jeffrey Shaffer, and Andy Cotgreave.
https://medium.com/carbondesign/color-palettes-and-accessibility-features-for-data-visualization-7869f4874fca
And finally a nice read on data visualization is:
Visual Display of Quantitative Information by Edward Tufte.
