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 redesigned Gentleman's Beard Club product page shown in a browser window

Services

  • CRO & UX Design
  • Web Design
  • Next.js Development
  • Design System

Stack

  • Figma
  • Next.js 16
  • React 19
  • Tailwind CSS
  • Vercel

Outcome

  • Live Designed, built and shipped to production
  • 13 Sections on the product page alone
  • 1:1 Rebuilt from the Figma, pixel-verified
  • Real cart Bundles, quantities and state that persists

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 redesigned home page with hero, essentials and shop by purpose
The home page: one promise in the hero, then proof, products, and purpose.

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 product page buy box with bundle offers, trust tiles and payment methods
The buy box, engineered for conversion: bundles, social proof, and every trust signal above the fold.
Product detail sections with the growth timeline and performance tabs
The Growth Cycle, results week by week instead of vague promises.

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.

The redesigned store shown on a MacBook Air
Desktop and mobile designed side by side, built from one responsive codebase.

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.

Next projectLexora

Next project

Have an ideaworth raising?