--------------- ------------------ -------------
Increased cart revenue without growing traffic
I redesigned the cart structure, removed unnecessary steps, and made service fees transparent. Average order value and conversion increased through better scenarios — not marketing.
System thinking
Logic & structure
Scenario design
Working with business constraints
UX patterns
In-product upsell
The cart redesign was part of a larger product update. The focus was on the most fragile point of the funnel — the step right before checkout. The cart stopped being “the place where everything breaks” and became a controlled screen that protects business metrics while reducing users’ cognitive load.
Problem
Broken flow and loss of focus
The delivery / pickup address was not displayed in the cart header. To change the location, users had to go back to previous screens. This broke the flow, slowed checkout, and increased drop-off.
Deletion hurt revenue
A prominent “Delete” button was placed next to the item counter and removed items instantly. Any moment of hesitation often led to removing parts of the order — lowering AOV and increasing cart abandonment.
Packaging looked like a product
The service fee for packaging was displayed as product cards, identical to food items. This cluttered the interface and created a feeling of a forced add-on. Packaging could not be removed, but the interface didn’t explain that clearly — causing distrust and more support requests.
Lack of explanatory states and tone of voice
The interface did not communicate business rules (item unavailability at a location, restrictions, packaging composition). Users didn’t understand why prices changed or why items became unavailable.
Roll counter logic error
Sushi is sold in sets of 8, but the counter behaved like a per-item counter. Users saw “8” and assumed they were ordering 8 sets. This broke the mental model and caused price confusion.
Hypothesis
If
  • Move the address/location and key order conditions into the cart header;
  • Separate packaging into a service block with a bottom sheet explaining packaging types and pricing logic;
  • Switch the counter to a “sets” model and clearly show “price per 8 pcs”;
  • Replace instant deletion with a two-step swipe interaction with an intermediate “Undo” state;
  • Add controlled in-product upsell (sticks, sauces, drinks, items to reach free delivery) as a dedicated block with a bottom sheet;
Then
Users will abandon carts less often, errors with roll quantities will decrease, negative feedback about packaging will drop, AOV will grow through structural upsell without dark patterns, and the business will gain a more predictable, controllable funnel.
Task
  • Keep users focused on completing the order directly in the cart, without unnecessary navigation to address settings;
  • Make packaging honest and transparent: explain it as a service, remove it from the food list, reduce the feeling of hidden fees;
  • Reduce drop-off and protect revenue through deletion/undo mechanics and stronger upsell;
  • Ensure clarity and accessibility: clear hierarchy, understandable tone of voice, predictable behavior.
Solution
Address and fulfillment method directly in the cart
Users stay in the flow: they change parameters, immediately see how availability and price change, and return to the checkout CTA. Fewer drop-offs caused by navigation and location confusion.
New card structure and deletion logic
Cards are structured as: name - composition - price per set - total - counter.
The instant “Delete” button was replaced with swipe actions: first swipe moves the item into an “Undo” state, the second swipe deletes it permanently. This protects AOV from accidental removals.
Packaging as a separate service module
Packaging was moved into a dedicated “Order Packaging” block, visually separated from food. A bottom sheet explains packaging types and pricing justification. Users clearly understand it as a service, not a product.
Fixed set-based counter logic
“1” = one set (8 pcs), “2” = two sets. Cards explicitly show “price per 8 pcs” and the total number of rolls. This removes confusion and makes counter behavior predictable.
Contextual upsell
A “Don’t forget to add” block suggests complementary items. If the cart doesn’t reach free delivery or lacks add-ons, tapping the CTA opens a bottom sheet with relevant suggestions. The main CTA remains accessible — users can always proceed.
Design approach
The first step was separating what used to be mixed together: food, packaging, and service conditions. The cart gained a clear architecture: products, service blocks, upsell, and final CTA — each with its own role and attention level.
Transparency over hidden fees
Service charges are presented as a separate module with clear explanations.
Action insurance instead of punishment
Two-step deletion and clear micro-states allow users to reconsider and reduce errors.
Native upsell
Upsell is designed as user assistance (functional upsell), not aggressive promotion.
Product scalability
Solutions account for multiple locations, menus, and business constraints; patterns scale easily.
Implementation details
  • Rebuilt cart architecture into four blocks: products, services (packaging & delivery), upsell, final CTA — each with defined priority.
  • Defined scenarios for key branches: address/location change, item unavailability by location, reaching free delivery, first vs repeat order.
  • Designed interaction patterns: swipe-to-delete with intermediate state, bottom sheets for packaging and upsell, fixed CTA zone.
  • Embedded business rules into the interface: paid packaging as a mandatory service fee, 8-piece sets as the base counter unit.
  • Prepared a design specification for development: card states, recalculation formulas, bottom-sheet logic, and copy scenarios.
  • Rebuilt the visual layer using the new design system and UI guidelines.
Estimated results
  • Cart screen drop-off: −10–20% due to fewer unnecessary steps;
  • Average order value: +5–12% from structural upsell (sticks, sauces, items to reach free delivery) and fewer accidental deletions;
  • Time to reach “Checkout”: reduced by 15–20% due to the removal of unnecessary steps and a clear, well-structured block hierarchy.
The cart redesign solved several long-standing issues at once: unclear packaging fees, quantity confusion, broken flows, and painful item removal.
The cart became a clear, self-contained step: users see the full order context, transparent service fees, roll sets, and gentle upsell — while the business gets a more predictable AOV and lower drop-off at the most critical moment.
Made on
Tilda