Spotbox
This is a project I worked on as a Product Designer for the Georgia Tech WebDev club
Timeline:
February 2023 - April 2023
Role:
I was one Product Designer of 3. We worked alongside two Product Managers as well as 10+ Developers.
Jukeboxes used to be a popular source to play music
Back when our parents were kids, almost every soda shop, bar, diner, pizza parlor, and truck stop had a jukebox. These allowed customers to pay to have their favorite song played.
This pay-to-play model allowed businesses to generate money outside of their main services. Jukeboxes came with a major downside: they needed to be constantly updated with (costly) new music. Ultimately, during our lifetime, they've gone virtually extinct.
Now, when someone is alone and wants to hear a song played, they stream it. At clubs and weddings, when someone wants to hear a song, they ask the DJ. But there’s still a market that never really figured out the best way to replace a jukebox: bars.
How can we create a modern-day jukebox for bars?
Most bars have their own independent music solution. Some have tried to purchase modernized physical jukeboxes. This solution is awful. Again, these machines have limited music catalogs, require a dedicated connection to speakers and wifi, are expensive to install & repair and require users to download an app and enter their credit card information. How can we create an efficient and modern jukebox for bars?
Introducing Spotbox: A mobile-optimized website that allows people to decide what song should play next
Spotbox is a modern, professional, and accessible web interface that attracts small business owners and is easy to use for event and space managers of all forms: bartenders, baristas, hosts, etc. The bartender opens the website, starts a Jukebox session with a pin, closes their phone, writes the pin on the bartop counter, and gets to work.
A user enters the bar, opens the website, enters the pin, and immediately sees the search bar. They type the title of the song they want to hear and add it to the queue. Eventually, their song will get played, creating extra revenue for the bar and a positive experience for the user.
Create an Account
Create a virtual jukebox
Edit jukebox details
Enter the pin of the jukebox
Join the queue and upvote songs you want to hear sooner
Search for a song to add to the queue
Pay to add a song to the queue
Edit account details
How can I design a modern-day solution for something I have never used?
The answer: User Research. This project was completely outside my comfort zone and for this project, I relied heavily on user research to inform my design decisions. We interviewed 6 participants and collected over 80 survey responses from users with ages ranging from 18-46 years old.
A copy of the form I used to collect data.
Making sense of the data
Once we received all of our responses, we decided that the best way to sort through so much data would be an affinity map on Figjam. We grouped similar sticky notes together and came up with features that would address the pain points related to each group.
A copy of the affinity map used to analyze data.
Based on the affinity map, we derived a few key features to be included in the platform
Feature 1: A search bar that is easy to identify and use.
Feature 2: Modern designs that lean into the Jukebox Aesthetic
Feature 3: An automated process where once the user pays, the song is added to the queue and that song is played on the speakers when it gets dequeued
Once we knew what features to add, we created user flows to define the structure of the site
We created initial flows for the first few features we wanted to implement in our short amount of time.
Before jumping into wireframes, we chose fonts and colors so that we could put together a design system
We went with a warm, inviting, modern font and color choice that still had a hint of retro as an ode to the old Jukebox style.
We also made sure to have good color contrast when choosing the colors for the primary and secondary CTAs.
After the colors and features were finalized, I made quick sketches of how the site would look
Since there were so many pages and features to add, rough sketches helped me figure out what not to add and what was important. It was important to sketch out what the desktop and mobile versions would look like since most users would be using the website on their phones. Here are the sketches I created.
I then turned those sketches into into Mid-Fi Wireframes and tested those with users
I made sure to use our design system buttons while wireframing. Some of the feedback I received was to extend the buttons to the width of the screen and to add more functionality to the accounts page.
I implemented feedback from the previous wireframes and created the final designs
There's always work to be done
This is where my time with Spotbox has ended. If I had more time, I would keep iterating and adding more features to expand the site.
Lots of Lessons Learned
Reflecting back on my time with the WebDev club, I learned a lot! Here are a few of my takeaways:
It is important to be able to articulate your design decisions to Product Managers
Define design systems early and use them throughout your work so you don't have to go back and change buttons later
Talk to other designers about your work when you can! It is best to get critiques and improve your work as you go along.
A big thank you to the GT WebDev club for allowing me to be a designer on their project. I had a lot of fun!
If you haven't already, check out this case study next!
General Motors UX Research Internship: Exploratory research to discover value-adding insights for General Motor's processes
