Better Data Tables for ADL

Data-table system for Adyen's design language: column freeze, 16 column presets, shipped to Storybook.

Client: Adyen
Role: Product Designer · Treasury
Timeline: 2018 — 202023 months
Skills: Design System, UI Design

Overview

I spent 20% of my time on ADL, Adyen's design system — built in Sketch in 2017–18 and moved to Figma in 2019. My focus was data tables: the most-used and most complex component in a company built on financial data.

Process

01
Audit
Audited tables across Adyen's products to find shared patterns and inconsistencies.
02
Requirements
Defined specs with designers and engineers, covering behaviour, states and visual rules.
03
Design
Designed and prototyped the table system, iterating on stakeholder feedback.
04
Testing
Tested with users and in code for usability, performance and accessibility.
05
Implementation
Documented and shipped the components to ADL's Vue.js Storybook, used across Adyen's products.

Results

Table designs
The core table: dense, scannable and consistent across products.
Column freeze
Freeze key columns, such as payment ID, while scrolling wide financial data.
Column presets
My proposal: ready-made column types for common data (payment methods, countries, dates, amounts). We shipped 16, so teams no longer re-solved formatting for every table.