Tidewater Supply

A concept storefront for a home and kitchen retailer, built so a kitchen can be shopped the way it is used, one table at a time.

ConceptFictional project. No real client, and nothing here is a measured result.

Sector: Home and kitchen retail
Service: E-commerce solutions
Year: 2026

Concept design: Tidewater Supply

Concept storeFree delivery over $75Sixty days to change your mind

SearchBag 3

The autumn tableCook slow.
Set it well.Heavy pots, honest bowls, and good linen, chosen to live on the table all year.Shop the table

New on the shelfView all

Beech pepper mill$42

Dipped mug$24

Harbor carafe$58

Striped tea towel$18

Your bag3 items

Slack Tide Dutch Oven5.5 qt, Deep water−1+$148

Shoreline bowlsSet of 4, Bone−1+$64

Linen napkinsSet of 4, Sand−1+$36

Goes with the ovenBeech pepper millAdd $42

Free delivery included

ArrivesThursday

Total$248.00

Checkout

Slack Tide Dutch Oven5.5 qt, Deep waterAdd $148

// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}

// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}// Hold the stock before the buyer reaches checkout.export async function addToBag(bag: Bag, sku: string, qty = 1) {  const stock = await inventory.check(sku);  if (stock.available < qty) return waitlist(sku, bag.customer);   const line = bag.lines.find((l) => l.sku === sku);  if (line) line.qty += qty;  else bag.lines.push({ sku, qty, price: stock.price });   await inventory.hold(sku, qty, { minutes: 15 });  bag.total = bag.lines.reduce((sum, l) => sum + l.price * l.qty, 0);  return saveBag(bag);}

In this concept

Storefront
Checkout
Product pages
Inventory

Tidewater Supply is a concept project. It is not a real retailer, and nothing here describes a client. We made it up to show how we would approach a storefront in this category. Every outcome below is a design goal, not a measured result.

The problem

Picture an independent home and kitchen shop with a good eye and a loyal local following. The physical store works because things sit together: a pot beside the bowls it pairs with, a towel folded next to both. People come in for one thing and leave with a table.

The online store does none of that. It is a grid of white squares sorted by category. Colourways are separate listings, stock counts live in a spreadsheet, and heavy items only reveal their delivery cost at the last step. Buyers can find a product, but they cannot see how it fits with anything else.

The approach

Start from the shop floor, not the catalogue. A storefront for objects people live with should sell the way a good shop does: show things together, in use, and make it easy to take the whole set home.

So the page leads with a composed table rather than a product grid. Every object in the scene is shoppable in place. The bag stays open beside the browsing instead of pulling people away from it. Price, stock, and delivery date are visible before anyone is asked to commit.

What we would build

Shoppable scenes. Composed tables with tagged products, edited by the shop team without a developer.
One product, many colourways. A single page per object, with swatches that change the image, the stock, and the delivery date together.
A bag that stays beside you. Add from anywhere, adjust quantities, and see the total without losing your place.
Live stock with short holds. Items are held briefly when added to the bag, so nobody reaches payment and finds the last one gone.
Delivery that tells the truth early. Cost and arrival date shown on the product page, including for heavy and fragile items.
A short checkout. One page, express payment first, guest checkout by default.

Key screens

The table

The home page. One scene, one line of copy, a tagged hero product, and a short shelf of new arrivals beneath it.

The product page

Large imagery, colourway swatches, care notes, and a “goes with” shelf drawn from the scenes the product appears in.

The bag

A drawer on desktop and a bottom sheet on the phone, with quantities, delivery, and one clear way forward.

Checkout

One page. Express payment at the top, address lookup below it, and the delivery date repeated at the moment of paying.

Design goals

These are the targets we would design and test against. They are goals, not results.

A first-time visitor can tell what the shop sells, and why it is different, from the first screen.
Someone on a phone can go from a scene to a paid order with as few steps as we can honestly get away with.
Nobody sees a new cost at checkout that they could have been told about earlier.
The shop team can publish a new table themselves in an afternoon.