Metro Bank Design System
After joining Metro Bank one of the first initiatives I have undertaken has been creating a design system. This project involved creating modular architecture, comprehensive documentation and style guides, facilitating seamless integration and enhanced user experiences through improved aesthetics, accessibility, and usability. I have also placed attention on ways of working with developers to ensure consistency, efficiency, and brand alignment. I have also created a system to document and communicate accessibility requirements, and a set of icons and 3D illustrations.
Role
Role
Year
2019-2024
Tools
Sketch, Figma, Invision, Miro, Lookback, UserTesting.com, Treejack, Google Analytics, Heap, 3DS Max, V-Ray
Techniques
Moderated usability testing, card sorting, tree testing, analytics, domain expert interviews, user interviews, stakeholder workshops
Challenges
Inconsistent user interfaces across products led to confusion and a fragmented brand experience.
Multiple teams used varied design standards, resulting in inefficient workflows and higher development costs.
Lack of a unified design system caused delays in product updates and hindered overall user experience consistency.
Problem 1
Problem 1
Results
Figma component library, synced with code component library
New visual language
System to document and communicate accessibility requirements
Custom icon library in 3 different sizes
Library of 3D illustrations
Metro Bank Design System
After joining Metro Bank one of the first initiatives I have undertaken has been creating a design system. This project involved creating modular architecture, comprehensive documentation and style guides, facilitating seamless integration and enhanced user experiences through improved aesthetics, accessibility, and usability. I have also placed attention on ways of working with developers to ensure consistency, efficiency, and brand alignment. I have also created a system to document and communicate accessibility requirements, and a set of icons and 3D illustrations.
Role
Role
Year
2019-2024
Tools
Sketch, Figma, Invision, Miro, Lookback, UserTesting.com, Treejack, Google Analytics, Heap, 3DS Max, V-Ray
Techniques
Moderated usability testing, card sorting, tree testing, analytics, domain expert interviews, user interviews, stakeholder workshops
Challenges
Inconsistent user interfaces across products led to confusion and a fragmented brand experience.
Multiple teams used varied design standards, resulting in inefficient workflows and higher development costs.
Lack of a unified design system caused delays in product updates and hindered overall user experience consistency.
Problem 1
Problem 1
Results
Figma component library, synced with code component library
New visual language
System to document and communicate accessibility requirements
Custom icon library in 3 different sizes
Library of 3D illustrations
Metro Bank Design System
After joining Metro Bank one of the first initiatives I have undertaken has been creating a design system. This project involved creating modular architecture, comprehensive documentation and style guides, facilitating seamless integration and enhanced user experiences through improved aesthetics, accessibility, and usability. I have also placed attention on ways of working with developers to ensure consistency, efficiency, and brand alignment. I have also created a system to document and communicate accessibility requirements, and a set of icons and 3D illustrations.
Role
Role
Year
2019-2024
Tools
Sketch, Figma, Invision, Miro, Lookback, UserTesting.com, Treejack, Google Analytics, Heap, 3DS Max, V-Ray
Techniques
Moderated usability testing, card sorting, tree testing, analytics, domain expert interviews, user interviews, stakeholder workshops
Challenges
Inconsistent user interfaces across products led to confusion and a fragmented brand experience.
Multiple teams used varied design standards, resulting in inefficient workflows and higher development costs.
Lack of a unified design system caused delays in product updates and hindered overall user experience consistency.
Problem 1
Problem 1
Results
Figma component library, synced with code component library
New visual language
System to document and communicate accessibility requirements
Custom icon library in 3 different sizes
Library of 3D illustrations
2024, Antonio Mattucci
2024, Antonio Mattucci
2024, Antonio Mattucci