Capsules — Product Design
Capsules didn't start with a brief. It started with a prototype pitched directly to the CEO — and a buy-in that gave us the runway to build something new. An immersive grocery shopping experience for 200M+ Amazon customers — Capsules launched in 3 months. Capsules didn't improve grocery shopping on Amazon. It redefined the pattern entirely.
Client
Type
Year
The customer problem + design challenge
Building a grocery basket on Amazon required a search query for every single product. The friction was killing intent before it converted — especially for perishables, where impulse and convenience drive the decision.
The design challenge wasn’t really about the grid. It was about permission — how do you deviate from a pattern Amazon has reinforced for 20 years, inside a company that moves by precedent, without losing partner trust or system scalability? The brief was to think big. The constraint was to ship in 90 days. The tension between those two things is where Capsules was designed.
We weren’t optimizing an existing experience. We were proposing a new one — and that meant every decision had to be defensible to people who had legitimate reasons to say no. That’s a different design problem than most.
Re-imagine the grid
We explored three layout directions before landing on the compact-masonry hybrid. The compact grid maximized products per screen and kept the add button consistently reachable. The masonry grid handled variable product imagery better. The card layout offered richest context but killed the browsing flow.
The hybrid solved both: dense enough to immerse, flexible enough to scale across produce, dairy, pantry, and beyond. Denser grid. Infinite scroll. Personalized suggestions. Frictionless add-to-cart. Contained shopping experience.
One screen. One session. Done.
Designing the tile
Capsules is designed for low-involvement grocery decisions. Customers aren't weighing specs. They know they want bananas. The tile had one job: get out of the way.
We explored six approaches — from the original patent vision with no title at all, to 40-character titles, 15-character titles, and ultimately a 30-character max with product and ASIN faceout. Each iteration tested the tradeoff between information density and decision speed.
The key tension: customers needed enough context to feel confident — brand, quantity, price — but not so much that the tile became a mini product detail page. Too little and they hesitated. Too much and the grid lost its immersive quality. The answer: a two-line title, 30-character limit, 92px wide tiles. Enough to add with confidence. Not enough to slow the scroll.
Accessibility: AA & AAA
A new pattern at Amazon scale meant accessibility wasn't optional. Every color decision had to pass WCAG 2.1 contrast standards before it could ship.
We tested two grey palette options against the tile background (#F2F2F2). Grey 100 Onyx (#0F1111) passed at a contrast ratio of 16.9 — well above both AA and AAA thresholds. Grey 500 Granite (#565959) passed AA at 6.3:1 for large text but failed AAA for regular text. We flagged it as a risk — a thin font can pass the contrast measure numerically and still be difficult to read in practice, especially on small grocery tiles.
The insight: contrast ratios are a floor, not a ceiling.
Results + Reflection
Capsules launched within 3 months of concept. Customers who engaged averaged 4.6 perishable units per order vs. 3.2 in control — a +44% increase. New customer acquisition up 8%. Conversion lifted across the board. The compact-masonry hybrid is now the model for perishable CX on Amazon — and the pattern is built to scale beyond grocery.
Question every inherited pattern — not as an act of rebellion, but as a necessary exploration. Even if you end up where you started, the contrast you create by stretching the idea is what earns conviction. You can't defend a decision you never truly challenged. And let leadership window shop — the best decisions get made when the people holding the stakes can see what they're choosing between.