<aside> ↕️

Daniel’s shopping direction: scroll vertically through collections and horizontally through the products in each collection.

The goal is rapid, confident gift selection. This is the required interaction direction for the handover; the claim that it is the fastest option still needs usability evidence.

</aside>

Where shopping stands

Observed live, 11 September 2026: choosing a gift from the calendar opens a combined review page. It shows a selected product and sizes, a grid of alternative designs, an Under 100 grid, delivery fields, note and total. Desktop and a 390px mobile viewport both showed grids rather than horizontal collection carousels.

Source check: the intended /club/send/[person] route is absent from the reviewed main-branch route inventory. Issue 42 remains open and describes the separate shop in detail. Daniel’s direction in this handover is consistent with that brief.

Implication for the team: the shopping work includes completing a defined interaction, with catalogue/engineering dependencies. Other parts of the handover are polish of existing screens.

Intended journey

flowchart LR
  A["Calendar: choose a gift for a dated person"] --> B["Collections shop"]
  R["Reminder: choose a gift"] --> B
  B --> C["Tap a product tile"]
  C --> D["Selected-product confirmation"]
  D --> E["Size if applicable + address + note + total"]
  E --> F["Shopify checkout"]
  F --> G["Payment-confirmed feedback"]
  D --> B

Entry: the member has a particular person in mind. Keep that person and birthday visible. If the date is unknown, the useful next step is completing the person’s profile.

Browse: moving vertically changes the collection being considered. Moving horizontally explores alternatives within it. The page should not shift sideways as a whole.

Choose: a tile selects one product and opens confirmation. Browsing itself creates no purchase.

Confirm: keep the selected product, offer applicable size choices, collect/review delivery and note, then show the complete price before checkout. A return to browsing should preserve useful position and context.

The current reminder email also links to particular designs through a product parameter. Decide how those links enter the new journey: a known product can open selected-product confirmation directly, while the generic gift CTA can open the shop. Preserve the member’s person/product context.

Page structure

1. Person context: back to calendar; person’s name and birthday; clear skip option.
2. Collections: a vertical series of named horizontal rows.
3. Tiles: uncropped product image in a 4:5 frame, title, and price/from-price.
4. Selection transition: open a focused confirmation screen with the tapped product.
5. Confirmation: address, applicable size, handwritten card note, delivery eligibility, benefits and itemised total.

Do not put address fields or size toggles on shop tiles. A one-size product stays one-size. Show variants on confirmation where they are useful.