Mobile App Cart Screen Design
Cart is a screen with high abandonment rate. User enters, sees something inconvenient or unclear, and leaves. The problem is almost never "ugly design," but overload: too many actions on screen, unclear total, inconvenient quantity editing.
Key UX Decisions Affecting Conversion
Product quantity. Two patterns: stepper (minus/plus next to item) and inline input. Stepper is more convenient one-handed, input is faster for large quantities. On iOS UIStepper from UIKit—ready component, but looks system-like. Custom stepper requires proper handling of fast taps: throttle at 300ms, otherwise server gets a barrage of requests when holding the button.
Item removal. Swipe left with action button (iOS pattern, UIContextualAction) or long press with context menu—both work. But undo-toast is mandatory: "Item removed" + "Undo" button for 4–5 seconds. Without it, accidental deletion percentage is critically high.
Totals block structure:
User must understand where the total comes from in 2 seconds. Typical mistake: discount shown as separate line in middle of list, promo code elsewhere, shipping not calculated until address selected. Result: person does not understand the sum, does not proceed.
Correct totals block structure:
- Items subtotal
- Discount (if any)
- Promo code field
- Shipping (with note "calculated on next step" if unknown)
- Total—large, highlighted
Empty Cart and Related States
Empty state—not just "cart is empty" illustration. This is the chance to bring user back to catalog. Good solution: illustration + heading + "Continue shopping" button + "Recently viewed" block if history exists.
Loading state: skeleton placeholders under each item line. Not a single spinner over whole screen.
"Checkout" button—sticky at bottom, always visible. On iOS SafeArea bottom margin is mandatory, otherwise button hides behind home indicator on iPhone X and newer. In Figma this is refined for both: with home indicator and without.
How We Do It
Figma, Auto Layout, component variants for all cell states (normal, swipe-revealed, loading). Separate component for totals block—reused on checkout screen. Handoff to developer via Figma Dev Mode with tokens and specification.
Timeline—1 day. Estimate is clarified after reviewing requirements.