UX Case Study · E-Commerce

Instant Discovery
Shopping Experience

A gesture-first mobile shopping experience that eliminates the friction between browsing and buying — without ever leaving the feed.

4 Weeks
Timeline
Product Design
Role
Mobile iOS
Platform
E-Commerce
Domain
Shop
👕
Oversized Tee
$49
🧥
Denim Jacket
$89
👖
Cargo Pants
$65
👜
Mini Bag
$35
👕
Oversized Tee
$49.00
XS
S
M
L
XL
Swipe up to shop
Overview

A faster path
from browse to buy.

Mobile shoppers abandon carts not because they're uninterested — but because checking availability requires too many taps. This project explored a gesture-native interaction model to close that gap.

My Role
End-to-end product design, interaction model, prototyping
Tools
Figma · Protopie · Maze · iOS HIG
Deliverables
3 iterations · High-fi prototype · Usability findings
Outcome
92% task success · SUS 84 · 83% time reduction
The Problem

Shopping feels like work,
not discovery.

Checking whether a product is available in your size means navigating to a detail page, scrolling past images, selecting a variant, and reading stock info — 5+ taps, and 18 seconds lost. On mobile, that's enough to lose the sale.


The core tension: users want to evaluate multiple products quickly before committing. The current tap-to-detail model forces commitment too early.

67%
of mobile users abandon product pages before selecting a variant — often due to friction, not disinterest.
5+
taps required to check a single product's availability in a specific size and color.
18s
average time to evaluate one product variant — an eternity when browsing a feed.
Goal & Context

Design for the browser,
not the buyer.

Most e-commerce UX optimises for the checkout flow. This project focused earlier — on the discovery moment, when users are still deciding whether a product is worth their attention.

🎯
Design Goal
  • Let users evaluate size and color availability without leaving the feed
  • Use gestures already familiar from social apps — no new mental models
  • Keep the purchase path short: two gestures from browse to bag
  • Preserve scroll position and browsing context throughout
👤
User & Context
  • Mobile-first shoppers aged 18–34, browsing in short bursts
  • High TikTok and Instagram usage — comfortable with gesture navigation
  • Compare multiple products before deciding; hate losing scroll position
  • Often abandon on size/color check — not on price or product appeal
Concept

Peek. Swipe. Shop.
Never leave the feed.

A three-gesture system that surfaces product information contextually — triggered by intent, dismissed without disruption.

Instant Peek
Long-press any product card to surface a floating overlay — size availability, color variants, price. Release to dismiss. Feed layout is never disturbed.
long-press 300ms
Swipe to Explore
Horizontal swipe inside the peek overlay cycles through color variants. Image, stock indicator, and price update in real time. Haptic tap confirms each change.
swipe horizontal
Quick Shop
Swipe up 80px to open a purchase modal — pre-filled with the selected variant. One tap adds to bag. Two gestures from browse to cart; scroll position preserved.
swipe up 80px
Interaction Design

Gestures users already know,
applied where they've never been.

Every gesture was mapped to an existing mental model from social apps — long-press for context, swipe to browse, pull-up to act.

👕
Oversized Tee $49
1
Long Press to Peek
300ms hold reveals a floating overlay with size availability and color options. Background dims. Feed stays in place.
300ms threshold · spring animation · haptic trigger
2
Swipe to Browse Variants
Horizontal swipe cycles through colors. Velocity-sensitive: faster swipe jumps ahead. Each step triggers a haptic tap.
180ms crossfade · haptic on each step
3
Pull Up to Purchase
Swipe up 80px opens Quick Shop modal, pre-filled with the selected variant. Single tap to add to bag.
250ms spring physics · overshoot · 80px threshold
4
Confirm & Return
Checkmark animation confirms the add. Auto-dismisses after 1.2s. Scroll position restored exactly.
1.2s auto-dismiss · position lock · morph animation
Final Design

Four screens.
One seamless flow.

Each screen serves one moment in the gesture sequence — browse, evaluate, select, confirm.

Feed
Browse
Peek Overlay
Oversized Tee
$49.00
Preview
Quick Shop
Oversized Tee
Violet · M
Add to Bag — $49
Purchase
Confirmation
Added to Bag
Confirm
Iteration Process

Three versions.
Each one earned.

Every iteration responded to real usability findings — not assumptions. The gesture model only emerged after two rounds of testing proved simpler approaches failed.

Version 1
Tap to Expand
Inline card expansion pushed the feed layout down on activation. Users lost their scroll position. 40% accidental trigger rate in testing.
Disrupted flow
Version 2
Overlay + Tabs
Floating overlay fixed the layout disruption. Tabbed variant navigation added cognitive overhead — users expected to swipe, not tap tabs.
Too much friction
Version 3 — Final
Gesture-Driven
Long-press, swipe, pull-up. Single unified view. Removed all navigation chrome. Users described it as "feels like TikTok for shopping." SUS: 84.
Shipped
Impact

Faster discovery.
Higher conversion.

Tested with 18 participants via Maze. Key metrics measured against the baseline tap-to-detail flow on a leading e-commerce app.

3s
Time to Evaluate
Down from 18 seconds
92%
Task Success Rate
Find and add specific variant
84
SUS Score
Above industry avg of 68
My Role

End-to-end product design.

Interaction model definition
User flows & mobile UI
High-fi interactive prototyping
Usability testing & iteration