Jeff Croft

Blog entry // 03.03.2010 // 11:46 AM // 11 Comments

Building BarStar

Over the past few months, I’ve spent a lot of my free time working on a personal project centered around a social activity I’ve become pretty passionate about: karaoke. Karaoke? Yes, karaoke. Why? Because it’s fun, dammit. I could write a whole separate post on why I love karaoke and what makes a great karaoke performance, but my boy Jon Culver already did, so just read that, instead. But I did think I’d take a few minutes to write about the process of building BarStar, and how it came to be.

Back when I was at Blue Flavor, Keith Robinson had this idea for a simple iPhone app. We were calling it “karaoke finder.” All it was really supposed to do was use your physical location to tell you where some karaoke is going down tonight near you. Simple, but very useful, especially for those of us who travel and want to find karaoke in a city we’re not familiar with. The idea kind of died as Blue Flavor fell apart last summer.

Separately, way back in May, my good friend and fellow KC-to-Seattle transplant Scott Phelps and I had the idea to somehow make a karaoke game. Both of us were (and are) very interested in real-world social games like Foursquare and Gowalla, and wondered if such an idea could work for a niche hobby, like karaoke.

For months we talked about the game while perched on barstools listening to bad singing, but didn’t really do much else. At some point, I remembered the “karaoke finder” idea and realized the two could be merged into a single concept that might be both useful for the casual karaoke’er just looking for a place to hang out, as well as the serious singer and social web geek. We always knew (and still know) that such an audience may be hard to find, but we ultimately felt like it was worth a shot — if it ended up that no one gave a shit and we just competed against each other, that’d be good enough. Scott decided it should be called “BarStar,” and we were off to the races.

Sometime late last year, I started building. It was slow going — I was just working in my spare time. But eventually, I had enough of a concept together to try actually playing the thing with my friends. We’ve got a pretty good-sized group of karaoke fanatics up here in Seattle, and we figured if they liked it, it was worth pursuing. Since then, Scott and I have built something I’m pretty proud of. To date, I’ve done most of the technical work, and Scott’s been a great “idea guy.” I’ve had a bit more free time than him, so this arrangement has worked out really well for us.

We loved the idea of building native apps for iPhone, Android, etc., but since we’re web developers, we decided to build a web version of the game (targeted at mobile WebKit) first, and if that takes off, we may build native versions, as well.

The karaoke finder

In order to do such a location-aware game, we were going to need a database of karaoke joints. At first I considered using data from an existing source (Yelp, Gowalla, Foursquare, etc.), but quickly realized if I really wanted to have a killer database of karaoke venues, I needed karaoke specific metadata that none of these have. For example: what nights does this place have karaoke? When does it start? Who is the KJ (karaoke slang for “host”)? Also, I wanted people to be able to comment on/review venues, and I wanted those reviews to be karaoke-oriented. For example, I hoped people would comment on the KJ, on their song selection, on the stage and sound setup, and so forth, more than on their happy hour specials and how strong their drinks are.

So, I decided we needed our own database. We wanted it to be as accurate as possible, and I ultimately decided the way to do that was to give users free reign over it. So, anyone can add a venue and anyone can edit venues that already exist. So far, it’s worked nicely.

With a little UI work on top of that, we quickly had our “karaoke finder” bit done, and it’s now super easy to find out where there is karaoke going on around you.

The Game

If you’re familiar with Foursquare, you’re familiar with a lot of the gameplay constructs in BarStar. Basically, it works like this:

1. Users “check in” at a karaoke venue.
2. Once checked in, they log their performances, noting what song they sang.
3. Other users can then rate and comment on their performances.

From there, we have both achievements and competition with other users:

1. Users earn various “awards” for their performances. For example, if you perform five times in one night, you earn the “Sore Throat” award. If you perform in ten different cities, you get the “On Tour” award. And so on.
2. Using a top-secret, industrial strength algorithm, we give each user an overall score. The algorithm factors in everything from variety of songs, to size of your audience, to how high your ratings are, and much more. Then, we compare users in a leaderboard we call the “Top 40.” You can also try to be the top performer for the past 30 days at your favorite venue (we call this “BarStardom”) or of your favorite artist’s songs (“RockStardom”) — these are sort of our take on Foursquare’s “mayor” concept.

Around the time we really started working on this, something was happening on Foursquare that was bugging the hell out of us: people were cheating. That is, people were “checking in” at places without really being there, in an attempt to become the “mayor.” This is still a rampant problem on Foursquare, and frankly, I think it’s something they’ve got to fix if they want businesses to take them seriously as a marketing tool. We really wanted to ensure our app was built in a way that didn’t make it so easy to cheat, so we came up with a couple core principles of our gameplay:

1. “Checking in” would never net you any kind of credit. In BarStar, you get credit in the game for doing something — like making a fool of yourself in front of a lot of people. Just being there isn’t enough.
2. Karaoke performances would have to be verified in order to count for any credit in the game. We went round-and-round about different ways to verify that someone actually performed in public, and we ultimately decided on a simple one: let other users act as “witnesses.” So, in order for a performance in BarStar to be meaningful, at least one other user must say, “yes, I saw it.” If a tree falls in the woods and no one is around to hear it…

Of course, this doesn’t entirely prevent cheating. There’s no way to entirely prevent cheating. But, we think it does a pretty good job of discouraging it.

So, there’s no question the gameplay is inspired heavily by Foursquare, but we feel like we’ve put our own twist on it in several key ways, and we’ve got some more planned, as well.

On building for mobile

This is the first mobile app I’ve really built. I’ve done a few small sites here and there, but nothing as complex as a game. It’s been a fun challenge. I started building with my usual process, which made everything very page/document-based. It worked fine, but all the page refreshes were starting to feel really slow when using it on a mobile device as intended. In an effort to reduce the number of pages, I started loading up the five core pages with more and more information. This worked fine from a UI perspective, but actually backfired on me: eventually, those five pages became heavy enough that the experience felt slower than having the page refreshes I was trying so hard to avoid. So, I back-tracked and re-architected a lot of things to be more dynamic, loading only what is needed via Ajax. This ultimately has worked out pretty well. There’s an interesting balance to be reached, here, for sure.

I’ve really enjoyed building and designing for mobile, and I hope to do a lot more of it.

What’s next?

Today, BarStar is still labeled as “in beta,” but it’s open to the public for registration, and we’re getting lots of new users every day. We’ll be removing that beta label soon, and then we’ll get to work on the rest of our plans, some of which include:

1. A Desktop Site: We want to build a companion site for viewing on computers, along the lines of what Gowalla has done. The game is meant to be played on mobile devices, but it’d be nice to be able to manage your account on the desktop, as well.
2. Features for KJs: We feel like KJs are one of our core audiences, and we have some ideas on how we can help them promote their shows and use BarStar to their advantage. We haven’t really implemented any of this yet, focusing first on the singers — but we will.
3. Monetization: We’ve got some good ideas on how we might be able to monetize this thing that we’ll be exploring down the road, if it looks like it’s going to take off.

Find us at SXSW!

Both me and Scott will be at SXSW interactive, along with a few other members of our Seattle karaoke crew that has been testing BarStar since the very early days. And SXSW is all about the karaoke this year. There are no less than three major parties featuring karaoke, including the epic Cog’aoke Contest and the TechKaraoke party BarStar is helping to sponsor — and the {RV}IP Lounge is supposed to be making another appearance for ongoing karaoke fun, as well. We’ll have a small handful of shirts to give away, probably to those who wow us with their performances, and we’ll have a large batch of buttons. I looked into getting branded condoms to pass out, but couldn’t get them done in time — so you all are on your own when it comes to playing safe.

Please do check out BarStar and follow us on Twitter if you’re interested karaoke at all, and if you’re not, pass it on to your friends who are! And if you love it, do us a favor and review it on Facebook!

Tags for this entry

• webdesign 1068 (100%)
• jeffcroft 1048 (98%)
• webprogramming 531 (50%)
• karaoke 168 (16%)
• mobile 143 (13%)
• personal 109 (10%)
• scottphelps 62 (6%)
• game 20 (2%)
• barstar 2 (0%)

Links in this entry

• Jon Culver already did
• BarStar
• Keith Robinson
• Scott Phelps
• Cog'aoke Contest
• TechKaraoke party
• BarStar
• follow us on Twitter
• review it on Facebook