Refonte Punishment Paris

01 · Synthèse

Une marque forte, une vitrine muette

Les images et l’histoire de Punishment sont singulières. Le site actuel les montre sans les expliquer, ne présente aucun produit sur l’accueil et ne donne presque aucun signal aux moteurs de recherche.

23pièces en ligne dans le catalogue public

2 500 €prix le plus haut (blouson Play Off), à partir de 350 € pour un pantalon de survêtement

13entrées à plat sous un seul onglet « Collection »

0meta description sur les 3 pages clés auditées

Vendre plus tôt

Des produits dès l’accueil

Un héro avec un vrai message, une grille de nouveautés et quatre entrées par famille. Aujourd’hui le visiteur doit ouvrir un menu pour voir un seul vêtement.

Ranger le vestiaire

Un méga-menu en 4 groupes

Extérieur, Hauts, Bas & ensembles, Collections. Des libellés et des URL qui disent la même chose (aujourd’hui « Blousons » mène à /collections/accessoires).

Raconter

La musique comme grammaire

Pièces numérotées comme une tracklist, playlist de collection, engagements (stocks dormants, ateliers parisiens) visibles là où l’on achète.

Être trouvé

Un socle SEO complet

Titles et metas par gabarit, un H1 textuel par page, alt sur toutes les images, textes de collection, données structurées et redirections 301.

02 · La marque

Née d’un label électronique

Tout ce qui suit part des textes de la page « À propos » du site et des fiches produit existantes. La refonte ne change pas l’identité : elle la rend lisible.

« Une proposition vestimentaire singulière, pensée non comme une sanction, mais comme une déclaration. »punishmentparis.com/pages/lhistoire

Les deux créateurs se sont rencontrés chez Jean-Paul Gaultier dans les années 90. Punishment explore le lien entre musique et vêtement : le teddy, la veste d’entraîneur britannique, le blazer croisé du minet parisien des années 70, le cargo ultra-large des subcultures post-90.

La marque fabrique dans des ateliers parisiens, à partir de tissus issus de stocks dormants, avec une attention portée à la parité et à l’inclusion. Ces engagements sont aujourd’hui enfouis en bas de la page Histoire.

Pour qui on dessine le site

Profil 1

L’artiste urbain

Musicien, DJ, producteur. Cherche une pièce forte pour la scène ou une séance photo. Arrive par Instagram, sur mobile, et veut voir la pièce portée.

Profil 2

Le collectionneur

Connaît la marque, suit chaque saison. Veut les nouveautés en un clic, savoir ce qui reste en stock et dans quelle taille.

Profil 3

Le chercheur de pièce

Tape « blouson cuir homme créateur » ou « pantalon charpentier cuir ». Ne connaît pas Punishment. C’est lui que le SEO doit capter.

03 · Audit de l’existant

Ce qui freine aujourd’hui

Relevé effectué le 2 novembre 2026 sur l’accueil, la page Collections, la page Histoire et le catalogue public (products.json). Chaque constat est suivi de la réponse apportée par la refonte.

BloquantUX

L’accueil ne dit rien et ne vend rien

Le premier écran est un diaporama de trois photos sans titre, sans texte ni bouton. Aucun produit n’apparaît sur la page.

Héro avec titre éditorial et appel à l’action, puis grille de 8 nouveautés et 4 entrées par famille.

BloquantSEO

Titles génériques, aucune meta description

Accueil « Punishment Paris », page Histoire « About » (en anglais sur un site français), Collections « Collections ». La seule description est og:description « Punishment Paris ».

Gabarits title / meta par type de page, avec la famille de produit, la matière et « homme » (voir chapitre SEO).

BloquantSEO

Le seul H1 de l’accueil est le logo

Le logo SVG est enveloppé dans un H1. La page Histoire a pour H1 « PUNISHMENT ». Google n’a aucun intitulé textuel pour comprendre le sujet des pages.

Logo en simple lien. Un H1 textuel unique par page : « Pour la scène, la rue et le studio », « Cuirs », « Rider cuir noir ».

BloquantUX · SEO

Libellés et URL qui se contredisent

« Blousons » mène à /collections/accessoires, « Accessoires » à /accessoires-1, « Manteaux » à /jackets. La carte « Collection automne/hiver 2026 » ouvre /ah25-26 ; « printemps/été 2025 » ouvre /ss-24.

Une nomenclature unique en français, des handles alignés et des redirections 301 depuis les anciennes URL.

ImportantUX

13 entrées à plat sous un onglet non cliquable

L’onglet « Collection » pointe vers # et ouvre une liste de 13 liens sans regroupement. « Contact » fonctionne de la même façon pour deux liens.

Méga-menu en quatre colonnes avec un visuel, onglet « Nouveautés » direct, contact déplacé dans le pied de page.

ImportantUX

Aucun filtre possible sur le catalogue

Dans le catalogue public, les 23 produits ont un type vide et aucun tag. Impossible de filtrer par taille, matière ou famille.

Renseigner type, matière, couleur et collection (métachamps Shopify), puis activer l’app Search & Discovery pour les filtres.

ImportantUX

Messages commerciaux contradictoires

Le bandeau annonce « Livraison gratuite en Europe » ; le bloc promotionnel en bas d’accueil propose −30 % sur toute la collection et une « livraison offerte dans Paris », sans date ni condition.

Un seul message de livraison. La vente privée devient une page réservée aux inscrits, datée, annoncée par la newsletter.

ImportantUI

Finitions d’en-tête visibles

Le lien vers la playlist s’affiche avec son chemin brut /pages/playlist, le panier affiche « 00 article ».

Libellés propres (« Playlist », « Panier 0 »), playlist mise en scène dans un bloc dédié de l’accueil.

ImportantUX

Fiches produit courtes

Les descriptions tiennent en un paragraphe : pas d’entretien, de mesures du mannequin, de guide des tailles ni de mention de fabrication dans le contenu produit.

Accordéons Description, Matière et fabrication, Guide des tailles, Entretien ; réassurance sous le bouton d’achat.

ImportantSEO

Textes alternatifs manquants

Les trois images du diaporama et 5 des 9 vignettes de la page Collections n’ont pas d’attribut alt renseigné.

Alt descriptif systématique : « Blouson Rider en cuir de vachette noir, vue de face ».

ImportantSEO

Pages collection sans texte

Les collections affichent une grille d’images sans paragraphe : peu de contenu à indexer pour « blouson cuir homme » ou « chemise selvedge ».

Introduction courte en haut et bloc éditorial de 120 à 200 mots en bas de chaque collection.

ImportantPerf

Images du héro servies en 3 840 px

Les visuels du diaporama sont appelés avec width=3840, ce qui pèse sur le premier affichage mobile (LCP).

srcset de 640 à 2 400 px, première image en priorité, les suivantes en chargement différé.

MineurSEO

Détails techniques

og:image en http://, mélange français / anglais (« Tracksuit », « About »), collection « nouveaux vêtements » en minuscules, handles produit très longs.

og:image en https, libellés harmonisés, handles courts sur les nouvelles fiches.

AtoutMarque

Un matériau visuel et éditorial rare

Photos de Hugo Comte, histoire des collections détaillée, engagements concrets. C’est la base de la refonte : rien n’est à inventer, tout est à mettre en ordre.

Remonter ces contenus sur l’accueil, les collections et les fiches produit.

04 · Avant / après

Le premier écran

Faites glisser la poignée pour comparer l’accueil actuel (schématisé à partir du site) et la proposition. Mêmes photos, autre hiérarchie.

LIVRAISON GRATUITE EN EUROPE · LIVRAISON GRATUITE EN EUROPE · LIVRAISON GRATUITE EN EUROPE

Collection ▾ À propos Contact ▾PUNISHMENT/pages/playlist FR (€) Panier 00 article

■ LIVRAISON OFFERTE EN EUROPE ■ FABRIQUÉ DANS DES ATELIERS PARISIENS ■ STOCKS DORMANTS

NOUVEAUTÉS VESTIAIRE LA MAISONPUNISHMENTRECHERCHE COMPTE PANIER 0

Pour la scène, la rue et le studioDécouvrir la collection

ActuelProposé

Actuel

Diaporama plein écran sans message
Menu à 13 entrées masquées
Promotion −30 % sans contexte
Aucun produit, aucun prix

Proposé

Titre H1 et bouton vers la collection
Bandeau de réassurance tiré des engagements
Navigation en trois mots
Quatre pièces visibles avant tout défilement

05 · Direction UI

Le vestiaire comme une sortie de label

Plâtre et encre, comme le typogramme noir et blanc de la marque. Un seul accent, le bordeaux du blouson Vaillant. Des pièces numérotées comme les pistes d’un disque.

Le produit d’abord

Photos au format 4:5, deuxième vue au survol, tailles disponibles visibles avant le clic.

Le son comme grammaire

Face A pour la saison, Face B pour les associations ; chaque pièce porte un numéro de piste (A1, A2…).

Contraste tenu

Fond plâtre, texte encre, bordeaux réservé aux états actifs et aux engagements. Pas d’autre couleur d’interface.

Preuve de fabrication

Stocks dormants et ateliers parisiens rappelés dans le bandeau, sur les fiches et au panier.

Palette

Plâtre#F3F2EF · fond

Encre#121212 · texte, boutons

Bordeaux Vaillant#5E1A1F · accent unique

Graphite#6B6862 · texte secondaire

Filet#D8D6D1 · séparateurs

Typographie

Archivo Expanded 800
Titres, logotype de travailRider cuir

Archivo Condensed 800
Intertitres, cartesChemise blouson Tanker

Hanken Grotesk 400
Texte courantBlouson en cuir de vachette semi doublé, poches poitrine à rabats boutonnées sur plis plats. Teinture tranche, col, poignets et ceinture.

IBM Plex Mono 500
Prix, tailles, référencesA1 · 1 450 € · 46 48 50 52 54 56

Composants

A1

Ridercuir noir

1 450 €

Boutons

Filtres

Tailles (56 épuisée)

Survolez la carte pour voir la deuxième vue. Les maquettes utilisent ces mêmes composants.

06 · Architecture

Ranger le vestiaire

Trois entrées au lieu de trois menus déroulants, et des familles regroupées comme on s’habille : par-dessus, dessus, dessous.

Actuel

Collection (lien #)
- AH 25/26
- Manteaux /jackets
- Vestes / Costumes
- Blousons /accessoires
- Cuirs
- Chemises
- Pulls /jersey
- Sweats / Hoodies
- T-shirts / Polos
- Pantalons
- Tracksuit
- Accessoires /accessoires-1
- Tous
À propos title « About »
Contact (lien #)
- Nous contacter
- Instagram

Proposé

Nouveautés /collections/automne-hiver-25-26
Vestiaire méga-menu
- Extérieur : Manteaux · Blousons · Cuirs · Vestes & costumes
- Hauts : Chemises · Pulls · Sweats & hoodies · T-shirts & polos
- Bas & ensembles : Pantalons · Tracksuit · Accessoires
- Collections : Automne-hiver 25/26 · Printemps-été Volume One · Tout
La maison
- Notre histoire · La fabrication · Les créatifs · Playlist · Journal
Pied de page Aide
- Livraison & retours · Guide des tailles · Entretien des cuirs · Contact

07 · Maquettes

Quatre pages, cliquables

Les maquettes sont de vraies pages HTML : menu, filtres, choix de taille et panier fonctionnent. Les produits, prix, descriptions et photos sont ceux du site actuel.

Accueil

Héro avec message, nouveautés, familles, manifeste, engagements.

Ouvrir →

Collection

Filtres par famille et taille, tri, densité de grille, texte SEO.

Ouvrir →

Fiche produit

Galerie, tailles épuisées, accordéons, « Porté avec », ajout au panier.

Ouvrir →

Panier

Étapes, récapitulatif fixe, réassurance, moyens de paiement, suggestions.

Ouvrir →

08 · Recommandations UX

Parcours par parcours

Classées par ordre d’impact attendu sur la conversion. La colonne de droite renvoie à la phase de la feuille de route.

Accueil qui vend dès le premier écran

Titre H1, bouton vers la saison, puis 8 nouveautés avec prix. Le diaporama devient un héro fixe ou à trois images avec indicateurs.

Phase 2

Méga-menu en quatre groupes

« Nouveautés » cliquable, « Vestiaire » regroupé, « La maison » pour l’histoire et la playlist. Sur mobile, un menu plein écran en grands caractères.

Phase 2

Filtres et tri sur les collections

Famille, taille, matière, prix. Le compteur de pièces se met à jour, un message clair s’affiche quand aucun résultat ne correspond.

Phase 1 → 2

Tailles visibles avant le clic

Au survol d’une carte, les tailles disponibles apparaissent, les tailles épuisées sont barrées. Sur la fiche, alerte « retour en stock ».

Phase 2

Fiche produit complète

Galerie 4:5 avec trois vues, guide des tailles 46–56 / XS–2XL, matière et fabrication, entretien, mesures du mannequin, barre d’achat fixe sur mobile.

Phase 2

Tiroir panier plutôt que redirection

L’ajout ouvre un panneau latéral avec la ligne ajoutée et le sous-total ; le client reste sur la fiche et continue sa visite.

Phase 2

Un seul discours promotionnel

Livraison offerte en Europe dans le bandeau. La remise de −30 % devient une vente privée datée, réservée aux inscrits, sur une page non indexée.

Phase 1

Engagements visibles là où l’on achète

Stocks dormants et ateliers parisiens dans le bandeau, sur l’accueil, dans l’accordéon « Matière et fabrication » et au panier.

Phase 2

Accessibilité

Contrastes AA, focus visible, menus pilotables au clavier, alt sur toutes les images, animations coupées si l’utilisateur l’a demandé.

Phase 2

09 · Recommandations SEO

Donner des mots aux images

Le site est presque entièrement visuel. L’objectif est de faire exister chaque page sur une requête précise, sans dénaturer le ton de la marque.

Gabarits title et meta description

Page	Title actuel	Title proposé	Meta description proposée
Accueil	Punishment Paris	Punishment Paris \| Vêtements homme créateur fabriqués à Paris	Marque née d’un label électronique : cuirs, chemises, tracksuits et manteaux fabriqués dans des ateliers parisiens à partir de stocks dormants.
Collection	Cuirs	{Famille} homme \| Punishment Paris, ex. « Blousons et pantalons en cuir homme »	{Nombre} pièces en cuir de vachette et d’agneau plongé, coupées à Paris. Livraison offerte en Europe.
Produit	Rider cuir noir	{Type} {Nom} en {matière} {couleur} \| Punishment Paris	Reprise des 150 premiers caractères de la description, puis le prix et « livraison offerte en Europe ».
Histoire	About	Notre histoire, une marque née d’un label électronique \| Punishment Paris	Deux créateurs rencontrés chez Jean-Paul Gaultier, un vestiaire masculin entre musique, scène et rue.

Requêtes à viser

Pistes à valider avec Search Console et un outil de volumes avant rédaction.

Requête	Page cible
blouson cuir homme créateur	Cuirs
pantalon charpentier cuir homme	Chermès
chemise selvedge homme	Redline
survêtement nylon imprimé homme	Tracksuit
marque vêtement homme fabriqué à Paris	Accueil, Fabrication
mode homme stocks dormants	Engagements

Redirections 301

À créer dans Shopify, Contenu › Menus › Redirections d’URL.

Ancienne URL	Nouvelle URL
/collections/accessoires	/collections/blousons
/collections/accessoires-1	/collections/accessoires
/collections/jackets	/collections/manteaux
/collections/shirts	/collections/chemises
/collections/pants	/collections/pantalons
/collections/jersey	/collections/pulls
/collections/ah25-26	/collections/automne-hiver-25-26
/collections/ss-24	/collections/printemps-ete-volume-one
/pages/lhistoire	/pages/notre-histoire

Contenu et balisage

Un H1 textuel par page

Le logo sort du H1. Les H2 structurent : Nouveautés, Par famille, La maison, Engagements.

Phase 1

Textes de collection

Introduction de deux phrases en haut, bloc de 120 à 200 mots en bas, liens vers les familles voisines.

Phase 1

Journal

Les textes « Histoire de la collection FW25 » et « SS24 » deviennent des articles, chacun relié aux pièces citées.

Phase 3

Version anglaise

Shopify Markets avec /en/ et balises hreflang, pour une clientèle européenne déjà livrée gratuitement.

Phase 3

Données structurées produit

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Rider cuir noir",
  "brand": { "@type": "Brand",
             "name": "Punishment Paris" },
  "material": "Cuir de vachette",
  "offers": {
    "@type": "Offer",
    "price": 1450,
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock",
    "shippingDetails": { "@type": "OfferShippingDetails",
      "shippingRate": { "@type": "MonetaryAmount",
                        "value": 0, "currency": "EUR" } }
  }
}

Ajouter aussi Organization (accueil) et BreadcrumbList (collections et produits). Les maquettes en contiennent un exemple.

10 · Feuille de route

Trois phases, douze semaines

Les correctifs SEO n’attendent pas le nouveau thème : ils se font dans l’administration Shopify actuelle et produisent leurs effets pendant la refonte.

Semaines 1–2

Corrections rapides

Titles, metas et H1
Alt sur toutes les images
Libellés, handles et redirections 301
Type, matière, couleur sur les 23 produits
Nettoyage de l’en-tête et du message promotionnel

Semaines 3–8

Nouveau thème

Thème Shopify 2.0 sur mesure à partir des maquettes
Méga-menu, accueil, collection avec filtres
Fiche produit et tiroir panier
Tests avec 5 clients, mobile en priorité
Mise en ligne et suivi des 404

Semaines 9–12

Contenu et portée

Pages Fabrication et Créatifs réécrites
Journal : histoires de collection
Version anglaise et hreflang
Playlist et lookbook de saison

Indicateurs à suivre

Relever chaque valeur avant la phase 1 pour disposer d’un point de comparaison.

Taux de conversionCommandes ÷ sessions, mobile et ordinateur séparés

Ajouts au panierPart des visites de fiche produit qui ajoutent une pièce

Sorties depuis l’accueilPart des visites qui quittent le site sans ouvrir de produit

Clics organiques hors marqueSearch Console, requêtes ne contenant pas « punishment »

LCP mobileObjectif sous 2,5 s sur l’accueil et les collections

Inscriptions newsletterPar semaine, avant et après la refonte