Product Card Accessibility.

This work was part of a larger store UI update to improve browsability for a growing assortment. The existing product card had grown unwieldy. New elements added over the years without revisiting the layout left it with inconsistent aesthetics and a height that required scrolling to see a single card on smaller devices.

As the core component of the store, where every meal added to an order starts, it needed a redesign. The company was consolidating its brand platforms, meaning all new components had to work across brands from the start. This was the first release to span both mealkit and ready-to-eat, each with fundamentally different product attributes.

I replaced another designer mid-project, picking up after usability testing had already validated a horizontal card layout over a grid layout.

I was brought in because of my previous work on the checkout, where I'd redesigned cart line items to surface product card attributes. That work gave me deep familiarity with the meal selection variants and which information best helped customers make decisions.

I partnered with the Design System team to create a modular, accessible product card using Object-Oriented UX principles, ensuring the component met design system standards and could be maintained long-term. This was HelloFresh's first design-led accessibility implementation, and I ran knowledge-sharing sessions so the team could replicate the approach on future projects.

To solve this complexity, I used Object-Oriented UX to map all product types and their attributes.

The European Accessibility Act (EAA), Directive (EU) 2019/882, became fully applicable on June 28, 2025. Our designs had to meet WCAG 2.1 AA standards. The deadline shaped the project timeline and made accessibility a core requirement from the start.

To understand what this meant in practice, I audited the existing meal selection experience using VoiceOver on my iPhone and MacBook. Learning the gestures and keyboard controls helped me grasp the gap between the visible UI and how screen readers actually interpret elements. It was eye-opening, and shaped every decision that followed.

Screen readers don't follow visual layout. They read elements in the order they appear in the code. Without deliberate structuring, this may not match the order users actually need. I used the OOUX attribute prioritisation to define reading order, ensuring screen reader users received information in the same hierarchy as sighted users. Product name first, then key attributes, then price.

WCAG requires content to work at 200% text size, and device analytics showed users browse on screens as small as 360px. Rather than truncating text, which cuts off meaning for users who need larger text or smaller devices, I defined character limits for every element and benchmarked Lieferando's approach of switching to vertical layouts at larger sizes.

Alt-text and ARIA labels aren't just technical metadata. They're the entire experience for screen reader users. I collaborated with UX Writing to ensure labels conveyed meaning, not just described elements. "Select Chicken Teriyaki", not "Button".

The final component is a modular system covering every state and brand configuration. One source of truth for both mealkit and ready-to-eat surfaces.

I presented my process and recommendations to the UX design and research team, covering VoiceOver testing, annotation workflows, and WCAG requirements. I followed up with one-on-one mentoring sessions to help designers apply accessible design practices to their own projects.

In Q4 2025, the product card component launched on Factor across seven markets. We rolled out without an experiment because Factor's outdated UI could no longer support new features. Updating it was a prerequisite for planned platform improvements.

In Q1 2026, we A/B tested the new card on HelloFresh. Mixed results led us to iterate. We rolled back with a plan to re-test. I'm currently working on the next iteration, with a new experiment planned for Q2 2026.