visuel d'introduction

Bocage

Direction Artistique et UX/UI

  • Domaines
  • Direction Artistique
  • UX/UI Design
  • Print
  • Année
  • 2018 - 2024
  • Crédits
  • Devs : Clever Age
  • Agence : Deux-Cé

En tant que designer multidisciplinaire, j'ai eu le plaisir de travailler pendant plus de cinq ans pour la marque Bocage. Mon parcours m’a permis d'explorer divers aspects du design, allant de la création d'identités visuelles à la conception d'expériences utilisateur.

Cette expérience m'a offert l'opportunité de collaborer avec des équipes créatives et de contribuer au développement de projets variés, tout en renforçant l'image et l'engagement de la marque. Chaque mission m'a permis de développer mes compétences et d'apporter une vision innovante qui répond aux besoins des clients et aux exigences du marché.

Sommaire :

→ Prétravail sur l’identité de la campagne Printemps-Été 2024
→ Concept La carte Bocage
→ Capsule Grand Plongeon - Collection PE 2023
→ La Carte Postale - collection PE 2023
→ Logo Seconde Main
→ Collection AH 2022
→ Pictos et illustrations
→ Vitrines boutiques
→ Newsletters
→ Photographie produits
→ Refonte du site Bocage.fr
→ UX/UI programme de fidélité

Prétravail sur l’identité de la campagne Printemps-Été 2024

Depuis plusieurs saisons, Bocage collabore avec une nouvelle agence de communication, l'agence Deux-Cé. Dans ce cadre, j'ai travaillé en étroite collaboration avec la directrice de la communication de Bocage sur plusieurs concepts pour la campagne commerciale de la saison Printemps-Été 2024. Nous avions déjà identifié le futur lieu de shooting et discuté de quelques idées de noms pour la campagne, telles que "L’heure Bleue" et "Menthe à l’eau".

J'ai élaboré plusieurs concepts en m'appuyant sur des ressources en ligne qui correspondent à ma vision, en les assemblant de manière créative. Chaque concept repose sur l'utilisation d'une photographie forte comme élément central. Les typographies sélectionnées et leur agencement visent à créer une identité à la fois impactante et haut de gamme, en harmonie avec l'image de marque. En addition, une illustration faite main est intégrée à l'affiche, en lien avec la photographie, pour apporter une touche de personnalité et de légèreté à la campagne, nous permettant ainsi de nous démarquer de nos concurrents.

Bocage - Direction Artistique et UX/UI : premier concept d'identité
Bocage - Direction Artistique et UX/UI : deuxième concept d'identité
Bocage - Direction Artistique et UX/UI : tous les concept d'identité dans photoshop
Bocage - Direction Artistique et UX/UI : moodboard et réflexion sur le concept
Bocage - Direction Artistique et UX/UI : Design finale de l'identité par Deux-Cé

Concept La carte Bocage

La carte BOCAGE a été l'un de mes concepts pour mettre en valeur les nouveaux modèles de la collection Automne-Hiver 2023, en lien avec la campagne associée “Les pieds sur la table”. L’idée était de créer plusieurs cartes inspirées du monde de la restauration pour accompagner les modèles en vitrine, qui étaient décorés avec des éléments de table tels que des assiettes, des verres, des couverts et des décorations. Ces cartes représentaient différentes sous-collections de la saison, telles que des familles de produits comme “baskets”, “boots”, “mocassins”, ainsi que des sélections spécifiques comme “les imprimés” ou “back to the 70’s”.

Le ton a été soigneusement choisi pour refléter l’étiquette de la restauration. Ainsi, le texte d’introduction évoque un serveur décrivant le thème de la carte, tandis que les noms des modèles remplacent ceux des plats et les ingrédients détaillent les matières qui les composent. Le design est aussi utilisé pour afficher la provenance du modèles ainsi que son prix de l’autre coté de la carte.

Bien que le concept ait été très apprécié, les délais d’impression étaient trop longs pour l’appliquer en boutique. Cependant, il a tout de même été utilisé dans d’autres formats, notamment dans les newsletters, comme le montre le deuxième exemple, pour présenter la sous-collection des baskets, une famille de produits qui connaît un fort succès en début de saison automnale.

Bocage - Direction Artistique et UX/UI : Concept la carte Bocage version Boutique
Bocage - Direction Artistique et UX/UI : Déclinaison du concept la carte Bocage en newsletter

Capsule Grand Plongeon - Collection PE 2023

Identité pour la capsule “Grand Plongeon”, une collection de chaussures et d’accessoires inspirée des années 90 et aux couleurs estivales.

Les typographies choisies pour les concepts reprennent ce même style des années 90, et les couleurs utilisées sont directement issues des modèles de la capsule. À l’instar de la mannequin, le titre “Grand Plongeon” fait lui aussi le grand saut dans l’eau.

Cette identité a été utilisée sur un maximum de supports : réseaux sociaux, site internet, lookbook, newsletters et vitrines (cf. 3e image).

Bocage - Direction Artistique et UX/UI : Affiche Grand Plongeon Bocage
Bocage - Direction Artistique et UX/UI : Newsletter Grand Plongeon Bocage
Bocage - Direction Artistique et UX/UI : Vitrine Grand Plongeon Bocage
Bocage - Direction Artistique et UX/UI : Concept pour Grand Plongeon Bocage
Bocage - Direction Artistique et UX/UI : Pistes des logos pour Grand Plongeon Bocage

La Carte Postale - collection Printemps-Été 2023

Création de cartes pour la saison Printemps-Été, sous le thème des vacances, du slow living et du bien-être, intitulée “La carte postale”.

Pour chaque commande, qu'elle soit passée en ligne ou en boutique, plusieurs cartes postales, illustrées par les images de la campagne photo, sont incluses dans les envois aux clients. Bien que l'idée principale soit de permettre aux clients d'écrire de petits mots à leur famille, à leur partenaire ou à leurs amis, le design a été conçu de manière à ce que ces cartes puissent également être envoyées par correspondance.

Bocage - Direction Artistique et UX/UI : La carte postale Bocage collection Printemps - été 2023 | Femme et Homme
Bocage - Direction Artistique et UX/UI : La carte postale Bocage collection Printemps - été 2023 | Recto et Verso

Logo Seconde Main “Claquette Market X Bocage”

Depuis plusieurs années, Bocage propose la vente de chaussures de seconde main sur son sous-site “Comme Neuves”, incluant des retours de location de l'Atelier Bocage et des paires revendues par les clients.

Récemment, le groupe Éram a lancé “Claquettes Market” pour gérer la vente de seconde main des chaussures Bocage et d'autres marques du groupe. Cependant, le premier terme utilisé “Claquettes Market X Bocage” a été jugé déroutant par la clientèle, rendant la transition de “Comme Neuves” peu claire.

Après concertation, l'équipe de communication de Bocage a choisi un nouveau nom : “Seconde Main avec Claquettes Market”, accompagné d'un nouveau logo pour identifier cette offre sur le site, dans les newsletters et sur les réseaux sociaux.

L'expression “Seconde Main” est désormais mise en avant dans le logo, tandis que le sous-titre “avec Claquettes Market” permet de clarifier immédiatement le changement de plateforme pour les clients. De plus, l'image de marque de cette seconde main a été recentrée autour de l'identité de Bocage, car celle de Claquettes Market ne reflétait pas suffisamment l'identité de la marque que se faisait la clientèle Bocage.

Bocage - Direction Artistique et UX/UI : Réalisation logo Bocage - Seconde Main par Claquette Market
Bocage - Direction Artistique et UX/UI : Lignes de construction - Seconde Main par Claquette Market

Charte graphique collection Automne-Hiver 2022

Nouvelle identité et charte graphique pour Bocage à l’occasion de la nouvelle direction de la campagne photo apportée par la nouvelle agence de communication “Deux-Cé”.

Ce shooting, ainsi que tous les suivants, sera caractéristique d’une montée en gamme de l'image de marque, afin de correspondre à la notoriété que la marque Bocage souhaite projeter. Une évolution de la charte graphique, travaillée en interne, sera mise en place pour renforcer l’identité de la marque en attendant que la nouvelle agence travaille sur une nouvelle charte graphique pour les saisons suivantes.

Le choix principal s’est porté sur le remplacement de la typographie existante “Playfair” par une typographie plus premium et élégante, la typographie serif “Span”. L’usage de lettres capitales et d’une épaisseur de lettres légère renforce la qualité élégante de la typographie.

La deuxième composante importante de cette charte est l’usage de couleurs similaires ou complémentaires aux tons présents dans l’image de fond. Ce choix se justifie à la fois par une volonté artistique percutante et par le souci d'assurer une lisibilité optimale lorsque l’image de fond est trop contrastée pour que le texte soit lisible s’il est en blanc.

Bocage - Direction Artistique et UX/UI : concept n°1 pour Charte Graphique Bocage AH22
Bocage - Direction Artistique et UX/UI : concept n°2 pour Charte Graphique Bocage AH22
Bocage - Direction Artistique et UX/UI : concept n°3 pour Charte Graphique Bocage AH22
Bocage - Direction Artistique et UX/UI : idées de concepts pour Charte Graphique Bocage AH22

Pictogrammes & Illustrations

Réalisations de pictos pour les qualités RSE des produits Bocage et réalisations d’illustrations pour symboliser les chapitres d’un lookbook d’une collection estivale

Bocage - Direction Artistique et UX/UI : pictogrammes RSE Bocage n°1
Bocage - Direction Artistique et UX/UI : pictogrammes RSE Bocage n°2
Bocage - Direction Artistique et UX/UI : Illustrations Lookbook Bocage

Vitrines boutiques

Bien que mon domaine principal soit axé sur les supports web où la marque Bocage est présente, j’ai également eu l’opportunité de travailler sur l’affichage en boutique, notamment sur les vitrines, qui jouent un rôle crucial pour attirer l’attention de potentiel clients dans la rue.

Ci-dessous, vous trouverez des exemples de vitrines en adhésifs que j’ai réalisées pour des périodes commerciales clés, telles que les soldes et l’offre duo. L’utilisation de couleurs percutantes et de lettres larges est essentielle pour garantir que ces vitrines soient visibles et lisibles de loin.

Ces deux designs seront reconduits pour les saisons à venir, en utilisant des palettes de couleurs différentes afin de s’adapter à la saison en cours et de se démarquer des années précédentes.

Bocage - Direction Artistique et UX/UI : Design de Vitrine pour Soldes Bocage
Bocage - Direction Artistique et UX/UI : Design de Vitrine pour Offre Duo Bocage

Newsletters

En tant que designer pour la marque Bocage, j'ai été chargé de créer le design des newsletters pour refléter l'identité visuelle de la marque. Mon objectif était de concevoir des mises en page attrayantes et cohérentes, en utilisant les éléments graphiques de la charte de Bocage afin de capter l'attention des clients.

J'ai intégré des visuels percutants et des typographies élégantes pour renforcer l'engagement des clients, notamment via l’utilisation en grand du logo Bocage, une signature percutante pour nous différencié de nos concurrent.

Bocage - Direction Artistique et UX/UI : Design de Newsletter Bocage

Publicités sur les réseaux sociaux

j’ai aussi eu la responsabilité de créer les visuels des publicités en ligne sur les réseaux sociaux. Mon but était de concevoir des annonces accrocheuses qui attirent l'œil des utilisateurs tout en reflétant l'esprit de la marque. J'ai mis l'accent sur des designs esthétiques et impactant pour maximiser l’engagement et donner envie aux gens d’interagir avec nos publications, retouchant souvent l’image de fond pour permettre un contraste et une lisibilité optimale des messages de communication.

Bocage - Direction Artistique et UX/UI : Réalisation n°1 d'E-Pub sponsorisé Bocage
Bocage - Direction Artistique et UX/UI : Réalisation n°2 d'E-Pub sponsorisé Bocage

Photographie de produits pour le site WEB et réseaux sociaux Bocage

Bocage met en valeur toutes ses chaussures et produits à travers des photos professionnelles. Au cours de mon expérience chez Bocage, j'ai eu l'opportunité de réaliser plusieurs de ces prises de vue lors de différentes saisons.

Étude de cas dédié Photographies Bocage ↗

Bocage - Direction Artistique et UX/UI : Photographie produit Bocage n°1
Bocage - Direction Artistique et UX/UI : Photographie produit Bocage n°2
Bocage - Direction Artistique et UX/UI : Photographie produit Bocage n°3

Refonte UX/UI de l'Atelier Bocage

Refonte intégrale des pages front-end du site Atelier Bocage début de l'année 2024.

Étude de cas dédié à la refonte de l'Atelier Bocage ↗

Bocage - Direction Artistique et UX/UI : Refonte E-commerce UX/UI de l'atelier Bocage

Refonte UX/UI du site Bocage.fr

Courant de l’année 2022, les équipes Bocage et leurs homologues des marques Éram et Mellow Yellow furent en charge de la refonte des 3 sites sur une toute nouvelle plateforme E-commerce commune afin de bénéficier d’une plus grande synergie entre les sites eux-mêmes et la logistique derrière.

Bocage, ayant jusqu’alors la structure e-commerce la plus agé et la plus ralenti, fut le premier site qui serait migré sur la nouvelle plateforme. En tant que designer chez Bocage et intégrateur Front-End expérimenté, j’ai beaucoup travaillé avec l’agence WEB prestataire (Clever Age) pour designer l’UX et le front-end de la nouvelle plateforme ainsi que travaillé sur le futur design UI du site Bocage.

J’ai ainsi travaillé avec l’agence sur l’UX/UI de la navigation, des pages listings, des pages produits, du CMS des pages de contenus, du tunnel d’achat, du programme de fidélité et de l’affichage des critères RSE.

J’ai aussi designé et codé en intégralité la page d’Accueil, les pages univers Femme et Homme ainsi que le player principale des pages univers avec un lecteur vidéo au chargement optimisé et entièrement responsive

visiter le site Bocage ↗

Bocage - Direction Artistique et UX/UI : Refonte UX/UI Homepage Bocage Responsive PC
Bocage - Direction Artistique et UX/UI : Refonte UX/UI Page Univers Bocage Responsive
Bocage - Direction Artistique et UX/UI : Refonte UX/UI Page Liste de produit Bocage Responsive PC
Bocage - Direction Artistique et UX/UI : Refonte UX/UI Page Liste de produit Bocage Responsive Mobile
Bocage - Direction Artistique et UX/UI : Refonte UX/UI Page produit Bocage Responsive


Petit Bonus, j'avais une capture d'écran de l'ancien site qui dormais sur le PC, j'avais codé un script pour afficher les vues portées plutôt que les packshots sur les photos. voici à quoi ressemblait le site Bocage avant la refonte.

Bocage - Direction Artistique et UX/UI : photo 9

Refonte et prototypage UX/UI du programme fidélité

Refonte totale du programme de fidélité de Bocage et son intégration à la plateforme e-commerce. Cependant, l’interface native proposée par la plateforme ne correspondant pas aux besoins de la marque et de ses équipes, il a été décidé de revoir une grande partie de l’UX (ou expérience utilisateur).

Voici quelques captures du prototype et des maquettes associées que j’ai réalisées avec Figma. Ce prototype a été conçu de manière responsive, limitant au maximum les différences entre les versions mobile et PC. Les maquettes ont été déclinées dans toutes les itérations possibles pour anticiper d’éventuels problèmes et renforcer la synergie avec l’agence web chargée du développement (Clever Age).

Ce prototype sera ensuite intégré et utilisé pour retravailler et améliorer les interfaces de fidélité d’Éram et de Mellow Yellow.

Bocage - Direction Artistique et UX/UI : Prototype UX/UI Figma Interactif fidélité Bocage
Bocage - Direction Artistique et UX/UI : Maquettes UX/UI Figma Espace fidélité Compte Bocage
Bocage - Direction Artistique et UX/UI : Maquettes UX/UI Figma Composants fidélité Bocage