Word Finder Le case study
Les premières idées
La première étape dans ce projet, comme dans tout projet d’ailleurs, a été la phase d’idéation. Nous nous sommes réunis en groupe afin de trouver un sujet qui nous plairait à tous. Nous voulions un sujet qui nous touche, avec lequel nous avons une affinité.
Nous nous sommes très vite portés sur la musique. À partir de là, nous avons une première idée de sujet : l’évolution des genres musicaux en fonction de la situation géopolitique/économique. Nous avions entendu parler de la pop qui a tendance à gagner en popularité à la suite de crise économique et comme l’art est intimement lié à l'environnement dans lequel il émerge, nous nous sommes dits qu’il y avait sûrement des données à en retirer. Après réflexion sur ce sujet, nous nous sommes rendu compte qu’avec le temps imparti pour ce projet et l’amplitude du sujet traité, ce ne serait pas possible. De plus, il aurait été très difficile de mettre ces données sous formes visuelles, ce qui est la consigne de base du travail.
Nous avons donc réfléchi à de nouveaux sujets. Nous voulions garder le thème de la musique, nous sommes ainsi parvenus à l’idée suivante : une comparaison du langage dans les musiques à travers le temps.
La démarche
Pour mettre ce projet sur pied, il nous fallait donc une sélection de musique et les mots qu’elles contiennent. Nous avons trouvé un site qui archive tous les top 100 Billboard depuis 1946 (longboredsurfer).
Nous avons choisi ce top par question d’uniformité. En effet, la quasi-totalité des musiques de ce top sont en anglais à contrario des tops français par exemple, qui recensent bien souvent des musiques francophone et anglophone. Il y a très peu de données en ligne sur les musiques francophones uniquement. En raison de la quantité d’informations à récolter, nous avons décidé de reprendre exclusivement le top 10 des musiques tous les 5 ans, et ce, depuis 1970. Cela nous laisse une marge entre les années suffisamment grande pour pouvoir voir une différence, s'il y en a une, sans être submergé de données.
Pour le tri des mots, nous avons choisi de ne pas reprendre les déterminants, les pronoms et conjonctions de coordination. Nous avions peur de fausser les données à cause d’une sur-représentations de ces mots. La case a aussi été ignorée, les mots “love” et “Love” sont donc considérés comme un seul et même mot par exemple. Nous avons utilisé le site web databasic.io qui a fait le tri et le compte des mots pour nous. Il nous a permis de retirer le top des mots par musiques, celui par année et enfin sur l’ensemble de la plage d’année sélectionnée, c'est-à -dire de 1970 à 2025. Face à une quantité d’informations trop importante, nous avons remarqué des imprécisions dans les données récoltées, nous les avons ajustées grâce à un tableur Excel afin d’avoir un maximum de justesse dans nos données.
Le design
En parallèle de la récolte de données, nous travaillions sur le design. Nous avons eu l’idée de nous inspirer du logiciel de mixage. Ce sont des programmes qui traitent de grandes quantités d’informations de manière intéractive et qui collent au thème musical choisi, ça correspond donc parfaitement à notre projet.
Nous avons commencé par faire chacun une itération dans l’objectif de faire une mise en commun et d’en retirer les idées les plus pertinentes. Ces premières versions avaient pour but d’avoir une idée générale de la mise en page sans être une version aboutie du design.
Voici les 3 premières versions :-
Premier visuel réalisé par Gaspard -
Premier visuel réalisé par Lyn -
Premier visuel réalisé par moi-même
Par la suite Gaspard a refait une itération cette fois-ci beaucoup plus poussée. Nous avons tout de suite apprécié la DA et avons décidé de poursuivre sur cette voie.
Un problème restait encore, nous avions la DA mais nous n’étions pas encore sûrs des fonctionnalités et intéractions du site. Nous savions quelles données nous avions besoins mais ne savions pas comment les représenter ni comment les rendre accessibles. Nous nous sommes donc mis d’accord sur ce point avant de refaire des itérations.
Gaspard et moi et avons eu les idées suivantes :
-
Design final de la première page réalisé par Gaspard -
Design final de la première page réalisé par moi-même -
Design final de la deuxième page réalisé par Gaspard
Nous avons décidé de garder la version de Gaspard.
En même temps, Lyn et moi étions en train de récolter les données. Nous étions donc prêts à passer au code.
Le code
Nous n’avions encore jamais codé en groupe et le code est bien plus complexe que ce que nous avions fait auparavant, il était donc très difficile de savoir par où commencer et comment se répartir la tâche. Étant malheureusement tombée malade, je n’ai pas pu aider sur le début du code. Lyn et Gaspard avaient déjà fait une première version de l’html et du scss quand j’ai pu me remettre au travail. Nous avons fait en sorte au maximum que chacun travail sur une partie distincte, nous avons très vite vu que repasser sur le code d’une autre personne demandait beaucoup de temps. Effectivement, pour pouvoir travailler dessus, il faut avant tout comprendre ce qui a déjà été noté et quand on n'a pas rédigé le code, cette étape peut prendre beaucoup de temps.
La récolte des dernières données manquantes a été une étape très chronophage. Il nous fallait non plus les mots par rapport aux chansons mais à l’inverse, les chansons par rapport aux mots et nous n’avions cette fois-ci pas de programme pour le faire. Après un premier tri manuel, j’ai découvert des formules Excel qui nous permettait d’automatiser une grande partie de cette recherche et qui m’ont permis de gagner beaucoup de temps. C’est aussi durant cette étape que j’ai corrigé les données erronées de databasic.io.
Concernant la répartition, Lyn et Gaspard se sont majoritairement occupés du JavaScript et du JSON pendant que je m’occupais du front-end et de la récolte de ces données manquantes.
Vous pourrez retrouver le résultat final ici :
