2026 · REFONTE UX/UI & SEO

PUNISHMENT PARIS

REFONTE DU SITE E-COMMERCE SHOPIFY, UX/UI ET RÉFÉRENCEMENT NATUREL

Punishment Paris, couverture du dossier de refonte UX/UI et SEO par Florent Andarelli, photo de campagne Hugo Comte

CLIENT

PUNISHMENT PARIS

LIEU

PARIS (75), ÎLE-DE-FRANCE

CATÉGORIE

E-COMMERCE SHOPIFY, UX/UI & SEO

UNE MARQUE FORTE, UNE VITRINE MUETTE

Punishment est une marque parisienne de vêtements homme née d'un label de musique électronique : cuirs, chemises, tracksuits et manteaux, fabriqués dans des ateliers parisiens à partir de tissus issus de stocks dormants. Son site Shopify montre des images remarquables, mais il ne présente aucun produit sur l'accueil et ne donne presque aucun signal à Google.

J'ai construit un dossier de refonte complet : audit de l'existant, direction UI, nouvelle architecture, quatre maquettes cliquables (accueil, collection, fiche produit, panier) et une feuille de route en trois phases sur douze semaines.

Le cœur du travail porte sur le référencement naturel : titres de page, méta-descriptions, ancres d'URL, champs méta produits et catégories, données structurées et suivi dans Google Search Console, pour que chaque page s'affiche proprement dans l'aperçu des moteurs de recherche. Le projet est mené depuis mon studio de graphiste à Issy-les-Moulineaux, aux portes de Paris.

Voir le site de Punishment Paris  ·  Ouvrir le dossier de présentation

LE PROJET

Faire du site l'équivalent d'une sortie de label : chaque pièce présentée comme un morceau, une boutique qui vend dès le premier écran, et des pages que Google comprend.

Rien n'est à inventer : les photos, l'histoire des collections et les engagements existent déjà. La refonte les met en ordre, pour le client comme pour les moteurs de recherche.

SERVICES

  • Audit UX/UI et SEO de la boutique Shopify
  • Direction UI, palette et composants
  • Architecture et méga-menu
  • Quatre maquettes HTML cliquables
  • Titres, méta-descriptions et ancres d'URL
  • Champs méta produits et catégories
  • Données structurées et Google Search Console
01 · Audit

Ce qui freinait le site

Relevé effectué le 2 novembre 2026 sur l'accueil, la page Collections, la page Histoire et le catalogue public de la boutique. Chaque constat a reçu une réponse dans la refonte.

0méta-description sur les 3 pages clés auditées
1seul H1 sur l'accueil, et c'est le logo
13entrées à plat sous un onglet « Collection » non cliquable
23produits sans type, sans tag, donc impossibles à filtrer
  • SEOTitres génériquesAccueil « Punishment Paris », Histoire « About » (en anglais sur un site français), Collections « Collections ». La seule description est og:description « Punishment Paris ».
  • SEOLibellés et URL qui se contredisent« Blousons » mène à /collections/accessoires, « Manteaux » à /jackets, la carte automne-hiver 2026 ouvre /ah25-26.
  • SEOImages sans texte alternatifLes trois images du diaporama et 5 des 9 vignettes de la page Collections n'ont pas d'attribut alt.
  • SEOCollections sans texteUne grille d'images sans paragraphe : rien à indexer pour « blouson cuir homme » ou « chemise selvedge ».
  • UXUn accueil qui ne vend rienUn diaporama de trois photos sans titre, sans texte ni bouton. Aucun produit, aucun prix.
  • PerfHéro servi en 3 840 pxUn poids qui pénalise le premier affichage mobile (LCP), un critère suivi par Google.
02 · Avant / après

Le premier écran, avant et après

Faites glisser la poignée pour comparer l'accueil actuel et la proposition. Mêmes photos, autre hiérarchie : un titre, un bouton, des engagements dans le bandeau et quatre pièces visibles avant tout défilement.

LIVRAISON GRATUITE EN EUROPE · LIVRAISON GRATUITE EN EUROPE · LIVRAISON GRATUITE EN EUROPE
Collection ▾   À propos   Contact ▾PUNISHMENT/pages/playlist   FR (€)   Panier 00 article
Accueil actuel de Punishment Paris : diaporama plein écran sans titre ni bouton
PUNISHMENT PARIS vous invite à bénéficier immédiatement d'une réduction de 30% sur l'ensemble de la collection. Livraison offerte dans Paris. Accéder à notre vente privée exclusive
■ LIVRAISON OFFERTE EN EUROPE   ■ FABRIQUÉ DANS DES ATELIERS PARISIENS   ■ STOCKS DORMANTS
NOUVEAUTÉS   VESTIAIRE   LA MAISONPUNISHMENTRECHERCHE   COMPTE   PANIER 0
Accueil proposé : même photo de campagne, avec titre et bouton vers la collection
Pour la scène, la rue et le studioDécouvrir la collection
Rider cuir noir
Tanker beige
Chermès cuir noir
Choosen One rayures

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

Photos © Punishment Paris, campagne © Hugo Comte, chargées depuis la boutique punishmentparis.com.

03 · SEO

L'aperçu sur les moteurs de recherche

C'est la première image de la boutique pour un client qui ne la connaît pas encore : le titre bleu, l'adresse et deux lignes de description dans Google. Dans Shopify, tout se règle dans le bloc « Aperçu sur les moteurs de recherche » de chaque page. Comparez l'avant et l'après, puis modifiez les champs pour voir le résultat en direct.

Aperçu sur les moteurs de recherche Shopify
0 sur 70 caractères utilisés
0 sur 160 caractères utilisés
punishmentparis.com/
Aperçu Google, ordinateur
Punishment Parishttps://punishmentparis.com
Punishment Paris

    Les longueurs suivent les repères habituels : environ 60 caractères pour un titre et 155 à 160 pour une méta-description avant que Google ne coupe. Le moteur reste libre de réécrire un titre ou un extrait qu'il juge peu pertinent : c'est justement ce qui arrive quand ces champs sont vides ou génériques.

    04 · SEO

    Titres de page et méta-descriptions

    Un gabarit par type de page, pour que les 23 fiches et toutes les collections suivent la même règle : la famille de produit, la matière, « homme », puis le nom de la marque. Chaque page vise une requête précise sans dénaturer le ton de la marque.

    PageTitre actuelTitre proposéMéta-description proposée
    AccueilPunishment ParisPunishment Paris | Vêtements homme créateur fabriqués à ParisMarque née d'un label électronique : cuirs, chemises, tracksuits et manteaux fabriqués dans des ateliers parisiens à partir de stocks dormants.
    CollectionCuirs{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.
    ProduitRider cuir noir{Type} {Nom} en {matière} {couleur} | Punishment ParisLes 150 premiers caractères de la description, puis le prix et « livraison offerte en Europe ».
    HistoireAboutNotre histoire, née d'un label électronique | Punishment ParisDeux créateurs rencontrés chez Jean-Paul Gaultier, un vestiaire masculin entre musique, scène et rue.
    Requête à viserPage cibleLevier
    blouson cuir homme créateurCollection CuirsTitre, texte de collection, alt des images
    pantalon charpentier cuir hommeFiche ChermèsTitre produit et champ méta « matière »
    chemise selvedge hommeFiche RedlineTitre produit et description enrichie
    survêtement nylon imprimé hommeCollection TracksuitTitre, introduction et bloc éditorial
    marque vêtement homme fabriqué à ParisAccueil, FabricationH1 textuel, engagements, données Organization
    mode homme stocks dormantsEngagementsPage dédiée et maillage depuis les fiches

    Pistes à valider avec les données de Search Console et un outil de volumes de recherche avant la rédaction finale.

    05 · SEO

    Ancres d'URL et redirections 301

    Une nomenclature unique en français : le libellé du menu, le titre de la page et l'ancre d'URL disent la même chose. Chaque ancienne adresse est redirigée en 301 pour conserver les liens et l'historique acquis auprès de Google. Dans Shopify, la case « Créer une redirection d'URL » le fait au moment où l'on modifie l'ancre ; les autres se saisissent dans Contenu › Menus › Redirections d'URL.

    LibelléAncienne URLNouvelle URL
    Blousons/collections/accessoires/collections/blousons
    Accessoires/collections/accessoires-1/collections/accessoires
    Manteaux/collections/jackets/collections/manteaux
    Chemises/collections/shirts/collections/chemises
    Pantalons/collections/pants/collections/pantalons
    Pulls/collections/jersey/collections/pulls
    Automne-hiver 25/26/collections/ah25-26/collections/automne-hiver-25-26
    Printemps-été/collections/ss-24/collections/printemps-ete-volume-one
    Notre histoire/pages/lhistoire/pages/notre-histoire

    Ordre de mise en place : libérer d'abord accessoires (renommé blousons), puis renommer accessoires-1 en accessoires, sans quoi Shopify refuse l'ancre déjà prise.

    06 · SEO

    Champs méta produits et catégories

    Les champs méta (métachamps Shopify) donnent à chaque produit et à chaque collection des informations structurées : elles nourrissent les titres, les filtres de l'app Search & Discovery, les textes de collection et les données structurées lues par Google.

    Produits

    Renseignés sur les 23 pièces, en commençant par la catégorie standard Shopify et le type de produit, aujourd'hui vides.

    • Catégorie de produitTaxonomie ShopifyVêtements et accessoires › Vêtements › Vêtements d'extérieur › Manteaux et vestes
    • Type de produitChamp natifBlouson, Chemise, Pantalon, Tracksuit… : la base des filtres par famille
    • custom.matiereTexte, une ligneCuir de vachette, agneau plongé, toile selvedge, nylon
    • custom.couleurListe de valeursNoir, Bordeaux, Écru… pour le filtre couleur et le titre produit
    • custom.fabricationTexte multiligneAtelier parisien, tissu issu de stocks dormants : affiché dans l'accordéon « Matière et fabrication »
    • custom.entretienTexte enrichiConsignes d'entretien, en particulier pour les cuirs
    • custom.mannequinTexte, une ligneTaille et mensurations du mannequin, pour rassurer avant l'achat
    • custom.pisteTexte, une ligneNuméro de piste (A1, A2…) qui reprend la grammaire musicale de la marque
    • custom.porte_avecListe de produitsBloc « Porté avec » : maillage interne entre fiches

    Catégories (collections)

    Chaque collection devient une vraie page d'atterrissage, avec ses propres textes et son propre aperçu dans Google.

    • Titre de la pageSEO natifGabarit « {Famille} homme | Punishment Paris »
    • Méta-descriptionSEO natifNombre de pièces, matières, fabrication à Paris, livraison offerte
    • Ancre d'URLSEO natifEn français, alignée sur le libellé du menu, redirection 301 depuis l'ancienne
    • custom.introductionTexte, une ligneDeux phrases en tête de collection, avec la requête visée
    • custom.texte_seoTexte enrichiBloc éditorial de 120 à 200 mots en bas de page
    • custom.familles_voisinesListe de collectionsLiens vers les familles proches : Cuirs ↔ Blousons ↔ Manteaux
    • custom.visuel_menuFichierImage affichée dans la colonne du méga-menu
    • FiltresSearch & DiscoveryFamille, taille, matière, couleur et prix, alimentés par les champs méta produits
    07 · SEO

    Google Search Console

    Les correctifs SEO n'attendent pas le nouveau thème : ils se font dans l'administration Shopify actuelle, et Search Console permet de mesurer leur effet pendant toute la refonte.

    1. Relever le point de départPropriété de domaine vérifiée, export des requêtes, des pages et du taux de clics avant toute modification.
    2. Soumettre le sitemapShopify génère /sitemap.xml : il est soumis dans Sitemaps, puis chaque page refaite passe par « Inspection de l'URL ».
    3. Surveiller les redirectionsRapport Pages : aucune 404 après le changement des ancres d'URL, anciennes adresses bien remplacées dans l'index.
    4. Suivre les requêtes hors marqueRapport Performances filtré sur les requêtes qui ne contiennent pas « punishment » : c'est le vrai indicateur du travail SEO.
    5. Valider les données structuréesRapports Extraits de produits et Fils d'Ariane : prix, disponibilité et livraison lus sans erreur.
    6. Contrôler les Core Web VitalsLCP mobile sous 2,5 s sur l'accueil et les collections, grâce aux images servies de 640 à 2 400 px.
    Clics organiques hors marqueSearch Console, requêtes sans « punishment »
    Taux de clics sur l'aperçuEffet direct des titres et méta-descriptions
    Pages indexéesCollections et fiches présentes dans l'index, sans doublon
    Taux de conversionCommandes ÷ sessions, mobile et ordinateur séparés
    Ajouts au panierPart des visites de fiche qui ajoutent une pièce
    LCP mobileObjectif sous 2,5 s
    08 · SEO

    Données structurées

    Elles transforment un simple lien bleu en résultat enrichi : prix, disponibilité et livraison offerte s'affichent directement sous le titre. Organization sur l'accueil, Product sur chaque fiche, BreadcrumbList sur les collections et les produits. Un H1 textuel unique par page et un texte alternatif sur chaque image complètent le balisage.

    {
      "@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" }
        }
      }
    }
    09 · UX/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.

    Plâtre#F3F2EF · fond
    Encre#121212 · texte, boutons
    Bordeaux Vaillant#5E1A1F · accent
    Graphite#6B6862 · texte secondaire
    Filet#D8D6D1 · séparateurs
    • Un accueil qui vend dès le premier écran. Titre H1, bouton vers la saison, puis huit nouveautés avec leur prix.
    • Un méga-menu en quatre groupes. Extérieur, Hauts, Bas & ensembles, Collections, au lieu de 13 liens à plat.
    • Filtres et tri sur les collections. Famille, taille, matière, prix, alimentés par les champs méta.
    • Des fiches produit complètes. Galerie 4:5, guide des tailles, matière et fabrication, entretien, barre d'achat fixe sur mobile.
    • Un tiroir panier. Le client reste sur la fiche et continue sa visite.
    • Des engagements visibles là où l'on achète. Stocks dormants et ateliers parisiens dans le bandeau, sur les fiches et au panier.

    Le dossier complet

    Audit, avant / après, direction UI, architecture, recommandations UX et SEO, feuille de route, et quatre maquettes cliquables : menu, filtres, choix de taille et panier fonctionnent. Le dossier a lui aussi son mode clair et son mode sombre.

    10 · Méthode

    Trois phases, douze semaines

    Le SEO commence dès la première semaine, dans la boutique actuelle, pendant que le nouveau thème se construit.

    Semaines 1 à 2

    Corrections rapides

    • Titres, méta-descriptions et H1
    • Alt sur toutes les images
    • Ancres d'URL et redirections 301
    • Type, matière, couleur sur les 23 produits
    • Sitemap soumis dans Search Console
    Semaines 3 à 8

    Nouveau thème

    • Thème Shopify 2.0 sur mesure
    • Méga-menu, accueil, collections filtrables
    • Fiche produit et tiroir panier
    • Tests avec cinq clients, mobile d'abord
    • Mise en ligne et suivi des 404
    Semaines 9 à 12

    Contenu et portée

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