Design system for banking & investment web apps
Design system for banking & investment web apps
Design system for banking & investment web apps
My role
My role
My role
My role
Senior Product Designer
Senior Product Designer
Senior Product Designer
Senior Product Designer
Competencies
Competencies
Competencies
Competencies
UX/UI optimization
UX/UI optimization
UX/UI optimization
Interfaces analysis and audit
Interfaces analysis and audit
Interfaces analysis and audit
Consistency management
Consistency management
Consistency management
Visual hierarchy
Visual hierarchy
Visual hierarchy
Creating and documenting components
Creating and documenting components
Creating and documenting components
Versioning and system support
Versioning and system support
Versioning and system support
Year
Year
Year
Year
2023
2023
2023
2023
Led the creation of a design system for corporate banking and investment apps — unifying the interface, enhancing accessibility, and enabling scalable development.
Led the creation of a design system for corporate banking and investment apps — unifying the interface, enhancing accessibility, and enabling scalable development.
Led the creation of a design system for corporate banking and investment apps — unifying the interface, enhancing accessibility, and enabling scalable development.
Led the creation of a design system for corporate banking and investment apps — unifying the interface, enhancing accessibility, and enabling scalable development.
Discover
Discover
Discover
Overview
Overview
When I joined the project, it had just started and lacked both a design system and a unified visual approach. I took on the task of creating a component library that could be used to build new corporate banking product and redesign the existing investment product.
When I joined the project, it had just started and lacked both a design system and a unified visual approach. I took on the task of creating a component library that could be used to build new corporate banking product and redesign the existing investment product.
When I joined the project, it had just started and lacked both a design system and a unified visual approach. I took on the task of creating a component library that could be used to build new corporate banking product and redesign the existing investment product.
When I joined the project, it had just started and lacked both a design system and a unified visual approach. I took on the task of creating a component library that could be used to build new corporate banking product and redesign the existing investment product.
The visual style was inherited from the investment project but had significant contrast and readability issues. I began by analyzing the existing color theme and its impact on interface perception.
The visual style was inherited from the investment project but had significant contrast and readability issues. I began by analyzing the existing color theme and its impact on interface perception.
The visual style was inherited from the investment project but had significant contrast and readability issues. I began by analyzing the existing color theme and its impact on interface perception.
The visual style was inherited from the investment project but had significant contrast and readability issues. I began by analyzing the existing color theme and its impact on interface perception.
Hypotheses
Hypotheses
Low contrast and poor readability degrade user experience and accessibility.
Low contrast and poor readability degrade user experience and accessibility.
Low contrast and poor readability degrade user experience and accessibility.
Low contrast and poor readability degrade user experience and accessibility.
01
01
Lack of components and UI patterns leads to inconsistent interfaces and implementation errors.
Lack of components and UI patterns leads to inconsistent interfaces and implementation errors.
Lack of components and UI patterns leads to inconsistent interfaces and implementation errors.
Lack of components and UI patterns leads to inconsistent interfaces and implementation errors.
02
02
Absence of a structured approach slows development and complicates support.
Absence of a structured approach slows development and complicates support.
Absence of a structured approach slows development and complicates support.
Absence of a structured approach slows development and complicates support.
03
03
Poor communication between design and development causes bugs and visual mismatches.
Poor communication between design and development causes bugs and visual mismatches.
Poor communication between design and development causes bugs and visual mismatches.
Poor communication between design and development causes bugs and visual mismatches.
04
04
Research
Research
To test hypotheses, I began with an in-depth analysis of the investing product and its processes
To test hypotheses, I began with an in-depth analysis of the investing product and its processes
To test hypotheses, I began with an in-depth analysis of the investing product and its processes
UX/UI audit of existing interfaces
UX/UI audit of existing interfaces
UX/UI audit of existing interfaces
UX/UI audit of existing interfaces
Analysis of the color palette and contrast testing (WCAG standards)
Analysis of the color palette and contrast testing (WCAG standards)
Analysis of the color palette and contrast testing (WCAG standards)
Analysis of the color palette and contrast testing (WCAG standards)
Interviews with developers and business stakeholders
Interviews with developers and business stakeholders
Interviews with developers and business stakeholders
Interviews with developers and business stakeholders
Study of Ant Design capabilities and constraints (chosen framework)
Study of Ant Design capabilities and constraints (chosen framework)
Study of Ant Design capabilities and constraints (chosen framework)
Study of Ant Design capabilities and constraints (chosen framework)
Benchmarking of design systems in complex B2B/financial products
Benchmarking of design systems in complex B2B/financial products
Benchmarking of design systems in complex B2B/financial products
Benchmarking of design systems in complex B2B/financial products
Define
Define
Define
Overview
Overview
The research showed that the absence of a structured design approach impacted every stage of the user journey
The research showed that the absence of a structured design approach impacted every stage of the user journey
The research showed that the absence of a structured design approach impacted every stage of the user journey
✘
✘
✘
✘
Contrast issues: low contrast and visual overload hinder data perception.
✘
✘
✘
✘
Design fragmentation: no unified visual logic or component system slowed down development.
✘
✘
✘
✘
Missing standards: frequent implementation bugs due to lack of documentation and standards.
✘
✘
✘
✘
Inefficient assembly: high manual effort for layout assembly and review.
✘
✘
✘
✘
UI Overhaul: the investment product required a complete visual redesign.
GOAL OF THE PROJECT
GOAL OF THE PROJECT
Build a scalable design system on top of Ant Design that ensures visual consistency, improves accessibility, speeds up development, and facilitates smooth designer-developer collaboration.
Build a scalable design system on top of Ant Design that ensures visual consistency, improves accessibility, speeds up development, and facilitates smooth designer-developer collaboration.
Build a scalable design system on top of Ant Design that ensures visual consistency, improves accessibility, speeds up development, and facilitates smooth designer-developer collaboration.
Build a scalable design system on top of Ant Design that ensures visual consistency, improves accessibility, speeds up development, and facilitates smooth designer-developer collaboration.
Develop
Develop
Develop
Key tasks
Key tasks
01.
01.
01.
01.
Build a component library with all necessary states and scenarios.
02.
02.
02.
02.
Redesign the color palette to meet WCAG contrast standards.
Redesign the color palette to meet WCAG contrast standards.
Redesign the color palette to meet WCAG contrast standards.
Redesign the color palette to meet WCAG contrast standards.
03.
03.
03.
03.
Create a proper dark theme with well-defined color relationships.
Create a proper dark theme with well-defined color relationships.
Create a proper dark theme with well-defined color relationships.
Create a proper dark theme with well-defined color relationships.
04.
04.
04.
04.
Standardize spacing, typography, and visual patterns.
Standardize spacing, typography, and visual patterns.
Standardize spacing, typography, and visual patterns.
Standardize spacing, typography, and visual patterns.
05.
05.
05.
05.
Document all components with usage examples and adaptation rules.
Document all components with usage examples and adaptation rules.
Document all components with usage examples and adaptation rules.
Document all components with usage examples and adaptation rules.
06.
06.
06.
06.
Test the system on actual screens of the investment product.
Test the system on actual screens of the investment product.
Test the system on actual screens of the investment product.
Test the system on actual screens of the investment product.
Success Criteria
Success Criteria
Faster development of new interfaces
Faster development of new interfaces
Faster development of new interfaces
Faster development of new interfaces
Fewer visual bugs and design inconsistencies
Fewer visual bugs and design inconsistencies
Fewer visual bugs and design inconsistencies
Fewer visual bugs and design inconsistencies
Better collaboration between designers and developers
Better collaboration between designers and developers
Better collaboration between designers and developers
Better collaboration between designers and developers
Improved accessibility and interface perception
Improved accessibility and interface perception
Improved accessibility and interface perception
Improved accessibility and interface perception
Visual consistency across the ecosystem
Visual consistency across the ecosystem
Visual consistency across the ecosystem
Visual consistency across the ecosystem
Workflow
Workflow
What's been done?
What's been done?
Define visual standards
Define visual standards
Define visual standards
✣
✣
✣
✣
Redesigned the color palette and created a high-contrast light and dark theme.
✣
✣
✣
✣
Introduced violet as a secondary (primary) accent color.
✣
✣
✣
✣
Developed a typography system to improve readability.
✣
✣
✣
✣
Standardized spacing and layout grid structure.
What's been done?
What's been done?
Assembled a component library
Assembled a component library
Assembled a component library
✣
✣
✣
✣
Designed components covering all possible states and scenarios.
✣
✣
✣
✣
Defined adaptation rules for various screen sizes.
✣
✣
✣
✣
Maintained close collaboration with developers to ensure proper implementation.
The pilot implemented and tested
The pilot implemented and tested
The pilot implemented and tested
✣
✣
✣
✣
Rolled out the system on key screens of the new corporate banking UI.
✣
✣
✣
✣
Fully redesigned the investment product using the new system.
✣
✣
✣
✣
Collected feedback, iterated, and refined components before scaling.
Deliver
Deliver
Deliver
Effectiveness Assessment
Effectiveness Assessment
After launching the system, I evaluated its impact based on team feedback and performance metrics
After launching the system, I evaluated its impact based on team feedback and performance metrics
After launching the system, I evaluated its impact based on team feedback and performance metrics
Evaluated the design system’s impact by tracking development speed for new sections, conducting UX audits, monitoring visual bugs, and assessing improvements in designer-developer collaboration.
Evaluated the design system’s impact by tracking development speed for new sections, conducting UX audits, monitoring visual bugs, and assessing improvements in designer-developer collaboration.
Evaluated the design system’s impact by tracking development speed for new sections, conducting UX audits, monitoring visual bugs, and assessing improvements in designer-developer collaboration.
Evaluated the design system’s impact by tracking development speed for new sections, conducting UX audits, monitoring visual bugs, and assessing improvements in designer-developer collaboration.
Results
Results
Key outcomes of the design system implementation
Key outcomes of the design system implementation
Key outcomes of the design system implementation
✦
✦
✦
✦
Accelerated development of new features and sections.
✦
✦
✦
✦
Visual consistency across corporate and investment interfaces.
✦
✦
✦
✦
Improved accessibility and content readability.
✦
✦
✦
✦
Fewer design iterations and visual inconsistencies.
✦
✦
✦
✦
Stronger collaboration across the team.
✦
✦
✦
✦
Positive feedback from developers and business stakeholders.
As a result, the design system, built from scratch, became a robust and scalable tool that enabled faster product launches, streamlined internal processes, and significantly enhanced the visual experience of corporate banking & investing products.
As a result, the design system, built from scratch, became a robust and scalable tool that enabled faster product launches, streamlined internal processes, and significantly enhanced the visual experience of corporate banking & investing products.
As a result, the design system, built from scratch, became a robust and scalable tool that enabled faster product launches, streamlined internal processes, and significantly enhanced the visual experience of corporate banking & investing products.
As a result, the design system, built from scratch, became a robust and scalable tool that enabled faster product launches, streamlined internal processes, and significantly enhanced the visual experience of corporate banking & investing products.
© 2025 Aleksandra Berest
© 2025 Aleksandra Berest
© 2025 Aleksandra Berest
© 2025 Aleksandra Berest