Data Tables for ADL

Adyen's ADL overhaul transforms financial data handling with innovative tables and grids.

Senior Product Designer
2018 2021
Design System
UI Design

Twenty percent of my time was allocated to contributing to Adyen's Design System. Initially built from scratch in Sketch during 2017-2018, we subsequently transitioned all components and templates to Figma in 2019 to leverage its collaborative features and enhance our design workflows.



Audit current designs to identify common patterns and potential reusable components. Establish a list of standard elements to enhance UI consistency.


Collaborate with designers and developers to define clear specifications for the components. Document all functional and aesthetic expectations.


Create and refine visual mockups and prototypes based on the agreed specifications. Iteratively adjust designs incorporating stakeholder feedback.


Conduct user and code testing to ensure usability and technical performance. Address any issues to meet web standards and user expectations.


Integrate and document finalized components in the company-wide Storybook for Vue.js. This central repository allows easy access and implementation across projects.


Table designs

A main design for the table

Column freeze

Column freezing option

Column presets

I suggested we should create column presets for different data types. In the end we had around 16 of them (e.g. Payment Methods, Countries, DateTime, Amount, etc)


Copyright © 2024 by Grzegorz Hadala. All assets, artworks, and screenshots are copyright of their respective owners.

I'm available for new opportunities