Design Systems

Standardising components across Web, iOS & Android

Design Systems Component Design Cross-Platform UX Documentation Accessibility

The Context

As the ecom platform evolved across iOS, Android, and Web, the radio button implementations became inconsistent in behaviour, implementation and accessibility. This created fragmented experiences, increased implementation complexity, and reduced consistency across products.

The goal was to create a shared radio component standard that could be adopted consistently across platforms, improving accessibility and aligning UX and engineering teams around common patterns.

The Process

I worked with engineers, Product Managers, UX leadership, retailer stakeholders, and the Design Systems Working Group to audit existing implementations and define a shared radio button standard across iOS, Android, and Web.

While the wider initiative included updates to dropdowns, checkboxes & text fields, I was responsible for auditing, redesigning and documenting the radio button component. Through iterative design reviews, we refined accessibility requirements, interaction patterns, edge cases and implementation guidance before rollout.

I audited radio button implementations across iOS, Android and Web, identifying inconsistencies in behaviour, accessibility, visual design and implementation patterns. Working alongside the Design Systems Working Group, we benchmarked external systems and reviewed internal use cases to define a shared component standard.

Because radio buttons were heavily used across several projects I was working on, I contributed real-world retailer requirements, payment flows and edge cases throughout the redesign process.

We conducted usability testing to validate the initial proposed component patterns and compare radio button groups against existing dropdown-based alternatives. Participants consistently preferred radio buttons, finding them more intuitive and easier to understand when making delivery-related selections.

As the redesigned components matured, we released all four internally as Beta Components, allowing designers to begin adopting the updated patterns across Web, iOS and Android ahead of full implementation.

The accompanying documentation was released alongside the component, covering:

interaction states
behavioural expectations
usage guidelines
practical Do / Don't recommentations

This created an important feedback loop across the UX organisation, allowing both the components and documentation to evolve through real-world usage. Feedback helped refine accessibility guidance, interaction behaviours, edge cases and documentation clarity before wider rollout.

The accompanying documentation was released alongside the component, covering:

interaction states
behavioural expectations
usage guidelines
practical Do / Don't recommentations

Basic Overview States of New Radio Group

The Outcome

The redesigned components established a shared standard for form interactions across Web, iOS and Android, improving consistency, accessibility and implementation quality across the platform.

Migration progressed across domain teams, reaching approximately 80% adoption across the four redesigned components at the time of writing.

The redesigned components established a shared standard for form interactions across Web, iOS and Android, improving consistency, accessibility and implementation quality across the platform.

Migration progressed across domain teams, reaching approximately 80% adoption across the four redesigned components at the time of writing.

Phase 1 - Migration

The first phase focused on replacing legacy implementations with the new component standards, ensuring consistent behaviour, accessibility and interaction patterns across platforms.

Phase 1 - Migration

The first phase focused on replacing legacy implementations with the new component standards, ensuring consistent behaviour, accessibility and interaction patterns across platforms.

Final Migrated Screens with Radio Groups

Phase 2 - Future Improvements

Once migration is complete, the next phase will be focused on improving end-to-end experiences built on top of the new component foundations. This includes simplifying journeys, refining interaction patterns and addressing usability issues that extended beyond the component itself.

Phase 2 - Future Improvements

Future Improvements for Radio Group Flows

The final documentation established a shared reference for component behaviour, accessibility requirements, interaction states and implementation guidance across Web, iOS and Android.

Particular focus was placed on keyboard navigation, screen reader support and progressive disclosure patterns, ensuring consistent experiences across platforms.

The final documentation established a shared reference for component behaviour, accessibility requirements, interaction states and implementation guidance across Web, iOS and Android.

Particular focus was placed on keyboard navigation, screen reader support and progressive disclosure patterns, ensuring consistent experiences across platforms.

BACK TO PROJECTS