Joshua Grams Work Process Hire Email
Interactive prototype · E-commerce · Product design · 2026

Product page redesign: the same product, before and after, with every decision annotated.

A working prototype rather than static frames. Switch between the original layout and the redesign, turn on the decision notes, change a variant, add to cart. The product is fictional. The decisions come from seven years of watching real product pages convert or not.

What it is
A coded, interactive PDP prototype with annotated rationale
Problem framed
Typical mid-market PDP: price and CTA below the fold, no stock signal, no trust near the button, dead variant picker
How to use
Toggle Before / After. Turn on Decisions. Resize to phone width to see the sticky buy bar.
Built with
HTML, CSS, vanilla JS. No framework, no build.
Home › Products › SKU-4471
Click image to enlarge
Ceramic Pour-Over Dripper, Stoneware, Handmade, 2 Cup / 4 Cup
Our ceramic pour-over dripper is a beautifully crafted stoneware brewer designed for the discerning coffee enthusiast. Each piece is handmade and glazed by skilled artisans, which means slight variations in color and texture make every dripper unique. The conical shape and spiral ribs promote even extraction, while the thick ceramic walls retain heat throughout the brew for a consistent cup. Compatible with standard size 02 paper filters. Perfect for home or office. Makes a great gift. Dishwasher safe. Please allow 1–2cm variance in dimensions due to the handmade nature of the product. Not suitable for stovetop or microwave use.
$48.00
See shipping policy page for rates and delivery times.
Home › Brew › Ceramic Pour-Over Dripper
1
Bestseller
2 3 4 5 6 7
Brew · Pour-over

Ceramic Pour-Over Dripper

★★★★★4.8 · 212 reviews
$48

Hand-glazed stoneware that holds heat through the whole pour. Spiral ribs for even extraction. Takes standard 02 filters.

Size 2 cup
Color Stone
In stock · ships in 1–2 business days
1
Free shipping over $50Most orders qualify
30-day returnsNo questions asked
Made to last2-year guarantee
Pair with 02 filters (100)Save $4 when bought together
Details & dimensions

2 cup: 11 cm × 9 cm, 420 g. 4 cup: 13 cm × 10.5 cm, 560 g. Handmade stoneware, slight variation expected. Not for stovetop or microwave.

Shipping & returns

Ships from Florida in 1–2 business days. Free over $50, otherwise $6.95 flat. 30-day returns on unused items.

Care

Dishwasher safe. Avoid thermal shock from freezing to boiling.

8

What buyers say

Holds heat better than my glass oneTwo months in, daily use. The 4 cup is the right call for two people.
Beautiful, heavy, worth itGlaze is slightly different from the photo, which I expected and like.
Fits my 02 filters perfectlyDrains at a good pace. Would buy the Ink color next.
$48
2 cup · Stone
1
Large square gallery with thumbnails and a badge

The original used a small 4:3 image with "click to enlarge." Buyers of a physical object need to see it at size without a click. The Bestseller badge is social proof before the user reads a word.

2
Short name, category kicker, rating under the title

The original title was a keyword string. The name is now the product; the category lives above it; the rating with a count sits directly under it, where eyes land second.

3
Price next to the title, not after the description

In the original the price came after 120 words of copy. Price is the first qualifying question. It moves up, and it updates live when the variant changes.

4
Visible variant buttons instead of a "Choose an option" dropdown

Every option is visible and tappable. Selected state is obvious. Out-of-stock options are shown struck through rather than hidden, so the buyer knows it exists and can choose the next best thing.

5
Stock and ship time directly above the button

"In stock, ships in 1–2 days" answers the "when will I get it" question at the moment of commitment. The 4 cup shows a low-stock message to demonstrate the urgency state.

6
Quantity plus a single primary CTA that carries the price, then trust

One primary action. The CTA repeats the live price so there's no surprise in the cart. Shipping threshold, returns, and guarantee sit immediately under the button, which is where hesitation happens.

7
Bundle offer and collapsed details

A relevant add-on with a stated saving, placed after the primary CTA so it never competes with it. The long description becomes three accordions: details, shipping, care. The content is still there, it just stopped blocking the decision.

8
Reviews summarized on the page, and a sticky buy bar on mobile

Three short quotes with a headline each, so the social proof is readable without a reviews widget. On phone widths, a sticky bar keeps price, selected variant, and Add to cart on screen while the user scrolls the details.

Why a coded prototype

Because the interactions are the design.

A static mock can't show that the price changes when the variant does, that the out-of-stock state is visible but not selectable, that the cart opens without leaving the page, or that the sticky bar appears at phone widths. Those details are where product pages win or lose, and they're cheap to build once the layout is settled. This prototype is the kind of thing I'd hand to engineering as the spec, with the decision notes as the rationale.

PDPConversion UXVariant logicMini cartMobile sticky CTAAnnotated rationale