E-commerce made accessible - mZakupy

In 2023, mBank launched a new strategic and innovative project in the banking sector. The existing affiliate/promotion section of their banking app was set to be transformed into a major marketplace, with Morele.net, one of Poland’s largest e-commerce platforms, as the strategic partner.

This was one of the first projects in the bank that was from the beginning made with WCAG in mind. I played the role of an acessibility expert, making sure the app is made according to the standards.

• 200+ stakeholders
• October 2023 - now (BAS phase of the project)
• integration with a big e-com partner (over 1,5 mln products)
• innovation in the European banking
• available to all banks clients (3 mln)
• 4 phases
• 3 rounds of usability testing
• attention to accessibility
• designed with design system

summary

user testing

• conducted the first round of user testing
• facilitated three days of in-person usability testing on the mobile prototype
• prepared a detailed report on our findings

senior UX/UI designer

• supporting the design lead in design process
• leading the project in case of the leads absence

accesibility expert

• provided detailed descriptions for developers to meet WCAG standards
• communicated with developers to achieve accessible solutions
• advised on and found solutions for ambiguous and complicated cases

my roles:

details

assuring accessibility

In the light of the deadline for the new EU accessibility regulations, mBank, my cilent introduced a requirement that all of the designs will have WCAG standard at at least  80%.

It took upon myself a task to assure the designs in e-commerce will meet that gole.

Accessibility is often understood on a very surface level - assuring that proper contrasts are applied and adding some descriptions. When in fact it is a very complex task, that goes to the very root of every design.

In order to assure meeting the standards, designers have to change their perception of their role.

First the question must be asked - how many users with dissabilities there are?

The answear is - more than you think. Some might even say that we are all just temporarly "abled" - old age, broken arm, lost glasses, ADHD... This are the real life situation we can all find ourselves at. Usually designers consider only some loss of sight, but it is just one of many ways human senses can be impaired. Getting into the mind of a user with disability is not imagining you are blind, you need to think about swithching off all of your senses in different combinations. 

To design for accesibility is also to understand the technology behind the design idea- assuring that the websites and apps have a correct structure and assuring code quality. For that a close work with developers and a lot of testing with additional software like screen readers has to be conducted. 

That is how I see my role on the project where I take upon a role of accesibility expert, and this was one of many I did it for.

how did I work?

My role was to look at already created designs and ensure it will be possible to make it all accessible.

Every screen the project had to be analized and described with special adnotations for developers about how each element will be treated in order to be implemented correctly.

Sometimes it occured that UX patterns had to be changed, for example to ensure that all users can activate a validation in forms or that there are alternatives to horizontal scrolling the page.

Some components were taken directly from the design system, so If there was any accessibility issue, I worked with DS team to solve it. 

With some solutions, we had to compromise and agree that we will not temporarily meet the standard due to a very high cost and big changes in whole app. Example of this would be horizontal view of the whole app, that is still not implemented.

design phases

The project had an ambitious timeline, requiring the design and testing of the first phase within just 6 months. This involved designing and testing the entire process, from user onboarding and product presentation to checkout and package tracking.

I was responsible for conducting usability testing with users. I prepared a prototype and tested it with 10 participants on mobile devices, in person, at a specialized usability lab.

The first impressions of the new section of the app were very positive. We identified and proposed several key improvements to enhance the process, which were later approved for development.

phase 1 - first designs and testing

phase 2 - F&F testing

In the next phase, we added the capability to feature multiple products simultaneously and introduced full shopping cart functionality.

We tested these changes live with a control group of several thousand mBank clients. At this stage, I was responsible for supporting the lead designer and stepping in whenever needed.

phase 3 - full live version 01.2025

We achieved full e-commerce functionality, including product variants, a buy now pay later service, and complete order tracking within the banking app. We are preparing this feature to be available to all of the bank’s retail clients by the end of the year.

That accessibility is not about just a couple of design choices, it has to be taken care of from the root of the design and code. 

what I’ve learned

Learning about accessibility and implementing it in real-life app. Working under big pressure and big expectations - app had to meet legistlatory regulations regarding A11y.

the biggest challenge

Strona zrobiona w WebWave.