2020 / Adyen

Creating a smooth experience on working with financial data

One of the crucial components inside Adyen's Design System was to entirely revamp the way we work with financial data using tables and data grids.

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)

An example of a full composition of a table.

Supporting components: Grouping and sorting by data fields, organizing columns and setting the row height.

Different cell heights

Border styles: Bottom, Bordered, None

Accessibility interactions: using keyboard to navigate and interact with data set (here selecting a range of entries by holding SHIFT key)

Supporting truncated data with tooltips

My role as Product Designer at Adyen

Amsterdam / Sep 2018 — Mar 2021

Adyen gave me an opportunity to work for enterprise customers by designing financial workflows at the Treasury stream, and then, after moving to Shopper Risk, helping with revamping the experience of risk management. I contributed to the design system, participate in hackatons (as a winning team) and for the team well-being. 

I also worked on: