03 / Local retail
A shop with a beautiful shelf and a checkout that lost half its carts.
A neighborhood general store selling pantry goods, tools, and gifts, with an online store bolted on during a slow season and never revisited. Identity, packaging, and a storefront rebuilt around one fact: most customers are standing in the aisle holding their phone.
0 views
01 — Context
The situation
Fieldnote does the hard part well: buying, merchandising, and a physical shop people linger in. The online store was a template with 40 products, stock photography that did not match the shelf, and a five-step checkout requiring account creation.
Cart abandonment sat near 70%, and the shop's own staff routed customers away from the site to a phone order — the clearest possible verdict on the checkout.
02 — Problem
What was actually broken
- Identity split in two — The in-store experience and the online one looked like different companies, so the site never inherited the shop's goodwill.
- Checkout required an account — A five-step flow with an account wall on step two, for an average order of $34.
- Photography mismatch — Supplier stock images meant the product on screen was not the product on the shelf.
- No mobile consideration — The template was designed desktop-first in a business where 82% of sessions were phones.
03 — Approach
How the work was shaped
The identity work came first because the checkout problem was partly a trust problem. If the site does not look like the store, a card form is a bigger ask.
- One identity across shelf and screen — A wordmark, a stamp mark, and a label system that works printed on kraft paper and rendered at 44px on a phone.
- Guest checkout in two steps — Email, shipping, pay. Account creation is offered after the order is placed, when it costs the customer nothing to decline.
- Product pages that answer aisle questions — Origin, size, what it goes with, and whether it is in stock at the shop right now — the four things staff get asked in person.
- Photography direction, not photography — A shooting guide the owner can follow with a phone: same surface, same light, same angle. Consistency beats production value for a 40-SKU catalog.
04 — Decisions
Three calls worth defending
- Kept Stripe Checkout instead of building a custom one — A hosted, familiar payment page converts better than anything a studio can hand-build for a shop this size, and it removes card data from the business entirely.
- Put in-store availability on the product page — Half of online browsing was pre-visit research. Telling people it is on the shelf drives a trip, which is the higher-margin sale.
- Designed labels before the site — The label constrains the palette and type in the least forgiving medium. Once it worked at 2×3 inches on kraft, the screen was easy.
05 — System
Color and type
Archivo at heavy weights for shelf-readable labels, mono for lot numbers and origin lines — the details customers photograph and send to friends.
Field Brown
#3a3129
Clay
#d98b5f
Lime Gold
#E7E247
Mist
#E9EDDE
Paper
#E9EDDE
06 — Outcome
What the engagement delivers
5 → 2
Checkout steps, with the account wall removed
40
SKUs with a consistent label and photo system
82%
Of sessions designed for first: mobile
AA
WCAG 2.1 AA including label contrast in print
The engagement produced a brand system that survives contact with a printer, a storefront that treats the phone as the primary device, and a checkout the staff no longer route customers away from.
Reflection
The temptation on a retail project is to spend the budget on the homepage. Nearly all of the value here sat in two screens — the product page and the payment step — and in a label template the owner can fill in themselves for the next hundred products.