Kobayashi Design

Not being able to listen to the music we love while sharing a moment with our friends in a bar.

Goals

Because the four members of the team love listening to music and sharing moments with friends in bars, we thought about how frustrated we can get when we cannot listen to our favorite music during these moments. Then we thought of our grandparents and especially their legendary jukeboxes. JuxBar is a modern take on the jukebox, giving people in a bar the ability to select and play the music they want from a selection curated by the bar owner.

Team

• Mahdi Lamriben - https://www.linkedin.com/in/mahdi-lamriben-716317179/
• Pierre-Antoine Roger - https://www.linkedin.com/in/pierre-antoine-roger-roussel-19665b119/
• Florian Dublanc - https://www.linkedin.com/in/florian-dublanc/
• Kobayashi Design - https://www.linkedin.com/in/simon-letellier/

Tools

• Whimsical
• Adobe XD
• Adobe Illustrator
• Adobe Photoshop

Duration

3 weeks

. Ideation

• Persona

• User Stories
• User story I
As a customer, I want to be able to get information about the music playing at the bar I'm at so I can quickly discover and record a new song I like.

• User story II

As a customer, I want to define a playlist of songs that will be played in the bar where I am, so that I can listen to the music that I like and that I have chosen.

. Generation

• User flows

• Wireframes

• User Interface

.Geolocation

Find a JuxBar session based on the musical theme of the bar or its geolocation.

.Bar informations

Having information about the bar and about the JuxBar session (musical theme, address...). Have 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 information about the music playing in the bar, like the song, and information about the upcoming playlists set by other users in the bar, like the upcoming songs to play and finally, set their own playlist by clicking the DJ button at the bottom.

.Playlist

The user can select a maximum of five songs from the selection made by the bar owner.

.Profile

The user can find all their top bars they went to, all the songs already selected in already defined playlists, their ranking as a JuxBar user and the number of Juxbar sessions in which they participated.

. Coding

The main difficulty of this step was to set up an API to be able to play a music library from a streaming music application. For technical reasons, we focused on Deezer (a French application

Coding languages :
• Ruby on rails
• HTML5
• CSS3
• Javascript
• Bootstrap

IV. Conclusion

As mentioned at the beginning of the case study, the duration of the project was only three weeks. During this time, we defined the user experience, the design of the application and we developed it in time for the demo day. In terms of UX and user interface, it was very difficult to work in such a short time. It also allowed me to work on the design and think about the next development steps at the same time. To avoid the usual issues of bad communication and confusion during the coding step, we were able to recommend a coding template during the generation step that would allow us to save time. And on a personal level, it allowed me to manage the design and respect the overall user experience from idea to product.