Accessible design starts from the ground up
Principal Product Designer Layla Martins shares how her team applied the 4D process to optimize accessibility enablement at Zalando Lounge.
What does accessible design mean to you as a Product Designer? It could mean being mindful of color contrast ratios, font size, or target size. Perhaps you routinely fix issues in line with accessibility audits or customer feedback. Whatever your experience, there’s no doubt you encounter the topic on a regular basis. More than a trend, accessible design is crucial to ensuring that all users — regardless of their abilities or how they use their devices — can easily use and enjoy our products.
When we learned that the loyal customers of Zalando’s popular online shopping club, Zalando Lounge, set their alarms at 7 am to catch the latest deals, we knew dark mode was important. By providing them with the option to switch their display to dark mode on the app, we ensured that a bright screen wouldn’t impede their use or enjoyment of the experience in low light — whether or not they have visual impairments or light sensitivity.
Introducing accessibility enablement at Lounge
What else can we do to ease the user experience? Lounge’s accessibility enablement project — which has set a precedent at Zalando since it launched in Q2 2021 — is working to make this question front of mind for every designer. “In order to make Lounge inclusive and accessible at its core,” says Layla Martins, Principal Product Designer and lead of Lounge’s design system, “we have to go deeper than auditing and fixing issues, which is also very time and resource consuming, and instead enable the team to design for accessibility in the first place.”
What is an accessibility issue? The first step towards team enablement is to establish a clear definition. As she shared in her recent talk and workshop at UX London, Layla defines it as “a mismatched interaction between a person, an environment, and a product we design.” Crucially, this definition uncouples ‘accessibility’ from ‘ability,’ removing assumptions or stereotypes that could stand in the way of our best design solutions.
As it turned out at Lounge, enabling accessibility across the team was not so straightforward. “We began the project by providing the team with educational resources, such as courses and workshops,” Layla tells us. “However, after a few months, we ran a survey and found that, even with the material, over half of the team still needed guidance regarding accessibility best practices.”
Applying the 4D approach
Evidently, equipping the team to optimize accessibility needed to go beyond simply providing them with information. At that time, accessibility wasn’t factored into the design process and Lounge did not have any clear criteria in place. To avoid jumping into solutions, Layla’s team started treating accessibility enablement as a product, applying the 4D framework (discover, define, design, deliver) to the problem. In the discovery phase, Layla conducted interviews with accessibility specialists, as well as surveys and ideation sessions with Product Designers, Software Engineers, User Researchers, and Project Managers.
A cross-functional effort
The qualitative and quantitative data Layla’s team gathered confirmed that accessibility needed to be fully integrated into the workflow. “As the product workflow involves several disciplines — from designers to project managers — we need them all engaged to make it work,” says Layla. “One of the many ways to do this is by adding A11Y Project criteria into project planning and roadmaps, task scopes, solution design, and the requirements for the project’s acceptance. Accessibility checks can be part of the solution design and quality assurance. We can also seek to further diversify our user testing.”
The Lounge team now has extensive accessibility criteria to help them comply with best practices. They also formed a cross-functional guild to work on strategies to make enablement initiatives actionable in each discipline. “Accessibility at Lounge means equal access and opportunity to more people, with a broader range of abilities, no matter the device or assistive technology they use,” says Layla. “Our best practices for mindset are empathy and inclusion; for product, intuitiveness, coherence and adaptability; for ways of working, easy access to A11Y criteria, compliance reviews and diverse user testing; and for innovation, assistive technologies.”
Built with empathy
The team’s research also revealed that cultivating empathy was paramount to raising the bar of accessibility. By experiencing the product from the perspective of people with permanent, situational, or temporary challenges, the team could bring an extra layer of understanding to the product.
“In our weekly Design Club meetings, I tell fictional stories of people that found a mismatch between their abilities and our products,” Layla shares. “I explain their challenges and show how they see or use our app and site. Afterwards, I show possible ways to make our app and site more inclusive to them. This makes the accessibility criteria (such as font size, color contrast or target size) more interesting, because they see it in a ‘real’ context. At the end, the team tries out assistive technologies to get closer to people’s real experience, while learning how to test the accessibility of their own projects.”
As Layla’s colleague, Product Designer Diana Albu, testifies, this approach has been instrumental to the project’s success: “Accessibility enablement is a series of initiatives: Introduction to accessibility, persona scenarios, and situational exercises that raised awareness at Lounge. It helped us understand exclusions, and struggles that our customers might experience using our product. Putting ourselves into our customers’ shoes in different situations is an essential first step in making our app inclusive.”
A measurable success
Since the beginning of the accessibility project, Lounge’s overall accessibility score has increased to 98% on the website, according to the accessibility measurement tool Lighthouse. The checkout address page achieved 100%. The metrics the team is collecting make the case for continuing to prioritize accessibility at Lounge, and within the entire Zalando organization.
“Being inclusive by design can lower the barriers between people and the products we design,” says Layla. “There are always other parameters to consider besides those measured by external tools — nothing is 100% accessible — but we are really happy that the work we are doing is already contributing to making Lounge a more inclusive experience for our customers.”
Key takeaways
If you’re currently working on enabling your team to design for accessibility, the following points could be helpful to consider.
- Avoid jumping into solutions
- Consider the process of team enablement as a product
- Discover the root problems that keep your team from designing for accessibility
- Listen to your team, and use qualitative and quantitative data to measure the success of your enablement initiatives
- Engage multiple disciplines and integrate accessibility throughout the workflow
Do you have any tips or best practices? Feel free to share them in the comments!
