ALTERRA
A store that reads like a field journal and checks out in three taps.
- E-commerce, UX / UI, Web Design, Development
- Earthy · Immersive · Editorial · Premium · Photography-led
- Product copy stays sans; storytelling switches to serif.
A fictional outdoor lifestyle brand with an immersive commerce experience built around products, storytelling, and exploration. The concept tests how far editorial can go before it costs conversions.
The idea
Outdoor brands win on story, then lose the sale in a cluttered cart. The concept keeps the storytelling loud and the buying path quiet — long-form journal pages that hand off cleanly into product.
The approach
Every journal entry is shoppable. Products appear inline where they are actually used, with an add-to-bag that never leaves the page.
Design direction
Warm clay ground, deep forest accent, photography given full width. Product cards stay flat and calm so imagery carries the weight.
bg
#efe9de
surface
#ffffff
text
#23211c
muted
#7a7263
accent
#3f6b4a
- Wide grotesk with a soft humanist edge
- Readable serif for long-form field notes
Interaction
A slide-over bag with quantity, size, and shipping estimate. Size selection persists across pages. Checkout collapses to three visible steps with progress kept in view.
How it's built
Commerce data fetched per route with optimistic cart updates, image sizes tuned per breakpoint, and a checkout flow that degrades to standard form posts.
- Inline shoppable product blocks inside journal entries
- Slide-over bag with live shipping estimate
- Three-step checkout with visible progress
- Size and fit selector that persists across routes
- Optimistic cart updates with server reconciliation
- Responsive image sizing tuned per breakpoint
- Checkout degrades gracefully without JavaScript