/ GOALS AND ASSUMPTIONS.
Implementation of digital accessibility and the Flame design standard in the cash loan, consolidation loan, overdraft facility, and Spousal Consent Portal products
The main objective of this project was to adapt credit products and internal applications to the new design standard, namely the Flame Design System, as well as to the digital accessibility guidelines (WCAG 2.1) resulting from the European Accessibility Act (EAA) for public entities and the private sector, compliance with which was committed to by the Polish government.
As one of the lead designers in the Consumer Finance department, I was involved in the implementation of these standards within the cash loan and consolidation loan processes, the overdraft facility, and the Spousal Consent Portal.
The new Flame design standard represented a comprehensive approach to designing communication and products across the Santander Group. This standard governed all cases of digital solution usage across different distribution channels.
The Flame Design System was already the third approach by the Santander Group to creating a shared component library used to build banking solutions such as mobile banking, transactional services, the bank’s main website, and internal applications.
This design system differed from previous ones in that it took into account local requirements for the specific countries in which it was to be used. It was thoroughly validated and tested during the design of real products within the Santander Group.
Due to the fact that the process of implementing new standards in credit products followed the same framework, this case describes a generalized approach to this task. In practice, the scope of the project focused on redesigning credit products in a new visual version and adapting them to digital accessibility guidelines at the AA level (WCAG 2.1).
The design system itself covered a significant portion of the accessibility guidelines that needed to be addressed by product designers, including aspects such as graphical and text contrast.
/ FLAME & WCAG.
The process of designing credit products
/ Process
- Introductory meetings regarding the need to implement the new Flame design standard, toward which the entire group was heading, as well as the requirement to implement digital accessibility (WCAG 2.1) resulting from the European Accessibility Act (EAA), were initially conducted among members of the UX guild.
- These were followed by educational sessions for teams responsible for specific credit products, explaining what the new Flame design system was and what digital accessibility meant. I was the main organizer of these meetings within our department.
- Digital accessibility training sessions were also conducted for designers and members of implementation teams such as analysts, developers, and testers.
- This was followed by familiarization with the documentation of the new design system and organizing and structuring the working environment in the new tool, Figma, together with other designers in the department.
- The design of subsequent views for our credit products began with the mobile version, in line with the mobile-first principle adopted by the bank. In cases where the design system did not provide an appropriate component, I designed it from scratch based on the provided tokens and consulted the correctness of the component with the people responsible for the design system.
Before starting the design work, I thoroughly analyzed the existing mockups of a given solution and divided them into specific groups that could be treated as stages of the process.
I began the redesign process by planning work around specific functionalities and breaking it down into concrete stages. Next, we internally discussed and established rules for structuring design work among designers within the department. - After designing the process for one of the mobile or desktop versions, I conducted consultations with business stakeholders regarding changes introduced into the process as a result of using the design system or digital accessibility guidelines. These consultations most often concerned visual changes to components and their behavior to ensure compliance with the requirements.
- Once all views for a given credit process were finalized, consultations with the legal department followed, focusing on product changes resulting from the use of the new design system and the implementation of digital accessibility.
- I prepared accessibility descriptions on product mockups according to guidelines developed by the central UX department for developers and testers.
- Consultations with the legal department also covered how our processes should be read by screen readers and what information, and in what order, should be presented to users with visual impairments. UX writers within the organization provided significant support in preparing this content.
- The final mockups were then handed over to developers for implementation, including detailed explanations of how individual functionalities and components should behave. Both available documentation sources for the Flame Design System were shared and discussed with developers.
- A new standard for managing mockups was introduced, including versioning aligned with production deployment versions. Implementation teams were trained in this new approach to managing mockups within the department.
- The product was deployed to test environments, followed by consultations with testers regarding identified issues and compliance with the design system.
- An accessibility audit was planned on the test environment for the relevant channels, conducted separately for desktop and mobile versions.
- I supported the auditor during the audit by explaining how our processes worked and how they should be operated.
- The audit report was then shared with the product team, and a meeting with the auditor was organized to discuss the accessibility issues identified in the implemented product.
- I collaborated with developers and testers on resolving accessibility-related issues identified in the audit report. If the issues concerned the user interface, consultations were conducted with people responsible for the design system. Examples included insufficient contrast of borders and fill colors in selection lists.
- A re-audit of the process was conducted after fixing accessibility issues, followed by deployment of the processes to production.
- Finally, I prepared training prototypes for customer advisors available in the bank’s intranet, as well as functional descriptions for the above-mentioned products. I also participated in recording video training materials for advisors.
/ Main problems
The main challenges I encountered during this project were related to adapting products to the new design system, preparing component documentation, and describing mockups in line with digital accessibility guidelines for developers.
I addressed visual adaptation issues in redesigned products through frequent consultations of designed views with people responsible for the design system on the Polish side. Through extensive workshop sessions, we were able to jointly review current issues and reach a consensus on how the designed functionalities in credit products should look. Since major changes to the design system were not possible due to central ownership, adapting existing functionalities often required a high level of creativity and analytical thinking.
The biggest challenge I faced was preparing and describing credit product mockups in accordance with accessibility guidelines for developers and testers.
The preparation and documentation of mockups went through many iterations, repeatedly failing to meet requirements specified by developers and testers. Throughout the implementation of digital accessibility in our products, we made multiple attempts at this task, some more successful than others. Each approach was consulted and tested with developers and testers in order to develop optimal recommendations for describing mockups. It often turned out that the entire responsibility for implementing accessibility was being shifted onto designers, despite the fact that around 90 percent of accessibility compliance must be ensured at the code level of the application or website.
Eventually, a standard for describing mockups was developed and documented by the central UX department, and I actively participated in the creation of this document.
As for accessibility documentation for components from the Flame design system, we addressed this by conducting extensive work on describing components in the form of local documentation created collaboratively by all designers in the bank. Auditors from the organization supporting us in implementing digital accessibility, primarily through training and accessibility audits, helped us define how components should behave when used with assistive technologies.
