JuxBar

JuxBar est un projet de fin de bootcamp (Le Wagon) réalisé en décembre 2019 à Bordeaux. L'objectif principal n'était pas seulement de concevoir un produit technologique, mais aussi d'utiliser tous les outils et connaissances que nous avons acquis au cours des dix semaines de bootcamp de codage, pour sortir un produit qui fonctionne et pour lequel nous pourrions faire une démo.

Problème
Ne pas pouvoir écouter la musique qu'on aime tout en partageant un moment avec nos amis dans un bar.
Objectif
Parce que les quatre membres de l'équipe adorent la musique et partager des moments entre amis en buvant dans les bars, nous avons pensé à notre frustration de ne pas pouvoir écouter la musique que nous aimons pendant ces moments. Puis nous avons pensé à nos grands-parents et surtout à leurs juke-box légendaires. JuxBar est une version moderne du jukebox, offrant aux personnes dans un bar la possibilité de sélectionner et de faire écouter la musique de leur choix, parmi une sélection préparée par le propriétaire du bar. 
Approche
En raison du peu de temps alloué, il n'a pas été possible de mettre en place un processus UX complet (planification, exploration, idéation, génération et évaluation). Et comme les membres de l'équipe étaient le public cible, nous avons décidé de nous concentrer sur une histoire (utilisateur) publique et de travailler profondément dessus pour concevoir quelque chose qui était très extrêmement utile, esthétique et pour le rendre en ligne.

Nous nous sommes donc concentrés sur trois étapes
• Idéation (persona, user story…)
• Génération (wireframes, direction artistique, prototype, maquettes)
• Développement
Mon rôle
En tant que concepteur UX/UI, j'ai géré les sessions de sprint pour définir la carte d'expérience, les personas, les user stories, l'expérience utilisateur et ses wireframes, pour décider ensemble des principaux aspects de conception de l'application. Ensuite, pour accélérer le processus, les autres membres de l'équipe m'ont donné une carte blanche sur le design.
Pendant le processus de développement, j'étais en charge du front-end et j'ai supervisé la cohérence et le respect du design, que je dois adapter fréquemment.
 
Outils
• Whimsical
• Adobe XD
• Adobe Illustrator
• Adobe Photoshop
Durée
Trois semaines.
I. Idéation
Même si, en tant que membres de JuxBar, nous étions la cible, nous décidions de définir un persona, qui serait notre utilisateur cible. Ce personnage nous a aidé à identifier la carte d'expérience pour cibler les problèmes à résoudre et concevoir des solutions pour y remédier.​​​​​​​
• Persona 
• User Stories 
Avec la conception du persona et de la carte d'expérience, il était plus facile pour moi de définir une user story.
• User story I
En tant que client, je veux pouvoir obtenir des informations sur la musique jouée dans le bar où je me trouve afin de pouvoir découvrir et enregistrer rapidement une nouvelle chanson que j'aime.
Critères d'acceptation
Le bonheur de découvrir de nouvelles musiques et chansons.
• User story II
En tant que client, je souhaite définir une playlist de chansons qui seront jouées dans le bar où je suis, afin que je puisse écouter la musique que j'aime et que j'ai choisie.
Critères d'acceptation
Le bonheur d'écouter de la musique que j'aime.
Fierté de faire danser et d'apprécier la musique que j'ai jouée.
 
II. Génération
Une fois le persona et les user stories définies, nous pouvons désormais générer :
• User flow
• Maquettes
• Maquettes
• ​​​​​​​ User flows (visuel en anglais)
•  Wireframes (visuel en anglais)
 Style guide
 Mockups
.Geolocalisation
Trouver une session JuxBar en fonction du thème musical du bar ou de sa géolocalisation.
.Informations bars
Avoir des informations sur le bar et sur la session JuxBar (thème musical, adresse, ...).
Avoir l'opportunité d'aimer le bar. Une fois que l'utilisateur est dans le bar
et clique sur le bouton "Rejoindre", il aura accès à la session JuxBar.
.La session Juxbar
Ceci est la page principale de l'application. Ici, l'utilisateur a des informations sur la musique jouée dans la barre, aimer la chanson, avoir des informations sur les listes de lecture à venir définies par les autres utilisateurs dans la barre, aimer les chansons à jouer à venir et enfin, définir sa propre playlist en cliquant sur le bouton DJ en bas.
.Playlist
L'utilisateur peut sélectionner au maximum cinq chansons parmi la sélection effectuée par le propriétaire du bar.
.Validation
Dès que l'utilisateur a validé sa playlist, une pop up apparaît pour lui faire savoir que sa playlist a été validée. Il sera ajouté à la fin de la file d'attente, après les autres listes de lecture.
.Profil
L'utilisateur peut retrouver toutes ses barres supérieures où il est allé, toutes les chansons déjà sélectionnées dans des playlists déjà définies, son classement en tant qu'utilisateur JuxBar et le nombre de sessions Juxbar auxquelles il a participé.
III. Développement
Après une semaine de travail sur les étapes précédentes, nous avons finalisé la conception de l'application JuxBar. À ce moment-là, nous étions prêts à commencer à coder l'application JuxBar, soit juste deux semaines avant le jour du demo day.

La principale difficulté de cette étape était de mettre en place une API Pour pouvoir jouer une bibliothèque musicale à partir d'une application de musique en streaming. Pour des raisons techniques, nous nous sommes concentrés sur Deezer (une application française).

Langages de codage:
• Rubis sur rails
• HTML5
• CSS3
• Javascript
• Bootstrap
IV. Conclusion
Comme mentionné au début de l'étude de cas, la durée du projet n'était que de trois semaines. Pendant ce temps, nous avons défini l'expérience utilisateur, la conception de l'application et nous l'avons développée à temps pour le demo day.
En termes d'UX et d'interface utilisateur, il était très difficile de travailler dans un délai aussi court. Cela m'a également permis de travailler sur le design et de réfléchir aux prochaines étapes de développement en même temps.
Afin d'éviter les problèmes habituels de mauvaise communication et de confusion lors du développement, nous avons pu préconiser un modèle de codage pendant la phase de génération qui nous permettrait de gagner du temps. Et sur le plan personnel, cela m'a permis de gérer le design et de respecter l'expérience utilisateur globale de l'idée au produit.
Back to Top