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)
Adyen's a data-rich platform demands a seamless experience, particularly when sifting through vast amounts of information—akin to finding a needle in a haystack. To enhance this experience, I developed a comprehensive 19-page Google Doc detailing every potential use for data grids and tables. This document helped in rallying a team to make this component accessible to other designers and front-end developers.
I drew significant inspiration from Airtable, my favorite data grid app. I admired its features and adapted some to meet our specific needs:
Data Types: Cell formatting is based on the data type received. For those interested in refining the aesthetics, I have prepared a Presets file in our library, featuring commonly used micro-components like payment method icons and currency amounts.
Sorting and Grouping: Users often need to group datasets by criteria such as payment method or status. For instance, focusing on rejected payments made with Visa cards enhances the usability of our data tools.
Column Management: With datasets sometimes exceeding 20 columns, I explored ways to consolidate related information. An example includes displaying shopper names and addresses in two stacked lines within a single column, rather than separate columns, making the data easier to digest and analyze.
This approach not only streamlines the data interaction on Adyen’s platform but also fosters collaboration among team members, leveraging shared components for efficiency and consistency.
