Design and buildE-commerce / Grooming · 2026
The Gentleman's Beard Club
A conversion-focused redesign of a premium grooming store, designed in Figma and rebuilt as a live Next.js storefront: home, catalog, and a deep product page with a working cart.

The brief
Beard care is a crowded shelf, and the product page is where the sale is won or lost. The Gentleman’s Beard Club redesign set out to answer every objection a buyer has, patchiness, results, trust, price, on one page, without losing the calm, premium feel the brand deserves.

The design
The system is quiet luxury: Libre Caslon headlines over Inter, warm ivory surfaces, and apothecary photography that does the talking. The product page carries the weight. A gallery with real customer reviews beside it, a buy box with three bundle offers and the saving spelled out, trust tiles, payment marks, and a “best paired with” row, then the Growth Cycle timeline that shows what happens after one week, three weeks, three months.
Below that, the page keeps answering: performance tabs, FAQs written the way customers actually ask, a six-step ritual, and a review wall with photos from real routines. Home and catalog pages carry the same language so the store reads as one piece.


The build
We rebuilt the whole thing in production, Next.js 16, React 19, Tailwind, and verified it against the Figma section by section at desktop and mobile widths. The cart is real: bundle-aware line items, quantities, a persistent drawer, and a catalog that sorts. All three pages ship as static HTML, so the store is fast by default and ready to wire to Shopify or any commerce backend without touching the design layer.

How we work
Same shape as every Confidency project: we design it, we build it, and we ship it. The deliverable is not a Figma file, it is a URL that works.
The best case study is the site itself.