JuxBar

JuxBar is a bootcamp coding project made in December 2019 in Bordeaux.The purpose was to build a tech product and show it at a demo day at the end of the three weeks work. The primary goal was not only to design a tech product but also to use all the tools and knowledge we acquired during the ten weeks coding bootcamp. ​​​​​​​​​​​​​​

Problem
Not being able to listen to the music we like while sharing a moment with our friends in a bar.​​​​​​​
Objective
Because the four members of the team love music and sharing moments with friends while drinking in bars, we thought about our frustration of not being able to listen to the music we love during these moments. Then we thought about our grandparents and especially about their legendary jukeboxes. JuxBar is a modern version of the jukebox, offering people in a bar the possibility to select and play the music they want, made amongst a selection composed by the bar owner. The goal of this project was to produce a web app to not only see the final result but also to allow testing with a variety of users.​​​​​​​
Approach
Due to the short time allocated, it wasn’t possible to set up a complete UX process (planning, exploration, ideation, generation, and evaluation). And because members of the team were the target audience, we decided to focus on a public (user) story and deeply work on it to design something which was very extremely useful, aesthetic and to enable it online. 
So we focused on three steps
 • Ideation (persona, user story…)
 • Generation (wireframes, art direction, prototype, mockups)
 • Development
Also, as mentioned above, we deliberately didn’t work on the browser app to manage users' playlists​​​​​​​
My Role
As UX/UI designer, I managed the sprint sessions to define the experience map, the personas, the user stories, the user experience, and its wireframes to decide together the main design aspects of the app. Then, to speed up the process, the other members of the team gave me a clean slate on design. 
During the development process, I was in charge of the front-end and supervised the consistency and respect of the design, which I need to adapt frequently.
 
Tools
• Whimsical
• Adobe XD
• Adobe Illustrator
• Adobe Photoshop
Duration
Three weeks
I. Ideation
Even if, as JuxBar members, we were the target, we decided to define a persona, which would be our target user. This persona has helped us to identify the experience map to target problems to solve and to design solutions to fix it.​​​​​​​
• Persona 
• User Stories 
With the design of persona and the experience map, it was easier for me to define a user story.​​​​​​​
User story I
As a customer, I want to be able to get info about the music being played in the bar where I am so that I can discover and register a new song I like quickly.
Acceptance criteria
Happiness to discover new music and songs.

User story II
As a customer, I want to define a playlist of songs which will be played in the bar where I am, so I can listen to music I like and have chosen.​​​​​​​
Acceptance criteria
Happiness to listen music I like.
Pride to make people dancing and enjoying music I played. 
II. Generation
Once the persona and the user stories defined, we now can generate:
• User flows
• Wireframes
• Mockups
• ​​​​​​​ User flows
• ​​​​​​​ Wireframes
 Style guide
 Mockups
.Geolocation
Finding a JuxBar session according to the music theme of the bar or to its geolocation
.Bar informations
Having informations about the bar and about the JuxBar session (music theme, address,...).
Having the opportunity to like the bar. Once the user is in the bar
and clicks on the "Join" button, 
he will have access to the JuxBar session.
.The Juxbar session
This is the main page of the app. Here the user has informations about the music played in the bar, liking the song, having informations about the upcoming playlists defined by the others users in the bar, liking the upcoming songs to be played and finally, defining his/her own playlist by clicking on DJ button at the bottom.
.Playlist
The user can select five songs max among the selection done by the bar owner.
.Validation
As soon as the user has validated his/her playlist, a pop up appears 
to let him/her know that his/her playlist has been validated.
It will added at the end of the queue, after the others playlists.
.Profile
The user can find all his/her top bars he/she went, all the songs already selected in playlists already defined, his/her ranking as JuxBar user and the number of Juxbar sessions he/she has done.
III. Development
After one week of working hard on the previous steps, we finalized the design of the JuxBar app. At this time, we were ready to start coding the JuxBar app, which was just two weeks before the demo day we were supposed to show the app.
The main difficulty of this step was to upload a music library from a streaming music app. For technical reasons, we focused on Deezer (a French app), which was easier to upload than Spotify.
Coding languages:
• Ruby on rails
• HTML5
• CSS3
• Javascript
• Bootstrap
IV. Conclusion
As mention at the beginning of the case study, the duration project was only three weeks. During this time, we defined the user experience, the design of the app, and we developed it in time to release it during the demo day. 
In terms of UX and UI, it was very challenging to work in such a short delay. It also allowed me to work on the design and to think about the next steps of development at the same time.
In order to avoid the usual problems of miscommunication and confusion during development, we were able to preconceive a coding model during the generation phase which would allow us to save precious time and resources.
And on a personal level, it enabled me to manage the design and to respect the overall user experience from idea to product.
Back to Top