Self-Service Order Cancellation

Project Overview

As the foundational milestone of Gap Inc.’s Customer Self-Service Initiative, the "Cancel Order" feature was designed to solve a major operational friction point: high-volume, low-complexity customer service calls.

I led the end-to-end UX for this MVP, creating a scalable framework that allows users to manage their own orders in real-time. This project laid the groundwork for a broader self-service ecosystem, including shipping edits, returns, and claim filing.

The Goal: Reduce Customer Service (CS) overhead by digitizing the "immediate-regret" cancellation window, providing users with instant resolution.

Role: Lead Product Designer | Impact: Operational Cost Reduction & User Autonomy

Strategic Challenges & Constraints

Designing for cancellations requires a delicate balance between business retention and user transparency.

Strategic Visibility and Friction

A critical challenge was balancing accessibility with retention. We needed the cancellation option to be discoverable enough to prevent a support call, but not so prominent that it incentivized shoppers to abandon purchases. I implemented a double-exposure strategy by placing entry points on both the Order History and Order Details pages. This accounted for the high volume of users who land directly on Order Details via email deep-links.

Handling Technical Volatility

The cancellation window is a highly volatile 60-minute period. While I initially proposed a live countdown timer to create urgency, technical constraints required a shift. I pivoted to a Static Deadline Banner that clearly communicated the "point of no return," ensuring users had a transparent expectation of eligibility without over-taxing the backend.

Managing System Complexity (BOPIS)

The architecture had to account for "Buy Online, Pick Up In Store" (BOPIS) orders, which operated on a separate backend logic and were ineligible for in-app cancellation. I designed conditional state awareness to gracefully exclude these items from the flow, preventing user frustration and ensuring the system remained reliable across all fulfillment types.

The Architecture: A Modular Flow

I designed the experience using a modular component library, ensuring that the work could scale across all Gap Inc. brands without custom design debt.

Consolidated Reason Logic

For the MVP, I worked within a "one reason per order" constraint. I designed a selection modal that triggers post-selection to streamline the decision-making process.

Granular Item Selection

Users can select specific items to cancel rather than being forced into an "all or nothing" scenario.

Financial Transparency

I developed a detailed refund summary component. This was particularly complex as it needed to calculate and display multi-payment breakdowns across credit cards, gift cards, and rewards points. Providing this level of clarity up-front is a key lever in reducing "Where is my refund?" follow-up calls.

Post-Action Logic and User Trust

Cancellations are high-anxiety moments for customers. I designed a robust Pending State to manage the gap between the user's request and the backend confirmation.

Informational Banners

Immediate visual feedback in the Order Details page confirms the request is in progress.

Reflections: Building for the Long Term

This project was less about a single button and more about defining the Self-Service Paradigm for the enterprise

The Blueprints: The UI patterns and refund breakdown logic I established are now being used as the template for the upcoming "Edit Order" and "Request Exchange" features.
Resilience: Despite frequent deprioritization and shifting technical limitations, I maintained the project's momentum by treating the design as a living spec. I ensured that every iteration was documented and "launch-ready," eventually resulting in a successful rollout that significantly improved operational efficiency.

Self-Service Order Cancellation

Project Overview

As the foundational milestone of Gap Inc.’s Customer Self-Service Initiative, the "Cancel Order" feature was designed to solve a major operational friction point: high-volume, low-complexity customer service calls.

I led the end-to-end UX for this MVP, creating a scalable framework that allows users to manage their own orders in real-time. This project laid the groundwork for a broader self-service ecosystem, including shipping edits, returns, and claim filing.

The Goal: Reduce Customer Service (CS) overhead by digitizing the "immediate-regret" cancellation window, providing users with instant resolution.

Role: Lead Product Designer | Impact: Operational Cost Reduction & User Autonomy

Strategic Challenges & Constraints

Designing for cancellations requires a delicate balance between business retention and user transparency.

Strategic Visibility and Friction

A critical challenge was balancing accessibility with retention. We needed the cancellation option to be discoverable enough to prevent a support call, but not so prominent that it incentivized shoppers to abandon purchases. I implemented a double-exposure strategy by placing entry points on both the Order History and Order Details pages. This accounted for the high volume of users who land directly on Order Details via email deep-links.

Handling Technical Volatility

The cancellation window is a highly volatile 60-minute period. While I initially proposed a live countdown timer to create urgency, technical constraints required a shift. I pivoted to a Static Deadline Banner that clearly communicated the "point of no return," ensuring users had a transparent expectation of eligibility without over-taxing the backend.

Managing System Complexity (BOPIS)

The architecture had to account for "Buy Online, Pick Up In Store" (BOPIS) orders, which operated on a separate backend logic and were ineligible for in-app cancellation. I designed conditional state awareness to gracefully exclude these items from the flow, preventing user frustration and ensuring the system remained reliable across all fulfillment types.

The Architecture: A Modular Flow

I designed the experience using a modular component library, ensuring that the work could scale across all Gap Inc. brands without custom design debt.

Consolidated Reason Logic

For the MVP, I worked within a "one reason per order" constraint. I designed a selection modal that triggers post-selection to streamline the decision-making process.

Granular Item Selection

Users can select specific items to cancel rather than being forced into an "all or nothing" scenario.

Financial Transparency

I developed a detailed refund summary component. This was particularly complex as it needed to calculate and display multi-payment breakdowns across credit cards, gift cards, and rewards points. Providing this level of clarity up-front is a key lever in reducing "Where is my refund?" follow-up calls.

Post-Action Logic and User Trust

Cancellations are high-anxiety moments for customers. I designed a robust Pending State to manage the gap between the user's request and the backend confirmation.

Informational Banners

Immediate visual feedback in the Order Details page confirms the request is in progress.

Reflections: Building for the Long Term

This project was less about a single button and more about defining the Self-Service Paradigm for the enterprise

The Blueprints: The UI patterns and refund breakdown logic I established are now being used as the template for the upcoming "Edit Order" and "Request Exchange" features.
Resilience: Despite frequent deprioritization and shifting technical limitations, I maintained the project's momentum by treating the design as a living spec. I ensured that every iteration was documented and "launch-ready," eventually resulting in a successful rollout that significantly improved operational efficiency.

Self-Service Order Cancellation

Project Overview

As the foundational milestone of Gap Inc.’s Customer Self-Service Initiative, the "Cancel Order" feature was designed to solve a major operational friction point: high-volume, low-complexity customer service calls.

I led the end-to-end UX for this MVP, creating a scalable framework that allows users to manage their own orders in real-time. This project laid the groundwork for a broader self-service ecosystem, including shipping edits, returns, and claim filing.

The Goal: Reduce Customer Service (CS) overhead by digitizing the "immediate-regret" cancellation window, providing users with instant resolution.

Role: Lead Product Designer | Impact: Operational Cost Reduction & User Autonomy

Strategic Challenges & Constraints

Designing for cancellations requires a delicate balance between business retention and user transparency.

Strategic Visibility and Friction

A critical challenge was balancing accessibility with retention. We needed the cancellation option to be discoverable enough to prevent a support call, but not so prominent that it incentivized shoppers to abandon purchases. I implemented a double-exposure strategy by placing entry points on both the Order History and Order Details pages. This accounted for the high volume of users who land directly on Order Details via email deep-links.

Handling Technical Volatility

The cancellation window is a highly volatile 60-minute period. While I initially proposed a live countdown timer to create urgency, technical constraints required a shift. I pivoted to a Static Deadline Banner that clearly communicated the "point of no return," ensuring users had a transparent expectation of eligibility without over-taxing the backend.

Managing System Complexity (BOPIS)

The architecture had to account for "Buy Online, Pick Up In Store" (BOPIS) orders, which operated on a separate backend logic and were ineligible for in-app cancellation. I designed conditional state awareness to gracefully exclude these items from the flow, preventing user frustration and ensuring the system remained reliable across all fulfillment types.

The Architecture: A Modular Flow

I designed the experience using a modular component library, ensuring that the work could scale across all Gap Inc. brands without custom design debt.

Consolidated Reason Logic

For the MVP, I worked within a "one reason per order" constraint. I designed a selection modal that triggers post-selection to streamline the decision-making process.

Granular Item Selection

Users can select specific items to cancel rather than being forced into an "all or nothing" scenario.

Financial Transparency

I developed a detailed refund summary component. This was particularly complex as it needed to calculate and display multi-payment breakdowns across credit cards, gift cards, and rewards points. Providing this level of clarity up-front is a key lever in reducing "Where is my refund?" follow-up calls.

Post-Action Logic and User Trust

Cancellations are high-anxiety moments for customers. I designed a robust Pending State to manage the gap between the user's request and the backend confirmation.

Informational Banners

Immediate visual feedback in the Order Details page confirms the request is in progress.

Reflections: Building for the Long Term

This project was less about a single button and more about defining the Self-Service Paradigm for the enterprise

The Blueprints: The UI patterns and refund breakdown logic I established are now being used as the template for the upcoming "Edit Order" and "Request Exchange" features.
Resilience: Despite frequent deprioritization and shifting technical limitations, I maintained the project's momentum by treating the design as a living spec. I ensured that every iteration was documented and "launch-ready," eventually resulting in a successful rollout that significantly improved operational efficiency.