Worked example: Ecommerce / DTC
Interactive ecommerce demonstration
Our own worked example: a clickable DTC storefront showing the buying questions a product grid can answer, plus an illustrative Stripe and measurement setup.
A demonstration build on one of our own live demos, not a client project. It shows exactly how we’d approach yours.
Aurora is one of our seven live demos: a direct-to-consumer storefront we built as our own brand, so you can inspect the interface directly. The storefront is live on the demo; the wiring described here is an illustrative implementation scope, not evidence of a client outcome. Open the live Aurora demo →
What the concept demonstrates
A product page has to answer a short sequence of buying questions: what is this, is the information credible, what does it cost, when could it arrive, and what happens if it is returned. Aurora lets you inspect one way to present those answers before checkout.
The storefront, decision by decision
- A category bar supports product exploration. "New in", "Bags", "Wallets" and "Sale" sit above the grid so visitors can move between product groups.
- Product cards show a sample rating pattern. The demonstration marks ratings and review counts as illustrative. A client build needs an attributable source and publication permission before live reviews appear.
- Was/now pricing and badges demonstrate merchandising states. Sample former prices, discounts and labels show the available layout. A live store supplies current, supportable promotion data.
- Add-to-cart lives on the card. An add-to-cart button on the card itself, so a buyer who has already decided skips a page load between intent and basket.
- Delivery and returns terms sit beside the buying path. The demonstration uses sample wording; a live store publishes the terms the merchant has approved and can fulfil.
The build decisions
- A custom storefront on Next.js and React, built the way we'd build yours: the code, the Stripe account and the customer list in your name from day one, with room to grow.
- Stripe under the store's own account. Stripe-hosted collection keeps sensitive card details away from the site's server and can reduce PCI scope. The merchant completes the validation required for its account and setup, while transaction fees remain visible in the account.
- Performance as a design requirement. Images, fonts and the product grid are tested against agreed Core Web Vitals and everyday devices before release.
Wiring the funnel
Built for a client, the storefront ships with the funnel wired:
- GA4 events on agreed buying steps such as product view, add-to-cart, checkout started and purchase, configured to follow the visitor's consent choice.
- CRM handoff for captured sign-ups. Newsletter submissions can pass to the chosen CRM with the agreed source context. Turing Automate owns abandoned-basket follow-up and other post-capture workflows.
- Google Ads site-action measurement. The agreed checkout actions can be configured as conversion events, with account ownership and validation included in the release checklist.
Recolour it to your brand
The whole demo runs on design tokens. Drag the palette customiser and the grid, badges and checkout repaint to your brand in seconds: the fastest way to see your own shop in it.
What a build like this costs
Online selling sits in our Growth tier, from £5,000, fixed and itemised, with every tier published on our web design pricing page. A store at this level typically takes around 6–10 weeks from kick-off to launch, depending on how ready your product data is.
This is how we'd build yours
Aurora is our own demonstration, made clickable, and the thinking behind it is written up on our web design for ecommerce brands page. If you want a store built and wired the same way, tell us where you're headed and the person who'd do the work replies personally.