Data Play, ou comment parler d’un sujet d’actualité.
Découvrez ECO2
Le workshop
Cet atelier réalisé par un groupe à l’HEAJ option DWM, avait pour but de jouer avec des données afin d’avoir une représentation visuelle ludique. Pour notre projet, nous avons choisi d’utiliser les informations des émissions de CO2 d’EDGAR de chaque pays entre 1970 et 2016.
Notre groupe est composé de 5 étudiants : Aline, Hélène, Alexiane, Jean-Christophe et Raffaele. Notre but était de proposer une carte du monde abstraite (la taille des pays varie en fonction de son émission de CO2).
Le design
La première étape était bien sûr de trouver comment représenter cette idée à travers une interface ergonomique. Nous avons d’abord divisé le travail en deux grandes parties : la recherche de design et d’idées, et la recherche de la data visualisation. Nous avons eu beaucoup de difficultés à avoir un “play” digne de ce nom.
Pendant la première semaine, le sujet et le design sont venus assez naturellement. Il y a eu une bonne entente au sein du groupe, ce qui nous a permis de bien avancer et d’être dans les temps.
Début du code
Après avoir trouvé la manière d’exposer les données, chacun savait ce qu’il avait à faire. JC s’occupait du JS et des “data”, Aline et Alex se sont occupées du design, Raf a fait des propositions graphiques et Hélène a codé le reste du site en dehors de la data visualisation.
À la fin de la première semaine, notre design était fini, le code de la version mobile aussi, restait à coder en desktop et à faire la communication graphique.
Les problèmes
Moults soucis nous ont quand même ralentis. Nous voulions faire des gifs explicatifs (sur after effect) pour faciliter la visualisation des fonctionnalités de notre site web, mais on a dû s’y reprendre à 3 fois et tout recommencer, ceci étant dû à différents problèmes avec la représentation sur le site qui changeait toute seule, et le logiciel qui plantait.
Quelle ne fût pas notre surprise de découvrir 2 jours avant la remise que le plugin jquery que nous utilisions pour la data visualisation (highcharts) avait fait une mise à jour et on a dû rapidement tout changer pour réadapter ce plugin à notre interface. Mais au final ce n’est pas plus mal car plus interactif que notre version précédente.
Les points positifs et négatifs du workshop
Positif :
- Tous sur la même longueur d’onde
- Vite mis d’accord sur un sujet pour travailler
- Création d’un planing : nous étions super organisés et fixions nos objectifs efficacement
- Chacun a donné des idées (visualisation, design, couleurs, typos)
- C’était le premier projet effectué en Sass
- Beaucoup d’échanges avec le reste de l’équipe qui permet de faciliter la création de la communication (flyers, affiches, réseaux, etc)
Négatif :
- Trop d’idées différentes
- On a eu du mal à trouver le côté “play” de notre projet
- Nous étions 5 pour nous occuper de tout et on avançait assez vite
- Problèmes d’intégration des gifs
- Mise à jour de la data visualisation : on a dû réadapter et refaire les gifs (encore)
- Nous avons changé et inversé certaines couleurs et donc modifié la charte graphique
De l’idée de base à la version finale
À la base, nous avions juste l’idée de faire une carte représentant les pays, mais le projet a beaucoup évolué au fil du temps. Maintenant, nous avons également la possibilité de comparer des pays entre eux (et un même pays à des dates différentes) et de voir le nombre d’arbres que l’on doit planter pour compenser l’émission de CO2 cette année là.
On a également ajouté les petits tips afin de moins consommer, ce qui n’était pas du tout prévu à la base.
Nous avions initialement prévu un petit quizz qui ne s’est jamais fait, nous avons préféré mettre en avant d’autres fonctionnalités plus pertinentes (le quizz n’était pas trop adapté à ce sujet sérieux).
Les pictogrammes que nous voulions utiliser ne rentraient pas dans la charte graphique et ont finalement été remplacés par un diagramme circulaire.
Nous nous sommes rendus compte que les data prenaient beaucoup de temps à charger, d’où la création d’un loader afin de signaler à l’utilisateur que le site charge.
Le stand
Le jour J, nous avons décoré notre petit stand d’une affiche, de flyers, de stickers, de bonbons et d’une petite mappemonde, le tout sur une belle nappe. Avec bien sûr, un ordinateur, une tablette et un téléphone pour montrer les différents formats de notre site.
Conclusion
Cette expérience était enrichissante pour tout le monde. Notre groupe était soudé, notre sujet intéressant et notre motivation sans faille.
Et étant donné que nous avions pas mal d’avance sur ce projet, nous avons pu demander des débriefings régulièrement afin d’améliorer notre travail et ainsi rendre une interface aussi complète que possible.
Pour voir le projet finalisé!
Réalisé par Aline Meunier, Alexiane Dapsens d’Yvoir, Raffaele Stasi, Jean-Christophe Wieme et votre humble serviteur Hélène Goffinet.
