Redesign from scratch du site corporate Fayat.com

[ Training / Study Case ]

Voir également la sélection de mes réalisations   Book Up Position.

La problématique

  • Travail d'image et de notoriété : le site vitrine doit mettre en valeur l’envergure des projets réalisés par le groupe Fayat. Des projets très importants viennent conforter sa position de 1er groupe indépendant de construction en France ; 4e groupe de BTP en France ; leader mondial en matériel de compactage ; leader français en construction métallique.
  • Promouvoir l'image de Fayat : richesse des métiers, orientation internationale, entreprise familiale via un univers propre, différenciant et dynamique.

La réponse

Analyse de la société Fayat

J’identifie la société pour laquelle ce site doit être réalisée. Je découvre ses aspects qui la composent : son univers, ses ambitions, ses orientations...

Analyse du contexte

Je place Fayat dans son contexte. Connaître le comportement du marché : à la hausse, à la baisse, en stagnation. Qui est le leader ? Comment la société se positionne parmi les autres acteurs ? Qui sont les concurrents émergents et ceux en déclins ?... Je me nourris de ces infos pour avoir des idées sur le contenu éditorial et aussi, indirectement, sur le design graphique à produire. J’en extrait une liste de concurrents pour l’étape suivante.

Benchmark concurrentiel des Homes sur les aspects contenu et design graphique

J’identifie et répertorie les points communs aux niveaux contenu et design graphique. Je commence à avoir des avis sur ce qui pourraient être des pistes à exploiter ou à éviter. C’est une perception plutôt globale. Mes partis-pris s’affineront au fur et à mesure des étapes suivantes.

Pour comparatif, je réalise également un tour rapide sur l'existant.

Formalisation des objectifs commerciaux, contenus et design graphique

Je traduis les précédentes analyses pour en faire une synthèse. Ainsi, je possède une vue globale de la direction à prendre.

J'esquisse un rapide MindMap* pour dégager quelques grandes idées. Ceci afin de tracer les chemins à emprunter. * Pour schématiser : le MindMap, technique inventée par @Tony_Buzan, vous aide à générer une liste d'idées par association. Lecture recommandée : « MindMap : dessine-moi l'intelligence » par Barry Buzan et Tony Buzan

Planche tendance

Je regroupe divers visuels en rapport avec la société Fayat et les diverses activités qu’elle exerce : bâtiment Travaux Publics, construction métallique, matériel routier... Cette planche me sert d’appui afin de m’inspirer des codes du domaine : couleurs, lignes, formes, espace, texture, échelle...

J'utilise le service Web Niice.co pour générer rapidement cette planche tendance. Une application extrêmement pratique pour collecter à la volée des images sur les différents sites. Qui plus est, @Niiceapp vous met automatiquement en page ces images issues de votre collection selon leurs dimensions et orientations.

Zoning du contenu Home

Je découpe grossièrement le contenu. Les dimensions des blocs indiquent leur importance. Le zoning me sert de mémo pour l’étape du wireframing. Quels éléments doivent y figurer ? Quels hiérarchies occuperont-ils au niveau architecture de l'information ?

Sketch du Wireframe de la Home

Le sketch est l’élaboration d’une piste dans le découpage du contenu et du système de navigation.

Je bascule le wireframe papier sur support numérique car des idées nouvelles peuvent survenir au cours de cette étape. Cette version numériaue est une révision qui me permet de l’améliorer et de l’affiner. C’est pourquoi, le wireframe peut varier par rapport à la version papier. Les éléments qui le composent peuvent être corrigés s’appuyant sur des idées de solutions les meilleures. À cet instant, le système de navigation est déjà validée.

La réalisation

Wireframes numériques de la Home et de la page de contenu sur UXPin

Je m’appuie sur la version papier et j’apporte les améliorations et corrections nécessaires au passage de la version numérique. À cette étape, le périmètre d’une mise en forme se dessine. Voilà pourquoi, je réalise des wireframes hautes-fidélités (hi-fi)(1). J’opère de manière itérative durant le wireframing : teste et valide les diverses options. Les choix fonctionnels sont établis.

Lorsque la version desktop est terminée, je décline sur iPad portrait et smartphone portrait.

En procédant ainsi, j'anticipe 60% du travail de wireframing pour la page de contenu : sytème de navigation et fonctionnalités validées. Je ne passe plus par l’étape papier. J’attaque directement from scratch sur UXPin(2) : teste et valide de manière itérative pour la page de contenu.

Cette étape de wireframing sur UXPin est primordiale car l’orientation du design graphique est déterminant. La haute-fidélité aidant. De fait, je considère, pour ma part, comme une étape de validation du Design et du Sketching du wireframe produit précédemment. En plus, ce wireframing est l'occasion de traduire les intentions des animations (si l'outil le permet, bien évidemment).

À noter, je veille à utiliser le vrai contenu afin que le nouveau design puisse s’ajuster et recevoir sans encombre le contenu existant.

(1) Cependant durant la phase exploratoire, il est préconisé de produire des wireframes lo-fi en mode sketching (lire l'article de @NewflUX_Fr : « Utiliser le prototype Lo-Fi pour une meilleure UX »). Et doivent être conçus bien en amont de l'étape dans laquelle nous sommes.

(2) @uxpin permet la réalisation de wireframes ou de prototypes Lo-Fi/Hi-Fi avec possibilité d'injecter des zones interactives. La nouvelle feature d'UXPin, « Avdvanced Animation », facilite la création de ces interaction.

Maquettes de la Home et de la page de contenu

Passer l’étape du Wireframe, le Design graphique peut subir quelques ajustement et m’appuyant sur les wireframes hi-fi. Je coule le Design dans le gabarit PSD Twitter Boostrap pour anticiper la contrainte responsive sur les trois devices conventionnels : desktop, tablette et smartphone.

Home

Un extrait des argumentaires* avancés pour la Home en vue de justifier mes choix graphiques, fonctionnels, ergonomiques... Documents de synthèse incontournables pour la bonne compréhension des partis-pris servant à la compréhension du commanditaire et personnes en charge de la production du projet. Lecture recommandé : « Révélez votre process. Un bon design ne se vend pas tout seul » par @Cabaroc. * Les arguments ne sont pas visibles dans le Drive de Google. Vous pouvez les lire avec votre lecteur PDF (Adobe Acrobat Reader, par exemple).

UI Motion des interactions

Je réalise, lorsque le temps imparti me le permet, du Motion des intentions d’animation des interactions. Ceci afin d’éclairer le client, ainsi que l'équipe en charge du développement, sur le système de navigation et les différentes interactions. Cela contribue souvent à l’adhésion des partis-pris.

* À noter : ces intentions d’animations peuvent être transposer dans la page de contenu, lors d'événements d’apparition, de masquage, de mouvement s’appliquent sur les composants sur lesquels l’utilisateur intéragit.

Voir également la sélection de mes réalisations   Book Up Position.

Technos utilisées
UX Pin
Adobe Photoshop
Adobe After Effects

Lire aussi : Comment être efficient dans la prise de note d'un rendez-vous ?