Cowbell. A Tinder for Musicians. A UX Design Case Study
Because you always need more
SUMMARY — Dating apps have been one of the biggest inventions in the 21st century. There I said it. It revolutionized how we find love and hookups. Usually from the comforts of our couch. Naturally, swiping can be extended to a lot of other areas in life. For the Codaisseur Design Academy, I teamed up with 2 programmers to hammer out a MVP within a week. We thought it would be fun to have a musician’s/band’s tinder, which we dubbed Cowbell. In this short Design Case Study, I’ll tell you how about how I landed on the above design.
All good ideas are born out of frustration
A few months ago, a friend and I started a band (the style is Afrobeat, you should check it out. It’s amazing). We quickly got some players, but we needed at least 6 more people. Yeah, Afrobeat bands are big. Having to keep putting up notices, talking to people through Facebook, asking them for some samples of their skills, became a chore.
Because we had only 5 days to crank out a working MVP, the programmers needed my wireframes as quickly as possible. I decided that my frustrations both with finding bandmembers and being on Tinder, would serve as excellent user research and we formulated 36 different job stories on the first afternoon. We needed to scope badly due to the time constraints so we picked about 10 of those for our MVP. Which roughly came down to:
As a musician, when I am trying to match my band/myself to another band/musician, I want to filter for age, location, sex, genre, instrument and see a photo, profile description and media showcasing skills, so I can know whether it will be a good match
and
As a user, when I and another user match, I want to be notified and see how I can contact the person, so I can start making great music!
So we didn’t focus on a sign-up process, a messaging service or anything else. Just on the swiping through profile cards and filtering results, and being able to get in touch.
The many iterations of the profile card
The MVP User Flow
Making it pop. But not overwhelm
The next challenge was to combine the look and feel of digital music apps with that of dating apps.
As you can see, most dating apps let the picture take up 80% of the screen. The background is white, so it never clashes with the colors of the pictures users upload themselves. But I wanted to have a memorable UI. One that was reminiscent of the neon colors of the music apps and had a musical feel to it.
A Peruvian edge case
I decided to use a picture of a Peruvian Cocoa farmer, as an edge case. Not because he was unattractive. He could be a very successful local musician for all I know. But because his picture has bright red, blue and green colors. If I made it work, it would work for all pictures people would put up.
Kill your darlings
I was really in love with the icons. They were so musical and appropriate! But a couple of rounds of user testing showed me that I should just settle for more clarity. The colors I tried, and finally settled on, were based on my goal of making it feel fresh and applicable to as many styles of music as possible. Asking user’s to fill in their musical preferences during A/B testing would see whether I am right. I would also test if a more white background was preferred over the green. Alas, no time.
Final result
