Contexte

Desoutter Tools est un fabricant industriel d’outils d’assemblage pneumatiques et électriques, fondé en 1914 et basé à coté de Nantes.

Le groupe compte 20 filiales et est présent dans 170 pays.

Après presque 10 années de bon et loyaux services, le site web de Desoutter

Le projet de refonte part d'un double constat : le site à presque 10 ans n’est ni aligné avec les attentes des utilisateurs (prospects et clients), ni aligné avec les tendances et performances web actuelles.

De plus, le marché de l’outillage professionnel est toujours plus concurrentiel et en constante évolution : industrie 4.0, valorisation de la data, maintenance prédictive, traçabilité, profusion de services, etc.

En été 2023, Lonestone a été missionné pour mener le projet de refonte du site. Notre équipe était composée de 2 designers, 2 développeurs, 1 product manager et 1 expert SEO. Coté Desoutter, l’équipe comptait 1 responsable projet, 1 expert technique, 1 chargée de contenu et divers intervenants ponctuel.

Nous avons eu 6 mois pour mener une phase de user-research, concevoir le nouveau site (en design et techniquement) et le développer.

La mission s’est exclusivement déroulée en anglais.

La homepage du site avant la refonte.

Faire l’état des lieux

J’ai mené en autonomie la phase de recherche utilisateur afin :

• d’identifier les avantages et les points faibles de l'expérience globale actuelle,

• de recueillir des insights auprès des différentes des équipes Desoutter

• de faire des recommandations qui correspondent aux besoins des clients et prospects, aux objectifs commerciaux et à la vision de l'entreprise.

Du coté de la méthodologie, j’ai mené :

• 3 focus group avec :

  • l’équipe en charge de l’expérience “digitale”,

  • des profils ‘techniciens” / “ingénieurs”, orientés outils et services,

  • des profils commerciaux et marketing, afin de relever les enjeux business

• Un questionnaire adressé aux différents “Customer Centers” (Amérique du nord, Europe de l’est et centrale, Royaume-Uni, Chine, Inde, etc.) pour capter les expériences, besoins et tendances locales,

• 5 entretiens individuels ou en binômes pour approfondir les sujets qui ont émergé des précédents échanges et du questionnaire.

Cette phase a permis d’identifier un certain nombre d’enjeux, par exemple :

• les trop nombreuses prises de contact avec les équipes commerciales et supports pour des requêtes qui pourraient être évitées,

• performance pas toujours suffisante, par exemple lors de l’affichage des produits dans le très riche catalogue,

• la gestion des contenus qui devront être traduits et qui devront pouvoir être propres à chaque “localisation”.

Pour faciliter la phase de conception, j’ai défini 8 piliers sur lesquels nous devrons faire reposer le site et qui nous permettrons de faire des choix design et techniques : simplification, améliorer l’accès aux produits et aux solutions, mettre en avant l’aspect “humain”, améliorer l’accès à la documentation et donner davantage d’autonomie au prospect ou client.

Objectif MVP

Compte tenu du périmètre du site, nous avons préconisé à Desoutter d’aborder le site de manière itérative. L’objectif était d’aboutir rapidement à une v1 solide qui serait la base sur laquelle nous pourrons par la suite itérer.

Nous avons listés les écrans à concevoir et identifiés ceux faisant partie de notre MVP.

Afin de communiquer sur ce périmètre restreint et de suivre l’avancé des écrans en phase de design, nous mis en place un dashboard accessible par toutes les parties prenantes du projet.

Florent, mon binôme designer et moi le mettions régulièrement à jour.

Organisation par blocs et variants

Pour faciliter la mise en ligne des contenus, garantir la cohérence du site et pour gagner en temps de conception et de développement, nous avons opté pour une approche par blocs et par variants

Cette approche a été idéale pour permettre à mon binôme et moi de contribuer sur nos périmètres respectifs (nous avons une sensibilité différente et des compétences complémentaires) et pour produire beaucoup dans un temps restreint.

D’un point de vue technique, cela a grandement facilité les choses et a permis aux développeurs de mettre en place relativement facilement l’administration des contenus côté client sur Dato.

Après plus de cinquante blocs et variants conçus, nous les avons mis à l’épreuve en maquettant les pages du MVP.

Suivi de développement et recette

Une fois le développement commencé, notre temps de design s’est divisés sur plusieurs sujets :

• décliner les sections en multiples variants,

• finaliser les maquettes en UI,

• intégrer les derniers contenus et adapter les maquettes à la marge,

• faire la recette UX et UI via Clickup

  
  

Conclusion

Nous avons livré la v1 du site dans les temps et sans encombres grace à la confiance mutuelle que nous nous portons (designers, développeurs, PM), à la réactivité du client et à l’investissement de tous.

Quelques écrans clés

La recherche, qui intègre de l'auto-complétion et un système de filtres.

Le menu déroulant, qui présente les produits et services par usages.

La section hero d'une page "Industrie".

Le catalogue produits, qui permet l'exploration par usages, par industries, par gammes de produits, etc.

Le hub des services proposés par Desoutter.

Le blog, pilier du SEO, pour mettre en avant les contenus d'experts.