Skip to content
Club 33 Design / UI / UX Spec — Arthur

type: spec

topic: Club 33 website design/UI/UX

date: 2026-05-24

owner: Arthur

status: ready-for-Claude-bots

source_inspiration:

- ConductScience tracker / lab-freezers analysis by Merlin

- Club 33 voice note from S

- Instagram/booking/current-site reconnaissance

Club 33 — Design, UI, and UX Specification

0. Executive direction

Build **Club 33** as a premium men’s grooming brand, not just a barber appointment page.

Chosen direction: **Executive Noir + Booking First**

  • Visual layer: dark luxury, black/gold, private-club, executive grooming, high-status.
  • UX layer: fast booking flow from Option C — choose service → choose compatible barber → choose time → confirm.
  • Business objective: turn Instagram/SEO visitors into booked appointments while setting up the brand to scale into multiple locations.

    • 1. ConductScience patterns to adapt

    Read from Merlin’s ConductScience tracker, especially `/lab-freezers` analysis.

    A. Editorial big-type hero

    ConductScience uses large declarative headlines with a terminal period and accent glyph treatment.

    Club 33 adaptation:

  • Headline example: **“Executive grooming, reserved.”**
  • Accent glyph: use `33`, `&`, or `→` in metallic gold.
  • Avoid generic “best barber shop” headline.
  • Make the page feel like a curated system, not a brochure.

    • B. Floating recommendation/spec card

    ConductScience’s freezer page uses a “recommended path” spec card to make the page feel configured.

    Club 33 adaptation:

  • Floating card in hero: “Recommended path / Executive Ritual / Corte + barba / 75 min / Private suite optional”.
  • Should feel like a live concierge recommendation.

    • C. Mixed-unit stats bar

    ConductScience uses asymmetric metrics: classes, tools, temperature range, quote turnaround.

    Club 33 adaptation:

  • `4 steps` to book
  • `3 core rituals`
  • `1 private suite` / or `private experience`
  • `60 sec` booking target

    • D. Multi-step spec builder

    ConductScience asks questions before recommending equipment.

    Club 33 adaptation:

    Create a “Build your grooming ritual” chooser:

    1. What do you need? haircut / beard / both / spa

    2. Occasion? work / event / date / maintenance

    3. Time available? 30 / 60 / 90+ min

    4. Add-ons? facial / massage / manicure / pedicure

    5. Preference? fastest available / master barber / private suite

    Output: recommended service package + compatible barbers + first available times.

    E. Real-world scenarios

    ConductScience uses “Core facility / Single-PI lab / Cell bank.”

    Club 33 adaptation:

  • “Before a boardroom day”
  • “Before a wedding/event”
  • “Weekly maintenance client”
  • Optional fourth: “Private reset / spa grooming”

    • F. Numbered product/service cards

    ConductScience uses 01–05 cards and a configuration path.

    Club 33 adaptation:

    Use numbered cards:

    01 Essential Cut

    02 Beard Ritual

    03 Executive Ritual

    04 Private Grooming Suite

    05 Spa Add-ons

    2. Site architecture

    Primary pages

    1. `/` — homepage / executive brand + booking chooser

    2. `/servicios/` — all services and packages

    3. `/barberos/` — barber/specialist profiles

    4. `/reservar/` — booking flow

    5. `/experiencias/` — premium/private packages

    6. `/ubicaciones/` — current + future multi-location structure

    7. `/reviews/` — reviews by barber and service

    8. `/blog/` — SEO education

    SEO landing pages

  • `/barberia-premium-colonia-del-valle/`
  • `/barberia-ejecutiva-cdmx/`
  • `/corte-y-barba-colonia-del-valle/`
  • `/barberia-cerca-de-roma-sur/`
  • `/arreglo-de-barba-cdmx/`
  • `/facial-para-hombres-cdmx/`

    • 3. Homepage anatomy

    Section 1 — Nav

  • Left: Club 33 logo/wordmark
  • Center: Servicios, Barberos, Experiencias, Reviews
  • Right: language toggle ES/EN + “Reservar” CTA
  • Sticky, dark translucent.

    • Section 2 — Hero

  • Dark barber/luxury background, not too busy.
  • Big headline with terminal period.
  • Subhead: private/executive grooming in Colonia Del Valle.
  • CTAs:

    • - Primary: “Reservar experiencia”

    - Secondary: “Ver servicios” or Instagram

  • Floating recommendation card.

    • Section 3 — Mixed stats strip

  • 4 booking steps
  • 3 signature rituals
  • private suite optional
  • 60-second booking target

    • Section 4 — Build your ritual

    Interactive wizard / spec builder.

  • Inputs: service, occasion, time, add-ons, specialist preference.
  • Output: recommended package + matching specialists + “see times”.

    • Section 5 — Packages

    Numbered service cards.

  • 01 Essential 33
  • 02 Beard Ritual
  • 03 Executive Ritual
  • 04 Private Grooming Suite
  • 05 Spa Add-ons

    • Section 6 — Barber compatibility

    Card grid per barber.

    Each barber card must show:

  • services offered
  • unavailable services hidden or disabled
  • rating/reviews
  • next available slot
  • CTA: “Reservar con [name]”

    • Section 7 — Scenarios

  • Boardroom Day
  • Wedding/Event
  • Weekly Maintenance
  • Private Reset

    • Each scenario recommends packages.

    Section 8 — Reviews

  • Pull review snippets by service/barber.
  • Use trust-first language, no fake reviews.

    • Section 9 — Location + contact

  • Adolfo Prieto 118, Colonia Del Valle, CDMX.
  • Map embed or static map.
  • Instagram.
  • WhatsApp.

    • 4. Visual system

    Palette

  • Obsidian black: `#070707`
  • Charcoal: `#111111`
  • Deep brown/wine: `#2D0E12`
  • Metallic gold: `#C6A15B`
  • Warm cream: `#F5EFE4`
  • Muted silver: `#A9A29A`

    • Typography

  • Display: elegant serif for headlines, large and confident.
  • Body: clean sans, high readability.
  • Labels: uppercase, letter-spaced.
  • CTA text: short verbs, not long phrases.

    • Components

  • Pill CTAs
  • Floating concierge/spec cards
  • Numbered service cards
  • Barber compatibility chips
  • Mixed-unit stats strip
  • Multi-step ritual builder
  • Scenario cards
  • Review cards

    • 5. Booking UX rules

    Booking flow

    1. Choose experience/service.

    2. Show only compatible barbers.

    3. Choose date/time.

    4. Collect name, phone/WhatsApp, email optional.

    5. Confirm.

    Critical rule

    Do **not** let the visitor pick a barber who cannot do the selected service/add-ons.

    Data model

    Service:

  • id
  • name_es
  • name_en
  • duration
  • base_price
  • add_ons
  • compatible_barber_ids

    • Barber:

  • id
  • name
  • photo
  • bio
  • services
  • add_ons_supported
  • rating
  • review_count
  • booking_url
  • location_id

    • Location:

  • id
  • name
  • address
  • map_url
  • hours

    • 6. Bilingual requirements

    Spanish-first, English available.

  • Default: Spanish.
  • Toggle: ES / EN in nav.
  • URL pattern: `/en/` for English version.
  • Do not auto-translate awkwardly; keep luxury tone.

    • Spanish tone:

  • “Reservar experiencia”
  • “Ritual ejecutivo”
  • “Suite privada”
  • “Corte ejecutivo”
  • “Barba ritual”

    • English tone:

  • “Reserve Experience”
  • “Executive Ritual”
  • “Private Grooming Suite”
  • “Executive Cut”
  • “Beard Ritual”

    • 7. Claude bot instructions

    Claude bots should produce:

    1. A homepage design using this spec.

    2. A service/package page.

    3. A barber profile grid with compatibility logic.

    4. A booking-flow wireframe.

    5. Mobile state for all above.

    Do not copy ConductScience visually. Copy the **patterns**:

  • editorial hero
  • spec/recommendation builder
  • stats strip
  • scenario panels
  • numbered cards
  • tool-like decision flow

    • 8. Arthur implementation

    Arthur’s live preview is here:

  • Main mockup selector: `https://benefitra.com/club33-mockups/`
  • Recommended hybrid: `https://benefitra.com/club33-mockups/recommended/`
  • Spec page: `https://benefitra.com/club33-mockups/spec/`