Refonte du site CitéGreen

J’ai travaillé pour CitéGreen et j’ai eu pour mission de refondre le site intégralement. Une chouette mission !

Voici comment j’ai procédé pour ce projet d’envergure qui a duré quelques mois.

Étape 1 : le benchmark & recommandations

J’ai tout d’abord cherché pleins de sites web existant qui pourraient nous aider à refondre notre plateforme. J’ai aussi cherché des fonctionnalités nouvelles et des idées d’améliorations. J’ai pu sortir comme grande tendances actuelles :

• Grande image à photographie ou transparence, les illustrations servent à expliquer le concept
• Les sites vitrines avant d’avoir le vrai contenu
• Les modules d’inscription tout en haut, très visible
• Le flat design – à plat de couleur, bouton simple, design simple
• Couleurs variées et chaudes
• Les effets sur les images (formes rondes ou hexagonales, overlay)
• Menu à gauche et fixe
• Police clean et importée

Ce qui m’a permis d’établir cette liste de fonctionnalités/améliorations à absolument mettre sur notre site :

Étape 2 : le zoning, un travail sur plusieurs versions

À partir de cette liste de recommandation, j’ai commencé à faire le zoning d’une nouvelle version du site. Le zoning est un peu plus évolué qu’un zoning classique, pour des raisons de praticités et de compréhension. Puis avec l’aide des graphistes originels, nous avons peaufiner les détails. J’ai alors fait les maquettes correspondantes.

Étape 3 : refonte de la refonte, une affirmation de mon travail

Je n’étais pas à l’aise avec cette version. Je la trouvais encore trop proche de notre ancien site et pas assez dans l’air du temps. De plus, c’était trop brouillon. Beaucoup trop d’informations en même temps, nous avons pensé aussi à ne plus mettre les stats de chaque action séparés mais sur la même page. J’ai donc proposé un site encore plus épuré et flat avec ces revues en tête.

Qu’est-ce qui a changé entre ces deux versions ?

Plus simplifiée, un menu simple, qui se cache lors du scroll vertical vers le bas mais qui ré-apparaît très vite lors du scroll vertical vers le haut. Nous avons aussi choisi à ce moment d’utiliser Bootstrap, ce qui a structuré les pages. J’ai pu ensuite crée des styles génériques.

Voici un exemple sur les pages action :

J’ai participé au développement du site en tant que chef de projet, planifier les développements avec le responsable technique. Mais aussi comme intégrateur, puisque j’ai intégré l’ensemble des pages designées précédemment. Nous avons lancé cette version du site en mai 2014.

Étape 4 : les améliorations finales & futures

Nous avons ensuite poursuivis nos améliorations pour satisfaire nos utilisateurs. Par exemple, les stats qui se trouvaient sur le tableau de bord n’était pas ou peu vus. Nous avons donc décidés de re-basculer celles-ci sur la page du compte.

Nous voulions un système simple et clair pour présenter toutes nos statistiques ; j’ai donc pensé à des bulles qui fonctionneraient comme des carrousels. Toutes les statistiques d’une action (par exemple la marche) se trouveraient dans la bulle verte et tourneraient en boucle pour afficher consécutivement les points gagnés, les kilomètres parcourus ou encore le nombre de pas effectués. Tous ces stats étaient disponible au jour, à la semaine ou depuis le premier jour d’inscription via un sous-menu composé d’onglets. Le nombre de kilo C02 évités et le classement était recalculés en fonction de la donnée de temporalité. Et enfin le graphique qui reprenaient les données visuellement pour ceux qui préféraient ce genre de visualisation.

Nous avons remis dans le filtre des offres une façon de trier par catégorie, ce que demandait beaucoup de nos utilisateurs. Un code couleur a été mis en place pour ce tri. Ce n’est peut-être la meilleure façon de faire mais je voulais mettre un peu de couleur sur cette page, c’est donc un pari de design peu commun.

Nous avons aussi créer des classements, général sur toutes les actions, mais aussi plus ciblée. Nous avions prévu de sortir un système de loterie et de refaire l’inscription en simplifiant à fond le parcours.

Ce projet a été, sous bien des formes, le plus gros et le plus intéressant projet qui m’ait été donné de réaliser. J’y ai mis toutes mon énergie et mon enthousiaste pour que cela se passe dans de bonnes conditions. Même si le défi était rude et les contraintes parfois fortes, j’ai aimé le faire et j’en garde un très bon souvenir !

Partage sur Facebook

Tweet