Silvia Casagrande

Bank Branch Portal

/25

Bringing a 68-component design system behind three markets' branch platforms up to WCAG 2.2 before the EAA deadline.

Bringing a 68-component design system behind three markets' branch platforms up to WCAG 2.2 before the EAA deadline.

Role:

Product Designer (Audit, Remediation, Documentation, Verification)

Role:

Product Designer (Audit, Remediation, Documentation, Verification)

Team:

Product Team (1 Product Designer, 1 Accessibility expert, 3 Developers)

Team:

Product Team (1 Product Designer, 1 Accessibility expert, 3 Developers)

Domain:

Enterprise Banking, Design System Accessibility

Domain:

Enterprise Banking, Design System Accessibility

Scale:

3 countries (Czech Republic, Slovakia and Romania), 68 component groups

Scale:

3 countries (Czech Republic, Slovakia and Romania), 68 component groups

The Problem


The EAA set a fixed compliance date, and the branch platforms used in the Czech Republic, Slovakia and Romania all ran on a design system that had never been assessed against the requirements. 

Constraints & Approach


Although the system was used only in branches, it was part of a defined product ecosystem; therefore, its components could be modified but not reinvented, and the existing brand guidelines remained in effect.

Execution & Key Decisions


  • Full System Audit: Reviewed all 68 component groups, each a component plus its variants, against WCAG 2.2: contrast, type sizes, focus states, target sizes, error handling and labelling, while staying inside the brand guidelines.

  • Two Classes of Findings: Separated accessibility violations from misuse of the components themselves, which was degrading the experience independently of compliance.

  • Criterion-Level Documentation: Per component group, which criteria failed, how to correct them, and when to use or avoid that component. Reviewed with the group's in-house accessibility specialist before delivery.

before
  • Handover as Library Plus Guidance: Corrections compiled into a Figma library and dedicated documentation, so the development team could update the coded component library directly rather than interpreting an audit report.

  • Verification Testing: Ran implementation checks with the specialist to confirm the code matched the spec.

  • Sample Screen Rebuild: Redesigned representative platform screens using the corrected components, showing the system working end to end rather than component by component.

to-be
example

Impact


  • Signed off by the group's internal accessibility specialist and released in June 2025, ahead of the EAA deadline.

  • Live in three markets, with the accessible components running in branch products across all of them.

Next project:

Next:

Create a free website with Framer, the website builder loved by startups, designers and agencies.