Works

About

B-Sides

Accessibility Handoff Design Kit

Solving the accessibility communication crisis between designers and developers through a structured annotation framework. This systematic approach turned complex compliance requirements into clear, actionable guidance for mobile app teams.

Role

User Experience Designer & Primary Project Lead

Collaboration

1 User Experience Designer (From the 2nd Iteration) Mobile Platform Team

Timeline

Feb 2025 - Jul 2025

Platform

Mobile (Android, iOS)

Outcome

Achieved up to 100% accessibility compliance Designer satisfaction 8.6/10 Developer satisfacion 8.5/10

Context

From legal compliance to user advocacy

PAYBACK, Germany's largest multi-partner loyalty platform with 34M+ users, was facing a new challenge: the upcoming enforcement of the European Accessibility Act (EAA) in 2025. With increasing user feedback highlighting accessibility barriers, particularly for screen reader users, I took the initiative to advocate for improvements. As a UX Designer, I proposed a systematic framework to integrate accessibility into our design workflow, transforming a legal requirement into an opportunity for meaningful change and inclusive user advocacy.

From legal compliance to user advocacy

With VoiceOver, the provider is no longer legible in the coupons area. No longer usable for blind customers.

With VoiceOver, the provider is no longer legible in the coupons area. No longer usable for blind customers.

It may well be that PAYBACK is a great system. But the best system is useless if it can't be used by everyone. I am blind and use a screen reader. It was difficult to log in because there was an audio challenge during verification, but it's not clear exactly where I have to tap to verify..

Changes and applications are not described clearly and mostly incomprehensibly for older people and are not sufficiently explained.

Changes and applications are not described clearly and mostly incomprehensibly for older people and are not sufficiently explained.

Challenge

Knowledge and assessment gap

The first challenge was developing a comprehensive digital accessibility expertise. To align with EAA standards based on WCAG 2.1, I became proficient in platform-specific screen readers like VoiceOver (iOS) and TalkBack (Android) to identify accessibility barriers and improve communication with developers.

Process gap between designers and developers

Another challenge was a critical communication breakdown between designers and developers during the handoff process. This often led to design intent being lost in translation. Designers needed an intuitive way to document accessibility, while developers required precise, actionable specifications. The goal was to create a solution that served both needs without adding complexity to the existing workflow.

Implementation

Design

Accessibility Integrated

Development Framework

Accessibility Integrated

Development Framework

Solution

Framework integration into design process

After several discussion with team, I developed a comprehensive accessibility integration framework that was seamlessly embedded into PAYBACK’s existing design workflow. The goal was to make accessibility a natural part of the design thinking process rather than an additional burden.

Foundation research and kit development

I conducted a comprehensive analysis of WCAG 2.1 documentation and our existing design system to identify coverage gaps. My research went beyond just design. I dove into developer documentation to understand how accessibility features are technically deployed, allowing me to bridge the gap between design intent and code implementation. Based on this foundational knowledge, I defined the scope of the annotation kit.

Putting the framework into practice

To provide clear, platform-specific guidance, I created a copy-and-paste friendly toolkit with five core annotation categories that directly addressed the most critical accessibility barriers and fit seamlessly into our existing workflow:

A11y Labels: for screen reader descriptions

Reading & Focus Order: for logical navigation paths
Input Purpose: for autofill support
Headings: for structural navigation
Link & Button: for semantic clarity

A11y Labels: for screen reader descriptions

Reading & Focus Order: for logical navigation paths
Input Purpose: for autofill support
Headings: for structural navigation
Link & Button: for semantic clarity

Fostering collaboration: walkthrough & onboarding

To ensure the framework was successfully adopted, UX team and I conducted a collaborative walkthrough session with developers and Product Owners to introduce the new accessibility toolkit and align on the handoff process.

Result

Quantitative accessibility improvements

I strategically selected the Coupon Center as our pilot project, systematically auditing it with TalkBack and VoiceOver to identify 12 major accessibility issues. The pilot implementation resolved 10 of these issues, achieving an 83% improvement rate. The two unresolved issues were attributed to an implementation miss on the development side and a missing label in CMS content, which was outside of my UX scope. This process successfully validated our framework's effectiveness in a real-world application.

Logical Reading & Focus Order established

1 Issue → 1 Resolved

Contextual information integrated for improved usability

2 Issues → 1 Resolved

Clear & descriptive labels added for screen readers

9 Issues → 8 Resolved

Logical Reading & Focus Order established

1 Issue → 1 Resolved

Contextual information integrated for improved usability

2 Issues → 1 Resolved

Clear & descriptive labels added for screen readers

9 Issues → 8 Resolved

Team satisfaction and organizational Impact

The implementation of the accessibility kit led to a significant and measurable impact on team satisfaction and organizational workflow. Designers rated the framework an impressive 8.6/10, while developers rated it 8.5/10, demonstrating strong cross-functional approval. The kit successfully addressed the communication gap by providing clear, intuitive guidance that boosted implementation confidence and significantly improved the efficiency of the design-to-development handoff.

"It is helpful on the one hand not to forget something and on the other side to handover always with the same structure/design, what ist super helpful for Dev." (Designer)

"I feel as a developer I can confidently implement the accessibility changes in the code using the annotation, and without having to question the UX designers" (Developer)

"The kit made me realize that making my features accessible was far easier than I had anticipated as I was given clear guidance" (Designer)

"I found it super intuitive, the structure, design and intent of the annotation kit made it really helpful in figuring out what needs to be done" (Developer)

"It is helpful on the one hand not to forget something and on the other side to handover always with the same structure/design, what ist super helpful for Dev." (Designer)

"I feel as a developer I can confidently implement the accessibility changes in the code using the annotation, and without having to question the UX designers" (Developer)

"The kit made me realize that making my features accessible was far easier than I had anticipated as I was given clear guidance" (Designer)

"I found it super intuitive, the structure, design and intent of the annotation kit made it really helpful in figuring out what needs to be done" (Developer)

Reflection

Bridging complexity and collaboration for inclusive design impact

This project taught me that an inclusive mindset is essential throughout the entire design process, not just for technical implementation. By proactively addressing the complexities of accessibility standards and bridging the communication gap, I evolved from a UX Designer into an Inclusive Design Advocate. The annotation kit continues to be used in PAYBACK's design framework today, making accessibility a standard part of our design process.