Creating a smooth experience on working with financial data

20% of my time was designated for contributing to Adyen's Design System. It was built from the ground up in Sketch (2017-2018) then we migrated everything to Figma in 2019. 

Adyen is a data-heavy platform so it's key to have a smooth experience while trying to find a needle in a haystack. This is why I scoped out the project, wrote a massive Google Doc (19 pages) of all the possibilities that you can do with a data grid (or table) and looked for a team to help me out making this component available for other designers and front-end developers.

I was heavily inspired by my favourite data grid app of all time: Airtable. The coolest features I find there are and applied some of them to our needs were:

• Data types - formatting cells is based on the received data type, therefore, if you'd like to focus on improving the styling of it, you can jump into a Presets file where I created a library of commonly used micro-components (payment method name with icon, currency with an amount, etc)
• Sorting and grouping - in most cases users wanted to group data-set by a payment method or a payment status, e.g. to focus only on rejected payments made with Visa cards
• Column management - sometimes data-sets were returning 20+ columns of data. This was an opportunity to try to merge certain (dependable, similar) piece of information and render in one group (e.g. shopper name with shopper address in two lines instead of two columns)