Start a project

Concept projectA self-initiated brief, not client work. Product names are fictional.

Field Goods · One-tap storefront

From product to paid in one tap.

A storefront for a small homeware and clothing label, built around the product page and a checkout that fits on one screen.

Scope
6 deliverables · 4 phases

The challenge

Small labels lose buyers in the gap between “I want this” and “paid”: account creation, long forms, surprise shipping costs. On a phone, each extra screen is a reason to leave.

Goals

  • Designed so a returning buyer can pay with a saved wallet in one tap.
  • Designed to answer size, delivery and returns questions on the product page itself.
  • Built to load product pages fast on a mid-range phone.

Approach.

  1. 01

    Product page first

    Large imagery, one clear price, sizes as big tap targets, and delivery dates calculated before checkout.

  2. 02

    The bag is a drawer

    Adding to bag never leaves the page. The drawer shows the total with shipping, and pays from there.

  3. 03

    Guest by default

    No account required. Express wallets first; the card form only appears if you ask for it.

What we built.

A headless storefront with collection and product pages, a slide-in bag with express checkout, order tracking, and a matching mobile shopping experience.

Product page — sizes as big targets, the delivery day before checkout, and express pay next to “Add to bag”.
The bag is a drawer — the total with delivery, and one button to pay. No account needed.
On a phone the buy bar stays under your thumb.

Concept screens, designed and built in HTML and CSS. All names, figures and data shown are fictional.

Design decisions.

  • Warm paper, one bright mark

    The palette takes its cue from kraft paper and clay, with Signal reserved for the one button that matters on each screen.

  • Delivery date, not shipping speed

    “Arrives Thursday” beats “3–5 business days”. It is calculated from the visitor’s location before they reach checkout.

  • No pop-ups

    No newsletter modal and no countdown timers. A calm store is a trustworthy store.

How it would ship.

The plan we would run for a project like this, with a demo every week.

  1. Weeks 1–2Funnel review, product page design
  2. Weeks 3–4Collection, bag, checkout design
  3. Weeks 4–8Headless build, payments, CMS
  4. Week 9Test orders, launch checklist

Stack

  • Shopify (headless)
  • Hydrogen
  • TypeScript
  • Shopify Payments
  • Apple Pay and Google Pay
  • Sanity

Deliverables

  • Store design (mobile first)
  • Headless storefront
  • Express checkout
  • CMS for editorial pages
  • Order tracking page
  • Launch QA
Next concept DispatchA support desk that never sleeps