Changez de regard sur le chariot élévateur avec Manitou MLTX

Bérénice - 15/07/2015

À l’ère du tout-numérique, les brochures papier ne répondent plus à l’intégralité des besoins de communication des marques. C’est avec ce constat que Manitou est venu vers Escale pour mettre sur support numérique l’ensemble de ses brochures présentant chacune des gammes du groupe. Après analyse de leur demande et de leurs besoins, nous leur avons proposé de réaliser un site d’expérience pour Manitou MLT-X.

Lorsque Manitou nous a confié cette mission, leur demande initiale était toute simple : passer du format papier au format PDF accessible en ligne. Il s’agissait donc de dupliquer les brochures existantes, telles quelles, sur le web. Escale, en tant qu’agence d’innovation web, a toujours la volonté d’aller plus loin et de proposer à ses clients des plateformes web avec une véritable plus-value. C’est pourquoi nous avons rapidement pensé à proposer à Manitou un site immersif pour sa gamme de chariots élévateurs téléscopiques MLT-X.

manitou mltw site web experience video chariot elevateur

Screenshot accueil Manitou MLT-X


METTRE EN SCÈNE LE PRODUIT

Effets de survols, de glissements, de défilements d'éléments, vidéos, sons, baselines, etc. Nombreuses sont les techniques utilisées sur les sites d'expérience pour créer une véritable mise en scène du produit. Le site d’expérience plonge l’internaute dans l’univers de la marque en lui racontant une histoire et en lui permettant d’interagir avec le produit.

Pour mettre en avant toutes les informations disponibles dans les brochures papier (concept, caractéristiques techniques, accessoires, etc), nous nous sommes inspirés de sites d’expériences, comme peuvent en proposer certaines marques automobiles de luxe, telles que LandRover, ou encore Moto360, la smartwatch de Motorola. Les marques visant une cible plutôt jeune et connectée, tout comme les marques présentant des produits de luxe, sont particulièrement consommatrices de ces sites immersifs, qui offrent une expérience utilisateur soignée et cohérente avec le produit.

À première vue, on pourrait donc penser que ce type de plateforme est inapproprié au vu de la cible de Manitou et de sa gamme de chariots élévateurs MLT-X. Mais, cela n’a pas freiné l’équipe de Manitou, avide de solutions innovantes comme le montre la refonte de manitou.com, qui a été séduite par cette proposition. 
Le défi pour Escale était de créer un site d'expérience permettant une réelle exploration de la gamme MLT-X, tout en restant adapté à la cible d’agriculteurs exploitants. Ce site permet à Manitou d’associer sa machine industrialo-agricole à un produit haut de gamme, tout en conservant les informations pratico-pratiques, recherchées par sa clientèle.


L'EXPÉRIENCE MANITOU PLUS VRAIE QUE NATURE

À travers le site d'expérience Manitou MLT-X, nous accomplissons un voyage au coeur de la gamme MLT-X Range à la découverte des différents chariots élévateurs. Aussi bien accessible sur ordinateur que sur smartphone grâce à sa conception en responsive design, nous sommes saisis par les photos et vidéos qui nous accueillent sur le site, et nous permettent de découvrir les chariots en action. Une manière de garantir leur performance, et d’explorer les différents usages possibles des chariots de la gamme, tout en laissant la possibilité au client d’innover et d’en inventer de nouvelles.

Très vite, une vue panoramique à 360° nous permet de prendre la place du conducteur dans la cabine du chariot téléscopique, comme si nous étions prêts à le démarrer. Quelques scrolls nous permettent ensuite d’accéder à un carrousel présentant les caractéristiques techniques de chaque engin, ainsi qu’un abaque de charge. On retrouve également les informations sur les différents services du groupe Manitou, mais aussi une carte pour repérer les concessionnaires des quatre coins du monde.

Avec Manitou MLT-X, c’est une image forte de la marque et ses produits qui est véhiculé. En parcourant le site, le visiteur vit une expérience unique, qui crée un lien solide entre la marque et lui.


manitou mltw site web experience panoramique cabine chariot elevateur

Vue panoramique de la cabine du chariot élévateur


DES CONTRAINTES TECHNIQUES POUR UNE GAMME INTERNATIONALE

Manitou, entreprise française basée à Ancenis, distribue ses produits à l’international. Tout comme pour le site manitou.com, nous allons voir que plusieurs contraintes découlent de cette dimension mondiale.

La première contrainte est celle de l’internationalisation. Nous pensons immédiatement à la contrainte de la langue dans ce genre de cas. Mais ce n’est pas la seule à prendre en compte. En effet, les caractéristiques techniques contenant des unités de mesure, telles que le poids ou la taille, occupent une place primordiale dans les brochures des gammes Manitou, il faut donc les décliner en système métrique et en système impérial. Il faut également penser à adapter les codes couleur, dont la signification peut varier en fonction des cultures, mais aussi les graphiques ou encore les formats d’heure et de date.

Nous avons donc mis en place l'internationalisation (i18n) qui consiste à séparer, dans le code source, ce qui est dépendant de la langue ou la culture, et ce qui ne l’est pas. Dans le cas de Manitou MLT-X, nous avons décliné le site uniquement en anglais et français. Lorsque le visiteur tape l’adresse du site dans son navigateur, il arrive automatiquement sur la version anglaise du site, mais peut facilement basculer sur la version française depuis le header. Et grâce à l’internationalisation i18n, le visiteur accède à un site linguistiquement correct, quelque soit la langue choisie. De plus, si Manitou souhaite rendre son site accessible dans d’autres langues, il leur suffit simplement de renseigner un fichier de traduction.

La seconde est une contrainte technique, liée aux supports d’accès au site. La distribution de la gamme MLT-X est importante dans les pays émergents, dans lesquels l’accès au web se fait essentiellement via mobile, ou sur des versions de navigateurs plus anciennes, et avec des connexions plus lentes. Nous devions donc prendre en compte ces difficultés, afin de réaliser une plateforme responsive dont le temps de chargement serait le plus court possible, quelque soit le support utilisé.


LA VITRINE DE LA GAMME MLT-X

Pour le développement de Manitou MLT-X, nous avons privilégié le site statique. Les sites statiques sont un assemblage de pages HTML fixes. C’est-à-dire qu’une fois la page créée, la mise en page et le contenu sont liés. Ils ne permettant pas la gestion de bases de données, et donc le visiteur ne peut interagir avec le site comme il serait amené à le faire sur un site dynamique via un système d’inscription ou de commentaires. Les sites statiques ne nécessitent pas de développement back-end et sont plus optimisés dans la mesure où ils n’ont pas à charger dynamiquement de contenus, ce qui s’avère être une contrainte importante pour la plupart des projets. Ils sont donc particulièrement adaptés à des sites vitrines, voués à peu évoluer dans le temps. Parce que le site Manitou MLT-X est un avant tout une vitrine pour cette gamme de chariots élévateurs, nous avons choisi cette solution.

Pour la création de Manitou MLT-X, nous avons utilisé Jekyll : un générateur de site statique développé en Ruby. Créé par Tom Preston Werner, également co-fondateur de Github, Jekyll est, par exemple, le moteur qui fait tourner Github Pages. Un des avantages de Jekyll est d’ailleurs d’être pris en charge nativement par Github. De plus, ce générateur de site est un outil adapté aux méthodes de travail utilisées chez Escale car il permet le travail collaboratif grâce au versionning via git.


UN SITE D’EXPÉRIENCE RESPONSIVE

Bien que facilitée par des outils de gestion automatisée, comme Bower ou Grunt, le véritable défi du développement de Manitou MLT-X a été de réaliser un site d’expérience responsive, point fondamental dans le cahier des charges des différents sites du groupe Manitou. Cette contrainte technique, que nous appliquons à tous les sites développés par Escale et d’ordinaire plutôt simple à mettre en oeuvre grâce au framework Bootstrap, s’est corsée pour ce site d’expérience en raison de la diversité de ses composants et de leurs comportements.

Le site d’expérience Manitou MLT-X se compose de huit panels, accessibles d’un côté via le menu qui apparaît lors du survol des points à gauche de la page, et de l’autre via le défilement de la page. Ces huit panels représentent chacun un sous-menu contenant différents composants : vidéo, système de grilles, image avec effets de survol, carrousel, etc. Chacun des composants de ces huit panels doit s’adapter aux différents supports utilisés par les visiteurs. Ainsi que leurs contenus textes qui présentent des longueurs variables en fonction de la version linguistique sélectionnée par l’utilisateur.

Notre équipe a donc du décliner conception, design et intégration de chacun des panels en soignant les transition entre trois formats différents : ordinateur, tablette et smartphone. Prenons pour exemple les systèmes de grille. Sur un format laptop, on a une grille de six cards photos cliquables pour laisser apparaître un texte, chacune étant également accessible via un menu présent sous la grille. Sur un format tablette, elle diminue et n’apparaissent plus que trois cards, les trois autres restant accessibles via le menu. Enfin, sur un format smartphone, la grille se transforme en slider. Pour avoir un résultat tel que celui-ci, et donc offrir une expérience utilisateur optimale quel que soit le support, il a fallu développer ces trois possibilités indépendemment, comme si nous développions trois sites différents.


responsive laptop manitou mltx web experience

Manitou MLTX : screenshot laptop

responsive tablette manitou mltx web experience
Screenshot tablette
responsive smartphone manitou mltx web experience
Screenshot smartphone

UNE SOLUTION D’HÉBERGEMENT SCALABLE

Concernant la partie hébergement du site, Manitou a fait le choix de sous-traiter et de confier cette tâche à la startup nantaise Clever Cloud, comme pour la refonte du site manitou.com.

Clever Cloud simplifie l’idée de l’hébergement en prenant en charge intégralement les problématiques associées, comme la gestion des serveurs. Les applications sont déployées avec une quantité initiale de “ressources”, qui réduisent ou augmentent proportionnellement au trafic. D’ordinaire, lorsque l’on pense site statique, on pense rapidité du temps de chargement grâce à l’absence de base de données. Mais le site Manitou MLT-X se différencie des sites statiques ordinaires. Compte tenu de son caractère expérience et immersif, il intègre vidéos et photos HD qui influent dans le temps de chargement du site, et nécessite donc une solution d’hébergement adaptée.

Cette solution est flexible techniquement, mais aussi financièrement. Le coût de l’hébergement est calculé selon la consommation du site (par tranches de quelques minutes), et donc le nombre de serveurs déployés pour gérer la charge, le tout plafonné par un budget maximum établi en amont.


En conclusion, nous avons transformé un simple projet de numérisation de brochures papier en une expérience unique pour l’internaute, impossible à retraduire sur un format papier. Nous avons mis en place une solution qui utilise le web comme un véritable médium, et pas uniquement comme un support pour un contenu générique. Ce site d’expérience représente de véritables avantages pour Manitou car il a été développé pour permettre d’éventuelles déclinaisons rapides et faciles pour les différentes gammes de leur catalogue. De plus, son accessibilité sur un format de type tablette peut faire de Manitou MLT-X une plaquette numérique, exploitable très facilement à l’occasion de différents événements, comme un salon par exemple.

Manitou MLT-X, mis en ligne il y a quelques mois, est le premier projet de site d’expérience réalisé chez Escale. Un projet de grande envergure qui, en plus de nous permettre de monter en compétences, consolide nos liens avec le leader du chariot élévateur.


Et si on parlait de vous ?

Vous avez un projet de site web ? Une problématique technique à nous soumettre ?
Dites-nous en plus : nous sommes impatients de découvrir votre projet !

escale © 2017 | Startup Palace - 18 rue Scribe - 44000 Nantes France | Proudly built on GestionAIRMentions Légales