Three directions, one page job

A shopper who taps a peanut butter ad already wants peanut butter, so the first screen spends itself on being obviously the right jar: the product at full screen width, who it is, what it costs, one honest proof number, and a button big enough to be the only thing worth pressing. Everything below answers a decision that has already started forming, in the order a forming decision asks for it.

Top three findings

• P1The primary add-to-cart is filled with the rust identity colour. Brand canon reserves green ink as the only button fill and bars rust as a button fill. Measured in source at index.html line 103. Contrast is fine at 7.37 to 1 white on rust; the cost is systemic, because rust is the identity colour and green ink is the action colour. B is the only direction that gets this right today. Post-review update (2026-09-02, later): the button is now green_ink on the deployed mockup, with green_ink_deep on hover and the dual-panel border also moved to green_ink, per canon (Storefront Design Studio commit 776c590). Brand Studio's re-audit verdict: A = PASS. The first-screen captures on this card still show the pre-fix rust fill.
• P2The ingredient statement is collapsed behind a disclosure, and so is the founder story. Seven disclosures page-wide. For a diet-adjacent food bought by a stranger, what is in it and who made it are two of the top three objections. C renders both open.
• P3The buy card's top edge slices the red brand band on the jar mid-word in the mobile hero. Visible at both 360 and 390. It reads as a clipped photograph rather than an intentional macro. Resolves itself if the printed nutrition row is allowed.

Open the Direction A mockup

Cold traffic is not deciding whether it understands the product, it is deciding whether WiO is a real company worth 13.79 dollars of risk, and it decides in the first screen or not at all. So credibility is composed into the purchase control rather than beneath it, and because a low-carb food carries a strong prior that it tastes like a compromise, the page opens on food rather than on packaging.

Top three findings

• P1Two add-to-cart controls sit on screen together for roughly 800 pixels of scroll. The sticky bar is gated on the main button only, so it stays up when the closing button arrives. Measured at 390 by 796 with an asynchronous sweep: 7 of 49 sampled offsets violate the invariant, first at document y 3960. At y 4200 the closing button sits at viewport top 458 to 510 at 137 pixels wide, and the sticky button at 740 to 788 at 110 pixels wide. A synchronous sweep reports a pass here, which is why one was not used. C ships the fix: one observer watching both controls.
• P1The footer logo renders 96 by 180 from a 360 by 180 source, a 3.75 times horizontal squash of the wordmark, in the full-colour variant on a rust ground where the burgundy word nearly disappears. Computed style on the footer image is width 96px, height 180px, object-fit fill, natural width 360. Canon places the real file unaltered and uses the reverse variant on dark anchor bands.
• P2The jar never renders at a size a shopper can read. Its one appearance is at document y 3314 of 5,776, in a 326 by 170 box where the jar itself measures about 177 by 170. On desktop it is a 78 by 78 thumb. This is the honest price of B's thesis, and B's own rationale says so. Worth deciding on rather than discovering after launch.

Open the Direction B mockup

The reason to buy this jar is not that it is peanut butter, it is that a food scientist set out to rebuild a specific childhood food and will tell you why in his own voice. So the founder's opening line rides inside the buy card above the price, and the page below is that argument in order, typeset rather than hidden behind a disclosure.

Top three findings

• P1The founder sentence in the first screen ends in an ellipsis with no continuation link. Nothing sits between it and the byline; the story itself is 2,500 pixels below. A and B carry the identical sentence with a read-more link directly beneath it. As rendered here the direction's whole bet lands as unfinished copy: the shopper meets half a person and is not told a story exists.
• P1The primary add-to-cart is filled with the rust identity colour, the same canon conflict as A. Measured in source at index.html line 88. Settle this once across all three, not inside one of them. Until it is settled, no button-level comparison between the directions is fair. Post-review update (2026-09-02, later): the button is now green_ink on the deployed mockup, with green_ink_deep on hover and the dual-panel border also moved to green_ink, per canon (Storefront Design Studio commit 776c590). Brand Studio's re-audit verdict: C = NEARLY FIT, with F4 (calories-before-carbs macro order) still open, plus three medium items. The first-screen captures on this card still show the pre-fix rust fill.
• P2The guarantee crosses the conservative 660 line at 360 width, at 654 to 673, contradicting the deliverable's own stated claim that everything through the guarantee is on screen at rest. At 390 it is inside, at 612.9 to 631.9. In the subscribe state at 360 it lands at 707 to 726. About 15 pixels would fix it; the quantity row is the cheapest candidate.

Also flagged, and it belongs to Jason rather than to me: C is the only direction that promotes both of the family's two flagged phrases into the first screen, an uncited study reference and the metabolic phrase the copy pack itself marked for review. A places the same sentence about 2,900 pixels down and B ships the approved alternate instead. The strings are approved; the position is a design decision, and it converts a below-fold risk into the page's opening claim on a paid-Meta destination.

Open the Direction C mockup