JOOG
A mobile jukebox application.
A mobile jukebox application.
User research
Content Strategy
UX Writing
UI Design
Branding
Usability Testing
User research
Wireframing
User testing
High Fidelity Prototype
Figma
Notion
Maze
Zoom
Google Surveys
Week 1: Discover
Week 2: Define
Week 3: Develop
Week 4: Discover
* This was a creative project I conducted and ideated through independently.
The Problem Statement
Older jukeboxes have slowly disappeared and have mostly been replaced by digital touch screen jukeboxes, but these modern replacements don't scratch the same itch. With so many endless options it can be paralyzing in terms of picking out a song selection. They also don't have the same nostalgic or tactile feel as their predecessors. With their size and aesthetic, they are limited to certain venues.
What if other businesses wanted to allow guests to pick out music and profit off it at the same time but didn't want to house the space or sacrifice the environment with a big bulky jukebox?
The Solution
Create the B2C side of a jukebox app that allows customers to easily pay to play the music of their choice at any place that uses Joog's service.
User Survey
To find out about our target audience and who they are, I launched a survey to gather qualitative data. I wanted to find out how different demographics answered questions pertaining to their relationship with jukeboxes. I was also very curious to see if many or any felt the same way I did.
What kind of jukebox do you enjoy the most?
*The majority of people found that flipping through the pages of a CD jukebox was desired more than the other styles of jukeboxes. Also, very few favored the most modern jukebox.
Other Key Insights
1. Almost no one had ever used a jukebox app. The few who had didn’t have almost anything good to say about it. The complaints were that the interface was confusing and the song selection was too large.
2. Ironically, people expressed a longing for the old, simplistic, and fairly limited jukebox but desired the feature of allowing them to connect a mobile jukebox to their Spotify.
3. People like the surprise of not knowing what’s going to play next over knowing, but would like to know how many songs are ahead of them.
Target Audience
The target audience was primarily 25-34 year olds living in a metropolitan area. In terms of gender and income brackets, demographics were very broad.
Competitive Analysis
I did a competitive analysis of three companies: TouchTunes, AMI Music, and Rockbot. These showed strengths and market trends to remix, as well as opportunities to strengthen the design of Joog over competitors.
User Interviews
I interviewed 3 participants to gain further insight into what desires and problems there are in people's relationships with the jukebox.
* Main findings from interviews were...
1. Enjoy connecting with who they're with as well as with the space.
2. Too many options can be too overwhelming and tiresome.
3. They don't like when it's restricted to "generic" music and appreciate variety.
4. They all like the limitations, some more than others, and enjoy seeing what music they can play in the context of a certain place.
5. None of the participants have ever used a digital jukebox which was surprising but fear they would be overwhelmed and wouldn't have the same appeal traditional jukeboxes do.
Personas
The user personas have pain points and goals that reflect those of our target audience. The main user persona "Dan" interacts with a product similar to Joog while Ava's experience is centered around an older style of jukebox.
Journey Mapping
The journey maps helped contextualize the personas’ pain points and shed light on where our product would solve the patron’s needs.
User Stories
I created and prioritized user stories based on the pain points in the journey maps to base the user flows off of to keep with in the project’s scope. The ones that ran parallel to the business requirements took highest priority.
User Flows
The user stories informed the user flows. Being able to map out how someone would flow through the app is key to informing what screen needs to be wireframed and helps contextualize the requirements to build the MVP.
* With the user flows sketched out, I began making a content strategy document to help create an inventory of pages and content. This way when I began sketching I had a clearer picture of what I need to be framing out.
Using a divergent sketching exercise called 'crazy 8's' I was able to explore different creative ways to develop some of the most important screens for the app.
Variations of the ‘home’ screen
Variations of the ‘profile’ screen
Paper Prototype
With the flows finished and some fleshed out ideas of the main screens, I made a quick paper prototype before beginning to play with any pixels
Accessibility
While designing the wireframes I kept the universal design principles in mind, making sure simple and intuitive use, as well as spacing, size, and contrast were adhered to properly.
Wireframes
Once I finished brainstorming I got some feedback from my peers on my sketches. From there I turned them into digital wireframes with accurate specifications and content to represent what will be shown in the live product.
Home Screen
Venue Screen
Search Screen
Profile Screen
Connect to Spotify Screen
Credit Purchase Screen
Brand Identity
Once the wireframes were complete, I shifted back to a more divergent way of thinking. I began searching for inspiration and creating mood boards before I began to dabble with different typefaces, colors, and other stylistic elements.
Mood Board
During this phase of the process I began to seek out visual inspiration for branding. Based on the user research it seemed fitting to look to 80's-90's retro aesthetics while also being modern, simple, and engaging.
Brand Name
At this point I hadn't come up with a name so I did some brainstorming exercises to see what I could come up with.
After mind mapping and list making exercises I still wasn't satisfied so I turned to Google to do some research to see if I could find any inspiration from the origins and history of the jukebox.
I found on Wikipedia that the word 'juke' was derived from an older creole language and was also referred to as 'joog' meaning rowdy. This seemed like a perfect fit.
Logo Development
I sketched tons of different logo ideas and got feedback from my network of designer peers before selecting one to further develop digitally.
Some rough hand sketches I sent out and got feedback on from peers.
I created vector versions of the top two designs. I was leaning towards the second version but once I began plugging it into the prototype I found that it was too bulky and created a sense of visual clutter.
Style Guide
Next I created a style guide. I chose Nunito for the font because it has rounded edges with heavier weights, giving it a fun and slightly retro vibe while maintaining a clean and minimal look with a lighter weight.
I wanted to utilize gradiention with the colors to pay homage to the old style of jukeboxes. I choose purple as the primary color to give the sense of power and mystery. It harnesses the intensity of red but keeps it subdued by the blue.
Prototype
Once I had my logo and style guide developed it was time to implement them to the prototype. I spent the next week developing and iterating until it was ready for testing.
Usability Tests
Once ready, I came up with a handful of tasks that needed to be tested and launched the tests via Maze. I was able to get 28 testers along with 3 in person tests.
Tasks
Take Aways
There are few ways to do go to "favorite" venues to browse their music but I was only testing the way from the "destinations" screen. 36% successfully got there the way I intended, while a large percentage tried to get there via their profile or by clicking at the top of the music selection page where the venue's name is.
I made the top left 'Venue' heading a clickable link back to the venue screen to meet that mental modal.
Some people realized they had scrolled in the wrong direction. Once they made it to the very end of the carousel they were frustrated they had to swipe all the way back. So I made the carousel loop back around.
Before
After
A couple people noted that there was no search bar feature on the venue page. They don't know how they would search if they chose not to share their location. To satisfy this mode searching I added a search bar feature.
Before
After
For accessibility I added a voice feature for searching.
Before
After
Overall the success rates were very high and 68% of participants expressed the ease of use throughout the entire platform of the app while the rest scored it 6/10 or above.
