Data Tables for ADL

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

Role
Senior Product Designer
2018 2021
Expertise
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.

Requirements

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

Requirements

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

Design

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

Testing

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

Implementation

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)

Find me on

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

Currently at Pyth.network 👨‍💻