Duo is a tool for identifying all genres of music.

Inspired by Spotify Rewind and an all too common love for music, this tool, created using React and Figma, informs the user of each genre’s characteristics, history, and music examples. The different genres are connected by “bubbles” that indicate related genres, and the family lineages that show that:

Music is a Human Story, a Duo with Our History

We're still in the early stages of our journey through cataloging our musical odyssey, but we're happy to show what we have so far.

Taylor:

Designer

What I learned

As a beginner designer, I learned that much of the process of UX/ UI design is similar to that of a puzzle. I planned and designed each component for the design systems. Using these components, I had to fit them onto the pages by first creating wireframes as my guideline. Moving forward, I will perform my first user-testing to ensure that the interface is user friendly. I’ve also learned how to better communicate my designs, as I had yet to collaborate with others until now.

How I built the project

I first developed a storyboard to create a problem that users identify with and how that problem is solved using our tool. Then, I planned several versions of wireframes as outlines for the lo-fi prototypes. After planning the wireframes, I designed the specific elements for the design systems, in preparation for the lo-fi/ hi-fi prototypes.

What inspired me

Spotify’s user-friendly interface inspired me to create friendly forms and shapes for the design systems.

Challenges I faced:

As it was my first time designing a web-based interface, I had to do a lot of research outside of Bloom to create a similar design process to that of a UX designer. I struggled/ imagine I will struggle with time, but I hope to create a meaningful experience for both my team and the users.

Jakob and Maxwell:

Developers

How we built it

We built the project in React using components like BigBubble and SmallBubble to show each part of the display. Curating materials and decisions regarding the React environments needed to execute our idea was an interesting experience!

Challenges we ran into

The main challenges were trying to find a way to process data and change the bubbles accordingly, as well as finding a way to change the audio file for each new bubble. In addition, deployment as well as other library quirks were an ongoing challenge in our debut project as budding web developers.

Accomplishments that we're proud of

We are proud that our project works as functioned with one path, gives some info, plays music, and deploys properly. Our next challenge will be trying to figure out a way to do the same process, but for multiple paths of genre lineage.

What we learned

We learned basic uses and functions of components in React, as well as how to use them with each other in order to display everything correctly.

What's next for us

Next, we have to figure out how to have a nice title page, expand the project to include more bubbles at once, and create a custom audio player that looks much nicer and can do more than just play and pause (ie. include a picture, loop, possibly display multiple songs, etc.). We have future plans much like what is displayed here.

Built With

• css
• figma
• html
• javascript
• react
• react-papaparse
• useref