Data play — Quand la vaste blague se concrétise

Data Play, une histoire de données

Data play, vous ne connaissez pas ?
Il s’agit d’un workshop qui nous a été donné dans le cadre de nos cours à l’HEAJ (Haute école Albert Jacquard) dans l’option DWM (Design web et mobile). Le but étant d’exploiter une série de données correspondant aux coordonnées géographiques de la ville de Namur.

Les données sont représentées en 3 grands groupes différents : Les aires, les bâtiments et les routes.

La consigne est simple : exploiter les séries de données, les trier et créer un contenu ludique permettant de découvrir la ville de Namur.

Au début, une blague. Ensuite, un projet.

Franchement, on ne savait pas trop vers où aller. Tout les groupes semblaient se concorder sur des idées, et on était tous les 4 un peu paumées. Du coup, sur un ton léger, nous proposons de réaliser un brainstorming, et petit à petit des idées naissent sur un ton humoristique.

Au début, il s’agissait juste d’une vanne superposée d’autres vannes qui se sont finalement concrétisées dans le projet le plus drôle sur lequel nous eu l’occasion de travailler jusqu’à présent.

On était tous fatigués et on avait tous envie de se détendre et de rigoler, du coup on a décidé de se baser sur un jeu fun, ludique qui permettrait de découvrir la ville de Namur en répondant à tout les clichés Belges, avec du patois Wallon et quelques couches de frites.

Finalement nous nous sommes vite décidé sur le principe : Un mini jeu de gestion de la ville de Namur, un peu à la Sim City.

Vous pouvez également retrouver l’ensemble de notre document de travail sur le lien suivant : https://docs.google.com/document/d/1niLHK11q6dqwR7GV65yUEH8YEps7cIrzsiOYUk8MofU/edit?usp=sharing

Parlons flat design

On s’est ensuite mis d’accord pour s’attarder à une charte graphique, les moodboard suivant sont représentatifs du design sur lequel nous nous sommes attardés pour notre carte ainsi que pour les bâtiments que nous voulions mettre en avant.

Après une rapide mise en commun, nous étions d’accord pour réaliser une map minimaliste en intégrant des icônes rondes de nos bâtiments, représentés par un symbole simple et basique.

L’aiguille dans la botte de foin !

Et quelle galère ça a été de faire le tri parmi toutes les données ! Nous avons sélectionné une petite partie des bâtiments que nous souhaitions exploiter et nous avons repris l’ensemble des routes.

Mais juste pour le fun, vous voulez un petit aperçu sans titre ? Juste un petit aperçu.

Et comme vous pouvez le voir sur le petit onglet de la souris, on est bien tout en haut de de la page et la page est grande. Trèèèèèèès grande.

Un plan à 4, 5 ou 6 …

Histoire de pas s’emmêler les pinceaux, on s’est répartis le travail et nos idées avec affinité et simplicité. Sur des idées qui se sont mélangées et intégrées, nous avons su déléguer et nous répartir les tâches, tout en ajoutant notre grain de sel à chaque travail et acte effectués.
Cela nous a permis d’être productifs et de créer un véritable esprit d’équipe ! Chacun de nous a su apporter de la richesse au travail de l’autre.

Aline retravaillant sur les pictos de Mariam afin qu’ils correspondent mieux à l’identité graphique établie par le groupe, et qu’ils soient plus distinctifs de loin. Chacun apporte sa pierre à l’édifice et l’échange est plus important, le travail que nous avons réalisé ne nous appartient pas, mais bien au groupe.

Mais une difficulté de taille se présentait devant nous : Aucun de nous 4 ne possédions les connaissances suffisantes en javascript pour ce projet là. Nous avons demandé de l’aide à Mr Delfosse ainsi qu’au bienveillant Clément Schmouker. Grâce à leur aide, nous avons pu mettre en place notre jeu, le Rwè de Namur.

A l’école, on appelle ça de la triche. Dans la vie, il s’agit de coopération. Nous avons su apprendre de personnes plus expérimentées que nous et nous tenons à les mettre à l’honneur et les remercier pour leur patience et leur enthousiasme à l’égard de notre projet.
Le résultat de notre carte après 3 jours de travail et de déchiffrage du code

L’évolution du design

Une autre difficulté à été de s’accorder sur une charte graphique cohérente. Rien n’allait, jusqu’à la création du logo qui a été une piste et qui nous a permis de décliner l’ensemble de notre charte graphique

Premier logo
Premier style graphique de notre map mis en place

Le soucis était que il n’y avait pas de côté fun, les contrastes pas assez net, et qu’on se le dise, ce rose était vachement dégelasse posé comme ça. Du coup après une grande quantité de test de couleurs, nous avons choisi le modèle final.

Quand je vous dis qu’on a testé pas mal de pictogrammes pour nos bâtiments …
Carte finale

C’est ainsi que naquirent les Blurps

On a pas mal avancé par la suite, en passant par la création des personnages, le développement de notre univers, nous avons même eue la chance d’avoir une excellente couturière dans notre groupe qui a réalisé des peluches à l’éfigie des design que nous avons établi pour notre présentation !

Par ailleurs, pour l’anecdote, ces créatures que nous avons imaginées sont appelé les “Blurp”. (Allez savoir pourquoi.) Leurs tentacules rappelant celui de l’escargot, symbole et emblème de la ville de Namur.
C’est grâce à notre légèreté, nos univers différent et notre sens de l’humour des plus douteux que nous avons réalisé un travail dont nous avons tous été particulièrement fiers.

Et c’est ainsi que naquit finalement le design final de notre petit rwè adoré, doté d’un charme fou et dont ont été réalisé un ensemble de 4 peluches.

Et on a de quoi être fiers !

Je pense parler au nom de tous lorsque je dis que nous pouvons tous être très fiers de nous. Nous avons répondu à une demande et réalisé un travail qui sortait de nos compétences de base, appris et progressé en javascript, et malgré la pluie, le froid, la grippe, la connexion internet qui nous faisait faux bond une fois sur deux, le manque d’effectif en prise électrique, nous avons réussi à concevoir ce projet en moins de temps que 14 jours. Au bout de 10 jours, la majorité du projet tournait et il ne restait que des petits détails à revoir.

Mais ça serait trop simple si ça s’arrêtait là …

Hé oui, après lecture auprès de Mr Bourgaux, nous avons du revoir certains détails de notre travail. Ajouter une page reprenant des données ainsi que retravailler le logo qui ne ressemblait pas assez à notre rwè. Du coup, on a bien écouté ses remarques et prise en compte pour retravailler l’ensemble!

Logo final

On a du retoucher également au code pour corriger certains détails et rajouter du contenu à la landing page qui n’était pas assez complète, préparer les prints, et également les différentes figures du rwè selon la prestation à effectuer dans le jeu.

Mais dans l’ensemble, la majorité des personnes venant à notre table de travail étaient emballé par le côté mignon et drôle de notre jeu. Et ca met du baume au coeur et encore plus envie de travailler !

Et quand y’en a plus, y’en a encore !

Et ouais, on pensait tellement avoir fini en avance, mais finalement il y a TOUJOURS des petits soucis de dernière minute. Petit conseil pour les adeptes du web : Ne croyez jamais avoir trop d’avance, parce qu’un petit bug dans le loader que vous avez mis en place peut beugger d’un écran à l’autre, une image n’est pas si centré de l’ordi de Simon au mien, etc …

Mais on a rien lâché, et toujours dans la bonne humeur on a continué de retravailler l’ensemble jusqu’à pouvoir faire une remise propre et correcte.