Commodities Weekly Report
Tags: Dataviz, Fintech, UX, Design Systems, Interaction Design

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.

Neurial Grotesk

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.

Monospace

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 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-color 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

Data Visualisation 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.