Adyen's ADL overhaul transforms financial data handling with innovative tables and grids.
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.
A main design for the table
Column freezing option
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)
