Introductory visual

Bocage

Art Direction & UX/UI

  • Fields
  • Art Direction
  • Visual Identity
  • UX/UI Design
  • Year
  • 2018 - 2024
  • Credits
  • Devs : Clever Age
  • Agency : Deux-Cé

As a multidisciplinary designer, I had the pleasure of working for more than five years with the Bocage brand. My journey allowed me to explore various aspects of design, ranging from creating visual identities to designing user experiences.

This experience gave me the opportunity to collaborate with creative teams and contribute to the development of diverse projects, while strengthening the brand’s image and engagement. Each assignment helped me grow my skills and bring an innovative vision that meets client needs and market demands.

Summary :

→ Pre‑work on the identity of the Spring‑Summer 2024 campaign
→ Concept La carte Bocage
→ Capsule Grand Plongeon – SS23 collection
→ La Carte Postale – SS23 collection
→ Second‑hand Logo
→ Collection AW22
→ Pictograms and illustrations
→ Store‑window displays
→ Newsletters
→ Social media ads
→ Product photography
→ l'Atelier Bocage UX/UI redesign
→ Bocage.fr UX/UI redesign
→ UX/UI loyalty program

Pre‑work on the identity of the Spring‑Summer 2024 campaign

Since several seasons, Bocage has been collaborating with a new communications agency, Deux‑Ce. In this context, I worked closely with the communication director of Bocage on several concepts for the commercial campaign of the Spring‑Summer 2024 season. We had already identified the future shooting location and discussed a few name ideas for the campaign, such as "L'heure Bleue" and "Menthe à l'eau".

I developed several concepts using online resources that match my vision, assembling them creatively. Each concept relies on a strong photograph as the central element. The selected typefaces and their layout aim to create an identity that is both impactful and high‑end, in harmony with the brand image. Additionally, a hand‑drawn illustration is integrated into the poster, linked to the photograph, to add personality and lightness to the campaign, allowing us to stand out from our competitors.

Arthur Barat — Bocage - Art Direction & UX/UI : first identity concept
Arthur Barat — Bocage - Art Direction & UX/UI : second identity concept
Arthur Barat — Bocage - Art Direction & UX/UI : all identity concepts in Photoshop
Arthur Barat — Bocage - Art Direction & UX/UI : moodboard and concept brainstorming
Arthur Barat — Bocage - Art Direction & UX/UI : final identity design by Deux‑Ce

Concept "La carte Bocage"

La Carte Bocage was one of my concepts to showcase the new models from the Autumn‑Winter 2023 collection, tied to the associated campaign “Les pieds sur la table”. The idea was to create several cards inspired by the world of dining to accompany the display models, which were decorated with table elements such as plates, glasses, cutlery and ornaments. These cards represented different sub‑collections of the season, such as product families like “baskets”, “boots”, “loafers”, as well as specific selections like “the prints” or “back to the 70’s”.

The tone was carefully chosen to reflect restaurant etiquette. Thus, the introductory text evokes a waiter describing the card’s theme, while the model names replace dish names and the listed ingredients detail the materials they’re made from. The design also shows the model’s origin and its price on the back side of the card.

Although the concept was very well received, printing lead times were too long to implement it in‑store. Nevertheless, it was still used in other formats, notably in newsletters, as shown in the second example, to present the basket sub‑collection—a product family that enjoys strong sales early in the autumn season.

Arthur Barat — Bocage - Art Direction & UX/UI : Concept la carte Bocage version Boutique
Arthur Barat — Bocage - Art Direction & UX/UI : Déclinaison du concept la carte Bocage en newsletter

Grand Plongeon Capsule - SS23

Identity for the “Grand Plongeon” capsule, a collection of shoes and accessories inspired by the ’90s and featuring summer colours.

The typefaces chosen for the concepts echo that same ’90s style, and the colours used come directly from the capsule’s models. Like the model herself, the title “Grand Plongeon” also takes the big leap into the water.

This identity was applied across a wide range of media: social networks, the website, lookbook, newsletters and storefront displays (see the third image).

Arthur Barat — Bocage - Art Direction & UX/UI : Affiche Grand Plongeon Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Newsletter Grand Plongeon Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Vitrine Grand Plongeon Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Concept pour Grand Plongeon Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Pistes des logos pour Grand Plongeon Bocage

La Carte Postale – SS23 collection

Creation of cards for the Spring‑Summer season, under the theme of holidays, slow living and wellbeing, titled “La carte postale”.

For each order, whether placed online or in‑store, several postcards illustrated with images from the photo campaign are included in the shipments to customers. Although the main idea is to let customers write short notes to their family, partner or friends, the design was crafted so these cards can also be sent as correspondence.

Arthur Barat — Bocage - Art Direction & UX/UI : La carte postale Bocage collection Printemps - été 2023 | Femme et Homme
Arthur Barat — Bocage - Art Direction & UX/UI : La carte postale Bocage collection Printemps - été 2023 | Recto et Verso

Logo for Second‑hand brand “Claquette Market X Bocage”

Since several years, Bocage has offered second‑hand shoes for sale on its sub‑site “Comme Neuves”, including returns from Atelier Bocage rentals and pairs resold by customers.

Recently, the Éram group launched “Claquettes Market” to manage the second‑hand sale of Bocage shoes and other group brands. However, the initial term “Claquettes Market X Bocage” was found confusing by customers, making the transition from “Comme Neuves” unclear.

After consultation, Bocage’s communication team chose a new name: “Seconde Main avec Claquettes Market”, accompanied by a new logo to identify this offering on the website, in newsletters and on social media.

The phrase “Seconde Main” is now highlighted in the logo, while the subtitle “avec Claquettes Market” immediately clarifies the platform change for customers. Moreover, the branding of this second‑hand service has been refocused around Bocage’s identity, as Claquettes Market’s branding did not sufficiently reflect the brand identity perceived by Bocage’s clientele.

Arthur Barat — Bocage - Art Direction & UX/UI : Réalisation logo Bocage - Seconde Main par Claquette Market
Arthur Barat — Bocage - Art Direction & UX/UI : Lignes de construction - Seconde Main par Claquette Market

AW22 collection visual identity

New identity and graphic charter for Bocage on the occasion of the new direction of the photo campaign brought by the new communications agency “Deux‑Cé”.

This shoot, as well as all subsequent ones, will be characteristic of an upscale evolution of the brand image, in order to match the notoriety that the Bocage brand wishes to project. An evolution of the graphic charter, worked on internally, will be implemented to reinforce the brand’s identity while awaiting the new agency’s work on a new graphic charter for the upcoming seasons.

The primary choice was to replace the existing typeface “Playfair” with a more premium and elegant serif typeface, “Span”. Using uppercase letters and a light weight reinforces the elegant quality of the typography.

The second important component of this charter is the use of colors similar or complementary to the tones present in the background image. This choice is justified both by a striking artistic intention and by the need to ensure optimal readability when the background image is too contrasting for white text to be legible.

Arthur Barat — Bocage - Art Direction & UX/UI : concept n°1 pour Charte Graphique Bocage AH22
Arthur Barat — Bocage - Art Direction & UX/UI : concept n°2 pour Charte Graphique Bocage AH22
Arthur Barat — Bocage - Art Direction & UX/UI : concept n°3 pour Charte Graphique Bocage AH22
Arthur Barat — Bocage - Art Direction & UX/UI : idées de concepts pour Charte Graphique Bocage AH22

Pictograms and illustrations

Creation of icons for the RSE qualities of Bocage products and illustrations to represent the chapters of a summer‑collection lookbook.

Arthur Barat — Bocage - Art Direction & UX/UI : pictogrammes RSE Bocage n°1
Arthur Barat — Bocage - Art Direction & UX/UI : pictogrammes RSE Bocage n°2
Arthur Barat — Bocage - Art Direction & UX/UI : Illustrations Lookbook Bocage

Store‑window displays

While my main focus is on the web assets where the Bocage brand lives, I’ve also had the opportunity to work on in‑store signage, especially window displays, which play a crucial role in catching the eye of potential customers on the street.

Below you’ll find examples of adhesive window displays I created for key commercial periods such as sales and the duo offer. Using bold colours and large lettering is essential to ensure these windows are visible and readable from a distance.

These two designs will be carried forward for upcoming seasons, using different colour palettes to suit the current season and stand out from previous years.

Arthur Barat — Bocage - Art Direction & UX/UI : Design de Vitrine pour Soldes Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Design de Vitrine pour Offre Duo Bocage

Newsletters

As a designer for the Bocage brand, I was tasked with creating newsletter designs that reflect the brand’s visual identity. My goal was to craft attractive and consistent layouts, using the graphic elements from Bocage’s style guide to capture customers’ attention.

I incorporated striking visuals and elegant typography to strengthen customer engagement, notably by prominently featuring the Bocage logo—a strong signature that sets us apart from our competitors.

Arthur Barat — Bocage - Art Direction & UX/UI : Design de Newsletter Bocage

Social media ads

I also had the responsibility of creating visual assets for online ads on social media. My goal was to design eye‑catching ads that attract users’ attention while reflecting the brand’s spirit. I focused on aesthetic and impactful designs to maximize engagement and encourage people to interact with our posts, often retouching the background image to ensure contrast and optimal readability of the communication messages.

Arthur Barat — Bocage - Art Direction & UX/UI : Réalisation n°1 d'E-Pub sponsorisé Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Réalisation n°2 d'E-Pub sponsorisé Bocage

Product photography

Bocage showcases all its shoes and products through professional photographs. During my experience at Bocage, I had the opportunity to shoot some of these images across different seasons.

Arthur Barat — Bocage - Art Direction & UX/UI : Photographie produit Bocage n°1
Arthur Barat — Bocage - Art Direction & UX/UI : Photographie produit Bocage n°2
Arthur Barat — Bocage - Art Direction & UX/UI : Photographie produit Bocage n°3

l'Atelier Bocage UX/UI redesign

Complete redesign of the front‑end pages of the Atelier Bocage site at the beginning of 2024.

Study Case of the l'Atelier Bocage UX/UI redesign ↗

Arthur Barat — Bocage - Art Direction & UX/UI : Refonte E-commerce UX/UI de l'atelier Bocage

Bocage.fr UX/UI redesign

During 2022, the Bocage teams and their counterparts from the Éram and Mellow Yellow brands were responsible for redesigning the three sites on an entirely new shared e‑commerce platform to achieve greater synergy between the sites themselves and the underlying logistics.

Bocage, which until then had the oldest and slowest e‑commerce infrastructure, was the first site to be migrated to the new platform. As a designer at Bocage and an experienced front‑end integrator, I worked extensively with the web agency (Clever Age) to design the UX and front‑end of the new platform and also worked on the future UI design of the Bocage site.

I thus collaborated with the agency on the UX/UI of navigation, listing pages, product pages, the CMS for content pages, the checkout funnel, the loyalty program, and the display of RSE criteria.

I also fully designed and coded the Home page, the Women and Men category pages, as well as the main player for the category pages with an optimised, fully responsive video player.

visit the Bocage site ↗

Arthur Barat — Bocage - Art Direction & UX/UI : Refonte UX/UI Homepage Bocage Responsive PC
Arthur Barat — Bocage - Art Direction & UX/UI : Refonte UX/UI Page Univers Bocage Responsive
Arthur Barat — Bocage - Art Direction & UX/UI : Refonte UX/UI Page Liste de produit Bocage Responsive PC
Arthur Barat — Bocage - Art Direction & UX/UI : Refonte UX/UI Page Liste de produit Bocage Responsive Mobile
Arthur Barat — Bocage - Art Direction & UX/UI : Refonte UX/UI Page produit Bocage Responsive


Little bonus, I have a screenshot of the old site that was dormant on the PC; I coded a script to show rendered views rather than packshots in the photos. Here’s what the Bocage site looked like before the redesign.

Arthur Barat — Bocage - Art Direction & UX/UI : photo 9

Redesign and prototyping UX/UI of the loyalty program

Total redesign of Bocage's loyalty program and its integration into the e‑commerce platform. However, the native interface offered by the platform does not meet the brand’s and teams’ needs, so it was decided to overhaul a large portion of the UX (user experience).

Here are some screenshots of the prototype and the associated mockups I created with Figma. This prototype was built responsively, minimizing differences between mobile and desktop versions. The mockups were produced in all possible iterations to anticipate potential issues and strengthen synergy with the development web agency (Clever Age).

This prototype will then be integrated and used to rework and improve the loyalty interfaces for Éram and Mellow Yellow.

Arthur Barat — Bocage - Art Direction & UX/UI : Prototype UX/UI Figma Interactif fidélité Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Maquettes UX/UI Figma Espace fidélité Compte Bocage
Arthur Barat — Bocage - Art Direction & UX/UI : Maquettes UX/UI Figma Composants fidélité Bocage