Delivery Options

A shopper facing tool that provides a personalized and dynamic checkout experience.

  • Post code based carrier filtering and availability

  • Dangerous Goods (DG) shipping restrictions

  • Real time EDD and rate display

  • Interactive location selection with map integration

  • Integrate with TMS for localized translations.

  • Full RTL support (Arabic, Hebrew)

  • Graceful handling of missing/null API fields (e.g., no logo, no EDD)

  • Seamless compatibility with express checkout, geolocation, and existing flows

Overview

The Delivery Options project is a configurable checkout widget that dynamically presents shoppers with available delivery/pickup methods based on their post code and the retailer's carrier configuration. It integrates with a Routing API to source carriers, pricing, and estimated delivery dates in real-time, supporting multi-language and multi-region deployments out of the box.

Problem

Today's e-commerce checkout flows often present static, one-size-fits-all delivery options that don't reflect real carrier availability, regional restrictions, or shopper preference. This leads to:

  • Cart abandonment: shoppers see irrelevant or expensive options and leave before completing their purchase.

  • Operational inefficiency: retailers manually maintain delivery configurations per region, leading to outdated pricing and inaccurate estimated delivery dates.

  • Poor localization: international shoppers encounter untranslated labels, unsupported address formats, or carriers that don't serve their area.

Research

As a part of the discovery and validation process, I incorporated insights from the Baymard Institute’s guideline collections, including competitor analysis, industry standard best practices, and usability recommendations. I synthesized this research to better understand established patterns and pitfalls in commerce and fulfillment experiences, particularly around navigation, information architecture, and task flows. These insights helped to ground design decisions in empirical ecommerce usability research, strengthen the rationale for key interactions, and validate patterns before prototyping to ensure the solutions were both user centered and aligned with broader UX norms across the industry.

Designing with AI

I use AI as a design accelerator and decision-support tool throughout my workflow. I reference Baymard UX Query to surface evidence-based ecommerce best practices and validate design patterns early. For rapid iteration and version testing, I use Lovable to explore and compare design variations efficiently. I also leverage AI to refine and iterate on UX copy, ensuring clarity, consistency, and accessibility across user flows. Together, these tools help me reduce repetitive effort, explore solutions faster, and focus more time on high-impact design decisions.

Split View(A)

Pros:

  • Lower cognitive load – Progressive disclosure reduces decisions per step

  • Better screen reader navigation – Clear role="group" boundaries with distinct aria-labelledby

  • WCAG 1.3.1 (Info & Relationships) – Hierarchical structure aids comprehension

  • Mobile-friendly – Smaller sections reduce scrolling fatigue

Cons:

  • More vertical space required

  • Users may backtrack if they change their mind

Merged View (B)

Pros:

  • Faster for expert users – All options visible at once

  • Fewer perceived steps – Can feel more efficient

Cons:

  • Higher cognitive load – Too many choices simultaneously

  • Weaker hierarchy – Screen readers struggle to distinguish option types

  • WCAG 2.4.6 (Headings) – Flat structure harms perceivability

  • Mobile issues – Dense layouts cause tap-target conflicts

High Fidelity UI

Lovable Prototype

Tip: Please enter a test post code from the table above to get started.

View prototype

Benefits

  • Faster, Smarter Checkout

    No wasted time browsing irrelevant carriers and shoppers get to payment faster.

  • Flexible Delivery Choice

    Shoppers choose what suits them best and retailers see higher conversion.

  • Localised Experience

    Region-aware carrier routing means retailers can serve international markets.

Explore other case studies

  • Store Management

    A retailer facing tool to help them self manage the store and omni-channel fulfillment capabilities.

    View more

  • Role management

    An internal tooling to assign roles to an user/group to provide them access to all the features it contains.

    View more