Data visualisation case study
Start date: Friday 8 Mar, 2018
End date: Tuesday 12 Mar, 2018
The brief.
On Friday 8th of March I received the brief to build a data visualisation tool to enhance visibility of price changes into a weekly report on 5 commodities.
It took me approximately 4–5 days to provide a viable and scalable solution. Here’s how I did it!
The Challenge.
Research
The first thing I did is to understand what actually is the challenge? So I asked myself:
What problems are you trying to solve?
What obstacle must you overcome?
Inside the brief, I highlighted a few sentences:
- The users are finding it difficult to visualize how the stocks have performed over the week…
Though my experience I know that the best way to visualize volatility is to use a heat-map so later I will focus my research on it. - Allows the users to be more efficient and accurate…
Well, that’s my job. - Users want to visualize the end of day prices across all commodities.
Noted. - Users want to visualize which commodity has had the largest % changes (biggest gains and losses and on what days these occurred).
This sentences is more precise - it’s the main value of the reports. - Users want to see price changes by sector and then be able to drill into each by commodity.
I’m not sure of what I’m suppose to do as price by sectors are not available into the data-set. However, in this case I will propose a global weekly price then later I will see with users if they want a sub-level of data. - Users want to combine the data visualisation with the original raw data.
Ok, the table should be available all time.
User Persona.
Research
Now, having structured the problems and pains that I need to solve, it’s time to know more from the users point of view. So, I’m creating an hypothetical user from existing persons (to help me on my quest).
Sales, Trader, Research analyst
Front-Office staff
Analyst, Associate, VP who is reporting to Director or MD
Commodities
Energy, Base metals, Precious metals
Solution.
Research
My first stop was to collaborate with an e-sales rep for an energy platform, I explain the brief and I ask him the following questions :
What are the ideal desired outcomes?
What do you want to achieve?
Though conversation, he confirmed my hypotheses and gave me good tips to realize my heat-map. He shared with me similar use case and give me his feedback on it.
After our conversation I was ready to dive into concepts, starting with a draft of a heat-map based on what we discussed. My objective was to focus on the main scenario and how users are feeling when they’re looking at the heat map.
Iterative Test.
Prototype & Usability Test.
To improve the interface I’m meeting 5 Commodities professionals:
2 Energy & Metals Sales reps.
1 Commodities Derivatives Risk Manager.
1 Clearing sales agency.
1 Back-office Data manager.
Based on Don Norman’s method, a group of 5 people can help you to fix 80% of usability problem. So, I had my 5.
I created a chat room with those people to introduce my prototype. the experience was great, I launched the topic and users asked questions all together. They made plenty of suggestion to enhance the reports.
In the diagram below you can see the user journey of the report: the grey cases is the main use case, the others are what we added with users to facilitated the user on-boarding:
Finally, I have been able to provide an MVP that you can see through this video or by clinking into the link in the description:
Design system
It’s important to understand my design decisions so let my introduce a bit of my design system.
Golden Ratio
The Golden Ratio is a value that you can observe everywhere in the natural world, you can observe it in bodies, face shapes, flowers etc…
The ratio has been a deep inspiration for plenty of creatives for centuries, so it can be seen in painting, architecture or multinational logo.
The reason that the ratio is so useful is that it seems that shapes that adhere to the ratio are more aesthetically pleasing -if you want to know more about golden ratio I strongly recommend to read this topic on Quora.
So, I use the ratio 1.618 to provide basic interface sizes such as…
Display Sizes:
Layout Composition:
And page components — in this case the size of the heat-map boxes:
Respecting this ratio allow to do a scalable interface, to add and remove modules, widgets, titles as I want, while keeping to a rigid aesthetic. Overall this means that adding new features shouldn’t be a problem in the future.
Typography.
Most of the time 95% of website content is typography, so this is the most important variable of a design system. In banking and data industry there are a lot of numbers — so It’s best to choose a typeface that work for letters and numbers.
I chose to use Neurial Grotesk for the following reasons:
The Grotesque fonts are timeless; they have been used over the years and in plenty of media, from store fronts to posters and today on plenty of interfaces. This is super readable typeface on small and big size and especially for numbers. It allow to build a strong hierarchy with multiple levels, and it’s essential to build complex interfaces to display large amount of data. Also they come with plenty of font-settings, to adjust the spacings depending on the use case great example is the monospace font for pricing to align every numbers and clearly visualise which one is changing.
The style of Neurial Grotesk is deeply inspired by Europeen print industry during the golden age of offset printing.
Colours and accessibility
The goal of those colours is to create a hierarchy between items, the colours level is define by the visibility and it based on WCAG contrast ratio, also I define 3 categories of colours:
1- Background levels
Background level 1 is the lowest level it means that is the default body background. It’s the darker one too, it allow to get anything on this surface more visible. The dark colour allow a better contrast ratio for anything above, instead of white backgrounds are more limited.
Background level 2 is for all elevated surface, which is part of the layout like cards, sidebar area… this background enhance the visibility of the area is for content that user want to see.
Background level 3 is for super elevated area, which is not part of the layout like modal, dropdown menu… This background is breaking user’s focus, you should use for information that user needs.
2- Text colours levels
Text level 1 has an exceptional contrast level, it’s super visible, to do not disrupt and tire the user it should be used with sparingly. we will use for first title, eco-system feature and highlighted information.
Text level 2 has a good contrast level not to bright and still visible so it will be used as default text colour.
Text level 3 has a lowest readable contrast ratio, we will use it for subtitle or to enhance the visibility to another item.
Text level 4 is not readable we use it for structure (border, bullet point) and for big icons if it’s relevant.
3- Dataviz colours
The goal of those colours is to offer readability for large and small black text and the difference between each other should be noticeable.
I’m not satisfy about those colours I need to do A/B testing to enhance the usability of the heat-map. I want to test other colours and measure the time spent between users landing and click on the heat-map.
Bring it to life.
Conclusion
To conclude this article I would introduce this design process to test and improve products. The goal is to make dynamic projects always up to date to offer the best user experience again and again.
