Le projet Yara, refonte d'un site multilingue avec une nouvelle architecture de l'information

Ci-dessous, j’ai écrit quelques lignes concernant un projet très intéressant que j’ai eu la chance de conduire. Cet article est destiné à vous donner un exemple des services que je peux apporter en tant que consultant Web et architecte de l’information. Je tiens à remercier toutes les personnes qui ont travaillé avec moi sur ce projet et particulièrement Karen et Véronique.
Fabien

L’équipe projet

Information Architecture and Web Strategy:

Macarie Web Consulting, Paris & Oslo

Creative Design: Sebastian Brink, Copenhagen

Technical Development and Implementation:

The Building Blocks Ltd, Manchester

Deployment: Bouvet ASA, Oslo

Refonte d’un site international et multilingue

Le projet. En 2009, Yara décida de changer le CMS (content management system) de tous ses sites web pour passer sur un CMS qui s’appelle Tridion. Le site d’Air1 (l’une des marques de Yara) fut inclus dans ce projet et avait également besoin d’un nouveau look. De plus, le brand manager d’Air1 souhaitait s’appuyer sur une étude SEO comme préalable à la réalisation de la refonte. C’est ainsi que tout a commencé pour moi ! Mes recommandations et ma vision du futur site convainquirent le client de me confier la responsabilité de la refonte.

Le client. Yara est une des plus grosses entreprises norvégiennes, dont le chiffre d’affaires 2008 a atteint 10 Mds €. La marque Air1 fournit des solutions chimiques permettant de réduire les oxydes d’Azote dans le système d’échappement de gaz. Ce produit « vert » est apparu en même temps que les législations mondiales sur les normes non-polluantes dans les transports routiers. Puisque Yara est une société internationale, avec des bureaux, des distributeurs et des clients partout dans le monde, je me devais de développer un concept qui convienne à ce contexte international, notamment capable de gérer plusieurs langues et plusieurs pays.

Légende. Page d'accueil pour la Grande-Bretagne avant la refonte

Le look & feel de l’ancien site avait besoin d’être remis au goût du jour en prenant en compte les nouveaux standards du Web design. Vous pouvez voir ci-dessus à quoi ressemblait le site avant la refonte. Dans sa nouvelle version (ci-dessous), vous pouvez voir que nous avons respecté la ligne graphique de la marque, modernisé le look & feel, introduit un slide-show et une boîte-à-outils dans la colonne de droite. Le challenge de ce projet n’était pas seulement de rendre les pages plus belles à regarder, c’était aussi de donner un accès plus rapide à l’information pertinente. Pour en savoir plus, lisez le paragraphe sur l’architecture de l’information.

Légende. Même page d'accueil après refonte et avec la nouvelle IA

Architecture de l’information et Stratégie Web

Multiples langues et multiples pays.

Un de mes premiers objectifs fut de résoudre la problématique de langues multiples et de pays multiples, véritable préalable avant de commencer le travail sur les maquettes et le design. Mon idée était de concevoir un site basé sur trois briques principales : la structure, la langue et les spécificités du pays. La structure étant la même pour tous les pays, la langue et les spécificités pays étant variables. Ainsi, Yara sera capable de publier des informations sur Air1 dans plusieurs langues pour le même pays (Suisse, Canada) et dans plusieurs pays indépendamment de la langue. Mais aussi – et surtout – chaque ouverture d’un nouveau pays pourra se faire à moindre coût. Nous aurions pu aussi faire varier le nom du produit (car Air1 est la marque de 3 produits dont le nom diffère selon le continent), mais nous avons opté pour conserver cette donnée dans « le dur », en tant que texte basique. J’ai vérifié si Tridion, le nouveau CMS, pouvait supporter ce concept et il le pouvait ! Finalement, le périmètre du projet se délimita à 10 langues et 61 pays.

Orientations.

Carte de migration des contenus

Lorsque j’ai commençé la nouvelle architecture de l’information (IA), j’ai analysé la concurrence et j’ai interviewé le brand manager et le brand coordinator pour bien comprendre le contexte économique et social de l’activité liée au site. Il est apparu que les objectifs utilisateurs principaux étaient de recevoir des informations concernant les coordonnées de contacts, les consignes de sécurité, le prix et la localisation des endroits où le produit est disponible.

Ensuite, j’ai travaillé à la structure de la navigation, développant des orientations majeures qui guideront le reste du travail :

  • Accès rapide aux informations importantes*
  • Localisateur puissant, moderne et élégant
  • Déploiement facile pour d’autres langues et d’autres pays

* C’est pourquoi la boîte-à-outils grise, entre autres principes d’ergonomie au service des objectifs utilisateurs, a été créée.

Dans un projet de refonte, l’IA et le client doivent prendre des décisions importantes sur le contenu existant. Dans notre cas, nous avons décidé de changer toutes les images, mais de conserver un maximum de texte pour réduire le travail de réécriture. J’ai créé une carte de migration des contenus dans ce but (voir ci-contre). Puis, j’ai réalisé les 10 maquettes qui formalisèrent mon IA et fournirent le support nécessaire à la communication avec le client et au travail du designer.

Un nouveau « localisateur ».

L’ancien localisateur était basé sur la technologie Via Michelin. C’est un outil qui permet de localiser les stations-service qui proposent de l’Air1. Connaissant l’API incontournable de Google maps et sa capacité à fournir des données précises, évolutives et mondiales, j’ai suggéré de passer de l’un à l’autre. La différence entre l’ancienne et la nouvelle version est assez impressionnante. Avant, il fallait recharger trois pages pour relancer une recherche, aujourd’hui il n’en faut aucune. D’autres fonctionnalités ont été développées pour obtenir un module vraiment innovant. Aussi bien en terme de look que d’ergonomie, les améliorations sont tangibles. Regardez plutôt vous-même :

Légende. L'ancien localisateur

Légende. Le nouveau localisateur.

Des blogs pour du contenu gratuit.

Une des demandes de Yara était de livrer un site qui ne serait pas exigeant en terme de mise à jour du contenu. J’ai proposé d’utiliser des flux venant de blogs pour peupler certaines zones du site avec ces contenus gratuits. Les sujets retenus furent « les véhicules verts » et « la réduction des émissions ». Nous avons choisi d’afficher ces flux, issus de différents blogs, dans certaines colonnes de droite et même d’y consacrer une page entière.

Voilà ! Je pense que j’en ai dit assez… J’espère n’avoir pas été trop long. Je serais ravi d’apprendre que vous avez apprécié cet article.

N’hésitez pas à me faire des remarques en laissant un commentaire !

Please ! Laissez un commentaire

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>