There are hundreds and thousands of infographics floating around, but what you see in the majority of cases is just the final image of a whole decision-making process. As we are passionate designers at Interactive Things, we have always been very interested in the processes behind the scenes. Did you ever wonder how an infographic is originated or if your own approach differs from others? We would like to share the development process of our latest work for FreshBooks.
FreshBooks is one of the leading providers for online invoicing and time tracking services on the internet. They have acquired a lot of customers all over the world due to their open-mindedness, professionalism and user-friendly interfaces. It is hardly surprising that FreshBooks have collected an impressing amount of various data, like invoice sizes and payment periods, being successfully active since 2003. Because FreshBooks aren’t cagey about these numbers and they want to share them in their blog, they asked us to unveil an interesting story on these data and visualize it.
„How 1 Billion Dollar flowed through the FreshBooks System?“ is the story we want to tell; the story on how the average invoice size and payment periods are arranged in different countries. In some countries, like China, people are remarkably dutiful and pay their bills as fast as they can, whereas in other countries, like India for example, people exhibit a more lax payment behavior. Mexico ranks first regarding the average invoice size, whereas in Malayasia the service seems to be mostly utilized for smaller amounts. Our goal was to make these interesting differences visible and to possibly even disclose undetected patterns by comparing invoice size and payment period.
There are several possibilities to make data comparable and to visualize different amounts and time periods. To provide a simple cognition of values belonging to different countries, using a map is a viable and convincing option. So, to begin with we tried to integrate all the data directly into a reduced world map and started with some sketches.
￼In the draft above, the average invoice size is indicated by the size of the circles. The angle of the darker segment of the circle depicts the average payment period.
Combining both information in one single shape, however, seems not to be optimal: If the invoice size, and thus the respective circle, is small, the dark segment depicting the payment period is very hard to read. But even if the circles were all the same size, the visualization of payment periods with segments wouldn’t be ideal for comparing the values. That is why we decided to keep it simple and to integrate only the invoice sizes into the map, visualizing them with bubbles. Furthermore, we opted for bar charts to depict the payment periods and the invoice sizes in order to improve the readability, especially regarding possible dependencies:
￼If you design infographics yourself, you are familiar with the situation in which some data throws a spanner in the works and seems to mess up your whole concept. In our case, the average invoice sizes of European countries are the biggest and the density of the data is the highest, thus there is not enough space to place the bubbles on their actual location. To solve this problem we added a magnifier. Now, the bubbles still overlap, but they correspond with the respective European countries, which was our intention – the map should just serve for quick orientation, actually comparing the different values is more effective with the additional bar chart.
￼In order to increase the readability regarding a comparison of the data, we combined the two bar charts. The green bars indicate the average invoice sizes in dollar, the blue ones stand for the average payment periods in days. We decided not to use a scale, but to label all bars separately instead. On the left we added the overall average which acts as an underline at the same time:
Lastly, we connected the bars with the corresponding bubbles and added a header and a footer. And this is what the final infographic, the result of our decision-making process, looks like:
What‘s your conclusion? Would you have made other decisions or do you have another approach for designing infographics altogether? We are very interested in your opinion, so please share your thoughts in the comments below.
This project was realized by Interactive Things. As the publisher of Datavisualization.ch we regularly give you insights into the development processes of our own work.