Conception site web corporate exemple

Spécificités de la mission Valeo

Nous avons souhaité valoriser la mission Valeo, afin d'illustrer les différentes étapes du travail de conception.

Les travaux ont été réalisés en 2012.
Visualisez le projet UX Valeo...

A propos de Valeo

Valeo est un équipementier automobile partenaire des principaux constructeurs automobiles internationaux. La technologie et l'innovation sont au coeur des activités du groupe : conception et fabrication de systèmes et d'équipements intégrés, de modules et de composants pour l'industrie automobile (réduction des émissions de CO², développement de la conduite intuitive - par exemple l'aide au stationnement).

Problématique digitale de Valeo

Valeo.com reflétait une plateforme en fin de cycle et ne traduisait plus les objectifs de communication de la marque.

Par ailleurs, le volume éditorial du dispositif était à la mesure d'un acteur de taille critique : énormément de contenus créés et ajoutés au fur et à mesure, avec en bout de course, un site complexe ne parvenant pas à faire remonter l'essentiel, avec une lecture peu lisible des activités du groupe.

Il s'agissait de redonner une dimension humaine à ce site pour le rendre accessible à ses principaux publics tout en évitant de tomber dans l'écueil des sites corporate, celui du dispositif labyrinthique, exhaustif, qui finalement dessert plus la marque qu'autre chose, car trop complet, trop profond, trop éparse.

Analyse de l'existant

La première étape propre à tout projet de conception débute naturellement par une analyse de l'existant.

Cette étape est incontournable, même si elle ne débouche pas sur un livrable. Il s'agit pour le concepteur et l'équipe projet d'accéder à une vision à la fois globlae et détaillée du dispositif, pour en saisir les contours et comprendre les voies d'optimisations possibles.

Un des moyens pour accéder à cette double compréhension (générale et détaillée), est de réaliser un inventaire minutieux de tous les contenus du site : c'est un travail long, parfois fastidieux, mais il permet de bien comprendre la marque, ses objectifs, son positionnement, et naturellement d'observer le fonctionnement de l'objet digital.

En analyse, on peut également réaliser des travaux complémentaires :

• Une analyse de l'ergonomie du dispositif
• Une analyse de l'architecture de l'information du site (organisation des contenus)
• Une analyse des indicateurs de fréquentations
• etc.

Pour ce projet, compte tenu de la faible dimension transactionnelle, d'ailleurs propre à bon nombre de sites institutionnels, l'accent a été porté sur l'analyse de l'architecture de l'information.

Il s'agissait de recréer l'arborescence éditoriale existante, pour d'une part, confronter le volume, la nature et l'angle d'approche éditorial du dispositf avec les objectifs du groupe, et d'autre part, visualiser l'organisation, la profondeur et les possibilités de réaménagement de la stratégie éditoriale.

Cette étape de mise à plat des contenus a été réalisée à la main (comme on dit), c'est à dire que chaque page a été inventoriée l'une après l'autre, et consignée à la façon d'un mind-map (voir ci-dessous).

La troisième illustration montre comment ce matériel brut peut être utilisé dans un document de conception pour reconstituer simplement les différents briques de l'arborescence.

Contextualisation

Il s'agit d'une étape importante qui permet de bien situer le projet dans son contexte. Rien de miraculeux, on essaye ici de factoriser les caractéristiques de la marque et du projet au sein d'un ou deux boards conceptuels...

Dans ce board d'amorce, on peut recenser les questions classiques de type :

• Qui est l'émetteur ?
• Quelles sont ses forces, ses faiblesses, quelles sont les contraintes et les opportunités ?
• Quels sont les éléments distinctifs (marque) et constitutifs de l'activité ?
• Quels sont les axes stratégiques porteurs de l'entité ?
• A qui convient-il de s'adresser, et pour délivrer quel(s) message(s) ?

L'illustration ci-dessous est un exemple de ce que l'on peut réaliser pour "contextualiser" le projet. C'est un moyen de poser les bases en amont de la recherche des solutions de conception, que l'on fait naturellement après avoir bien saisi la nature et le volume du dispositif observé.

Cette contextualisation du projet peut se matérialiser de façon complémentaire par la mise à plat des objectifs (voir board objectifs) pour bien orienter le travail de conception.
Les cibles, une fois identifiées, peuvent faire l'objet d'une approche par persona, sur la base de données réelles et non farfelues (idéalement).

En schématisant, il s'agit de faire une photographie du contexte, de poser les objetctifs et d'identifier les besoins des cibles pour aboutir à un diagnostic général, lequel permet d'entrevoir assez facilement les axes d'optimisations, dès lors que toutes les étapes ont bien été menées.

Les 5 planches ci-après résument cette démarche et constituent une partie du travail de l'architecte de l'information à qui revient aussi le rôle de bien comprendre la marque et le projet qu'il est amené à construire et/ou à réorienter.

Stratégie éditoriale

L'une des carences du dispositif existant était de ne pas parvenir à exposer l'utilisateur final de façon explicite et directe aux activités principales de la marque. Il y avait énormément de contenus organisés dans une logique fragmentée et parcellaire laissant la charge à l'utilisateur final de reconstituer le tout, bref de reconstituer le puzzle.
Le niveau de discours général se rapportait à un registre institutionnel, très corporate, ce qui dégage souvent une "persona de marque" relativement froide.

Il s'agissait donc de proposer une lecture plus concise et factorisée des activités du groupe, dans un langage plus accessible, plus chaleureux, c'est à dire incarné et porté par des vrais humains (et pas par l'agence qui rédige les contenus pour faire un bel exercice de style corporate type rapport annuel :). Un rapport annuel peut alimenter un site institutionnel, mais le site institutionnel s'adresse naturellement à une audience bien plus large, ce qui impose un changement de focale... Or trop souvent, site corporate = rapport annuel. Erratum.

Le dispositif a été réorienté autour de 4 entrées explicites (le groupe, ses engagements, ses expertises, et la tradition d'innovation illustrée par une approche plus "magazine" pour marquer une rupture avec le style parfois descriptif imposé par les registres de la présentation).

En ressort une architecture de l'information resserrée avec une faible profondeur, voulue pour être volontairent maîtrisée. Quelques tests d'interface et de structure ont également été réalisés autour d'une navigation réduite à 3 items, mais le procédé ne s'est pas révélé le plus pertinent devenant trop exclusif sur le choix des thématiques...

Finalement, le dispositif se donnait à voir sous un angle beaucoup plus grand public, là où il était en première instance orienté en direction des publics institutionnels financiers.

Esquisse d'interface

L'interface devait donner à voir un ensemble lisible, dans lequel les innovations de VALEO seraient illustrées comme composante du quotidien des utilisateurs finaux : "la technologie VALEO est dans votre voiture".
La structure générale est aérée et basée sur des modules occupant une part large de l'interface pour ancrer cette volonté de "lisibilité" comme l'illustrent les wireframes des principaux écrans structurants ci-dessous.

Rationalisation de l'architecture

Les premières esquisses d'interface ont permis aux équipes d'échanger pour affiner leur vision de ce que devait être le dispositif VALEO.
Le travail de conception détaillé a permis d'approfondir les grandes thématiques du dispositif et de développer le concept de profilage par la mise en place d'entrées par cibles, ce qui constitue un élément courant et bienvenue pour un site institutionnel amené à adresser un public parfois très diversifié.

L'essentiel pour ne pas se perdre et toujours de construire une structure globale autour du groupe et de ses activités, puis de personnaliser le discours par grand profil d'utilisateur au sein d'espace dédiés, lesquels sont aussi incontournables (RH ressources humaines, COMfi communication financière, PRESSE journalistes) que spécialisés (espace client, espace revendeur de pièces détachés, espace fournisseur, espace SAV...).

Les boards suivants illustrent quelques-uns des principes de navigation et de structure définitifs du projet, permettant de saisir les évolutions des choix opérés par l'équipe projet.

Conception détaillée

S'agissant d'une marque implantée dans près de 30 pays, le dispositif digital a été conçu autour d'une logique de "MASTER" localisé dans les langues des principaux marchés du groupe.

Ci-après, quelques planches extraites du document de conception détaillé du dispositif institutionnel de VALEO.

On voit ici clairement se dessiner les contours définitifs de l'architecture de l'information et de la structure générale de l'interface.

Le calibrage général des modules et des zones fait l'objet d'un découpage pré-défini autour d'une grille dite modulaire pour sa capacité à accueillir des éléments fonctionnels et éditoriaux dans différentes configurations d'occupation de l'espace.

L'architecte de l'information a pour mission de concevor des modules lisibles pour l'utilisateur final derrière son écran, en veillant à respecter les impératifs économiques du projet et les contraintes de faisabilité : ces compromis impliquent un travail de réutilisation maximal pour limiter la charge des travaux de production tout en déployant des codes de lecture pérennes pour une expérience de consultation homogène.

Il arrive parfois que ces 2 axes divergent (impératifs projets vs. expérience de l'utilisateur) générant des arbitrages qui lorsqu'ils sont interminables se font toujours au détriment du projet et des utilisateurs (dans interminable, il y a bien "minable", dans le sens, qui "mine"...).

Conception du site mobile

La volonté du groupe était de disposer d'un objet digital spécifique pour adresser l'expérience de consultation mobile.

Le trend responsive était encore marginal pour des dispositifs de taille critique et le dispositif mobile ne faisait pas partie des volontés stratégiques du donneur d'ordre.

Une version allégée a été conçue autour d'une logique davantage portée sur les impératifs projets que sur de réelles attentes utilisateurs (eh oui ! l'expérience utilisateur est soumise aux contraintes économiques du monde rééel).

Conception de l'intranet

Dans la lignée de la modernisation de l'écosystème digital, il s'agissait également de redessiner les contours de l'expérience digitale proposée aux collaborateurs internes du groupe.
Une mission de conception complémentaire a été réalisée, laquelle visait à proposer une expérience d'intranet plus personnalisée autour de widgets (modules fonctionnels) favorisant le travail collaboratif et adaptés à des profils diversifiés. Ci-après figurent quelques éléments constitutifs de la conception de l'intranet global Valeo.

Refonte et optimisation

Des travaux de prospective ont été menés en 2016 pour repositionner le dispositif digital et moderniser l'approche.

Un environnement digital repositionné

VALEO a fait le choix d'orienter sa stratégie digitale autour d'objets digitaux à dimension plus humaine, privilégiant l'expérience de consultation à l'écueil classique du dispositif institutionnel exhaustif et abscon. Cette volonté de simplification qui semble être une donnée clé de notre temps, dans un contexte de saturation totale de l'espace médiatique, constitue un défi de taille pour les concepteurs d'objets digitaux, car il s'agit de donner à voir simplement l'essence même de la marque de façon non simplifiante (simplifier de façon non simplifiante, c'est à dire en préservant la richesse portée par la complexité).

Cette réorientation davantage "grand public" du dispositif institutionnel a permis de donner un nouvel élan communicationnel au groupe, faisant de l'écosystème digital un support de communication central dans la stratégie de VALEO.

Écrit par
Julien Muckensturm - spécialiste en design ux

Approfondir la conception

Techniques utilisées :

• Analyse stratégique
• Mind map
• Segmentation des contenus
• Arborescence de site web
• Définition de l'interfaca
• Conception du zoning
• Design de navigation
• Wireframing
• Conception mobile
• Conception web
• Conception intranet
• Conception responsive

Etudes de cas à lire :

• Etude de cas Sécurité Routière
• Etude de cas Renault
• Etude de cas Cdiscount

Travaux à visualiser :

• Wireframes
• Zoning
• Design de navigation
• Design mobile first
• Arborescence
• Cartographie

Compétences métier évoquées dans ce projet :

• Design stratégique
• Stratégie éditoriale
• Architecture de l'information
• Design de l'interaction
• Design de l'information
• UI design conception d'interface
• Design conversationnel