Skip to main content

Vanico-Maronyx

Commercial
2022-2023
Visiter le site

Nous avons récemment eu la chance de collaborer avec Vanico-Maronyx, un fabricant de mobilier de salle de bains et de produits sanitaires de qualité supérieure. Le projet présentait un défi de taille : organiser une structure complexe de produits personnalisés.

En cartographiant les relations et en créant une hiérarchie de contenu, nous avons réussi à structurer ce large éventail de produits, modèles, matériaux et options.

Afin de permettre une gestion efficace de ce contenu, nous avons mis en place Craft CMS. Nous avons également développé plusieurs fonctionnalités avancées telles qu'un sélecteur de couleurs, une carte interactive des détaillants et une documentation avancée.

Grâce à une planification minutieuse et une exécution soignée, nous avons transformé la complexité du projet en une expérience de navigation conviviale et intuitive, mettant en valeur l'engagement de Vanico-Maronyx envers la qualité.

Expertises

  • Stratégie de contenu
  • Flux d'utilisateurs
  • Design web
  • Développement

Technologies

  • Craft CMS
  • JavaScript
  • Twig / PHP
  • Tailwind CSS
  • AWS

Particularités

  • Sélecteur de couleurs et de matériaux
  • Carte interactive des détaillants
  • Structure de produit complexe
  • Documentation avec recherche avancée
Troisieme vanico home
Troisieme vanico home mob

Organisation de contenu et wireframes

Afin de créer une expérience utilisateur fluide et intuitive, nous avons consacré des efforts considérables à l'organisation du contenu et la création des wireframes. Nous avons minutieusement listé tous les produits et modèles, ce qui a servi de base à la structure des collections de contenu et à la création des champs du CMS.

Pour faciliter la navigation, nous avons mis en place une hiérarchie de contenu qui organise les modèles au sein de chaque produit, les produits au sein de chaque collection, et les collections au sein de chaque section. Cette logique structurelle a servi de base au site web, permettant aux visiteurs de trouver intuitivement les informations recherchées. Le résultat est un site web bien organisé et convivial qui optimise le flux d'informations et améliore l'expérience utilisateur globale.

Troisieme vanico g sheet
Troisieme vanico wf home
Troisieme vanico wf misc

Design

Nous avons développé un design system qui incarne l'élégance et la sophistication. Avec une esthétique chic et intemporelle, le design met en valeur l'engagement de l'entreprise envers la qualité. Chaque aspect du design, de la palette de couleurs à la typographie, a été soigneusement réalisé pour refléter les normes élevées de la marque et son souci du détail. Le design épuré et raffiné renforce l'attrait visuel du site web et confirme l'excellente réputation Vanico-Maronyx.

Troisieme vanico design system

Recherche de produits et documentation

Nous avons intégré une fonctionnalité de recherche de produits dans l'en-tête du site web, offrant des suggestions pendant que les utilisateurs tapent. Cette fonctionnalité permet de trouver rapidement des produits spécifiques, améliorant ainsi l'efficacité et l'utilisabilité de la recherche.

La section documentation joue également un rôle essentiel en offrant aux utilisateurs un accès facile à une large gamme de ressources. Nous avons développé un système de recherche sophistiqué pour la documentation qui extrait des informations pertinentes à partir de différents champs du CMS. Cette puissante fonctionnalité de recherche permet aux utilisateurs de trouver rapidement les fichiers dont ils ont besoin, que ce soit par catégorie, collection ou produit.

Troisieme vanico search
Troisieme vanico documentation

Menus et navigation

Le projet propose un système de navigation intuitif et convivial. Nous avons créé une navigation en quatre sections avec des icônes, permettant aux utilisateurs de sélectionner facilement la section de produits qu'ils souhaitent explorer. De plus, nous avons développé un méga-menu pour les pages de contenu, organisant les pages par sections pour une navigation plus fluide.

Troisieme vanico menu

Sections et collections de produits

Nous avons organisé la vaste gamme de produits en sections distinctes, garantissant une présentation claire. Les utilisateurs peuvent facilement naviguer à travers les différentes sections de produits et utiliser des filtres pour affiner leur recherche et trouver les collections qui correspondent à leurs préférences.

De plus, les pages dédiées aux collections présentent tous les produits d'une collection spécifique, fournissant des informations détaillées sur leurs caractéristiques uniques, les options disponibles et la documentation pertinente. Cette approche réfléchie améliore l'expérience utilisateur et permet aux visiteurs d'explorer aisément l'offre de produits complète de Vanico-Maronyx.

Troisieme vanico sections
Troisieme vanico sections mob
Troisieme vanico collections mob

Produits

Les pages de produits présentent des images du produit, les matériaux et les couleurs disponibles. Elles affichent également les modèles, les spécifications et les options. Un panneau latéral est également disponible pour fournir aux utilisateurs des informations techniques supplémentaires.

Troisieme vanico products fiche
Troisieme vanico products mobile
Troisieme vanico products specs

Sélecteur de couleurs et matériaux

Nous avons développé une fonctionnalité unique qui permet aux utilisateurs de sélectionner les matériaux de mobiliers et de comptoirs d'une collection. Les utilisateurs peuvent choisir différentes combinaisons et voir instantanément les résultats. Chaque combinaison dispose d'une URL dédiée pour faciliter le partage.

Troisieme vanico selection couleurs 2
Troisieme vanico selection couleurs 1

Carte interactive des détaillants

Le site web comprend une carte interactive où les utilisateurs peuvent entrer leur code postal et trouver les détaillants les plus proches. Cette fonctionnalité utilise l'API Distance Matrix de Google et offre aux utilisateurs un moyen pratique de localiser les détaillants de leur région. Les informations de contact de chaque revendeur sont affichées lorsqu'ils sont sélectionnés sur la carte ou dans le panneau latéral.

Troisieme vanico carte

La collaboration avec troisième nous a permis de simplifier la présentation de nos gammes de produits, tout en évoquant le raffinement et l’élégance de notre entreprise. Tout au long du processus, nous avons ressenti une réelle prise en charge des équipes, nous permettant de faire vivre une plateforme web moderne à la hauteur de nos ambitions.

Charles-Antoine Gauvreau
Directeur général

Pages à contenu standard

En plus des pages liées aux produits, nous avons développé des pages de contenu informatives sur l'entreprise, les services offerts, les guides d'achat, et bien plus encore. Ces pages fournissent des informations précieuses lors du processus d'achat.

Troisieme vanico pages about
Troisieme vanico pages misc 1
Troisieme vanico pages vision
Troisieme vanico pages misc 3

Performances

Nous avons accordé une grande importance aux performances du site web et avons utilisé divers outils pour les mesurer et les optimiser. Le site web a obtenu des scores exceptionnels dans différents indicateurs de performances, se rapprochant de 100 à tous les niveaux sur Google Page Insight.

Troisieme vanico performance

Démarrons votre projet

troisième est une équipe à échelle humaine qui vous accompagne dans le déploiement de vos plus grands projets numériques. Collaborons à atteindre vos idéaux.
Contactez-nous