Replacing Amazon's Quantity Dropdown with a Stepper

On both the Product Detail Page and the Cart, adjusting the item quantity required tapping a dropdown. On mobile, that tap opened a native modal picker covering most of the screen. The user had to scroll through a list, select a number, and dismiss the modal just to change a quantity.

For a customer who just wants to order two of something, this is a surprising amount of friction. The modal interrupts the purchase flow, takes focus away from the product, and adds unnecessary steps before reaching the "Add to Cart" or "Proceed to Checkout" button.

The same pattern appeared in the Cart. "Qty: 1 ▼" as a tappable element that, again, triggered a modal list. Customers who wanted to bump a quantity from 1 to 2 had to open a modal, scroll to 2, tap it, and dismiss. Three steps for a one-unit change.

The redesign replaced the dropdown with a stepper: a minus button, the current quantity, and a plus button, all inline on the page. No modal. No navigation away from the product. Tapping + or − updates the quantity immediately, right where the customer is already looking.

This pattern matches how customers think about adjusting quantity: incrementally. Almost no one opens a quantity selector intending to jump from 1 to 8. They want one more, or one less. The stepper makes the most common action (add one) a single tap.

The stepper redesign extended to the Cart page, where the dropdown pattern was equally disruptive. The before state shows the standard "Qty: 1 ▼" control sitting below the product. The after state replaces it with a compact stepper that sits inline with the Delete and Save for later actions.

The cart version also pairs the stepper with a trash icon, giving customers quick access to removal without a separate interaction. Updating quantity and removing an item are now both one tap.

The stepper pattern was also applied to the desktop PDP, replacing the quantity dropdown in the buy box. On desktop the interruption is less severe since there's no full-screen modal, but the stepper is still a faster interaction and keeps the user's attention on the buy box rather than a separate control.

The dropdown made sense on desktop, where a select element is a familiar and compact control. On mobile it became a liability: native select elements on iOS and Android open full-screen pickers that are visually heavy and disruptive to the flow.

• Most quantity changes are incremental (+1 or −1), which the stepper handles in a single tap
• The stepper keeps the customer on the page, maintaining context and reducing cognitive load
• The pattern is immediately recognizable and requires no instruction
• Touch targets for + and − are large and easy to hit accurately
• The current quantity is always visible without any interaction

This project is an example of a small interaction change with a disproportionate impact on the purchase experience. The stepper doesn't add features; it removes friction from something customers do on nearly every order.