Hot Tweeters is my latest web app. It can be best described as Hot or Not for Twitter. You go to the site and are presented with a grid of 18 Twitter profile pics. You click on up to 3 profiles that you think look ‘hot’ whatever ‘hot’ means to you and click on the vote button. Then you are presented with another 18, and that’s pretty much it. There are other features like viewing a larger image using a popup lightbox effect, voting on the profile page, a Hot 100 charts, a quick follow button for easy
stalking following, but other than that, there’s not much to it.
The project took me a bit less than 45 days from conception to launch and I thought I’d share the story.
A little background info
I work full time as a Lead Interactive Developer at Roundarch, a consultancy specializing in Rich Internet Applications. At the time that I created Hot Tweeters I was also being slammed at work, doing 10 hour days and taking work home on the weekends. Throw in several speaking engagements, blogging for the company and my own blog, trying to fit in my wushu training and you have someone who’s trying to bite off more than he can chew.
However with the help of another developer, my community manager/social media guy, my wife, and several of my coworkers who served as private beta testers, I was able to launch this site for very little money and a little bit of good old fashioned elbow grease.
The reason for doing this project, among others, is because I am inspired by those who’ve created very successful websites for very low cost and very little effort. These include James Hong and Jim Young who created Hot or Not and the now famous Markus Frind of Plenty of Fish. The fact the Hot Tweeters is a site along those lines is purely coincidental though as I didn’t have them in mind when I came up with the idea.
I see these guys as sort of the commandos of the web. They were able to accomplish with very little what many ‘real’ companies can only hope to attain. And they did this with very little in terms of cash and human capital relative to others.
If you look at the About section of the site, it says a bunch of dudes came up with this idea on a Friday night over some beers as a way to find hot chicks on Twitter. In actuality, it was one Asian nerd geek who thought it up on his train ride home. I figured the former made for a better story. The idea just hit me and I started sketching it down right away.
I came up with 4 versions of what was to be the “main game”. I had just come back from SXSW and Leah Buley’s talk on “Being a UX Team of One” was fresh in my mind. One of the thing she advocates is this forced creativity where you just come up with different designs just for the sake of it instead of just focusing on one. This way, the “better” version would just be apparent.
I settled on Design 4 for several reasons.
- Twitter profile images are small, putting only a few on the page is just wasting a lot of real estate. I wanted to be able to scan through lots of people really quickly.
- With Design 1, I might run into a bunch of non photo profile pics and that would quickly ruin my experience as a user.
- Design 2 just seemed like a lot of mental load having to rate each person from 1 to 10.
- Design 3 just didn’t seem to have a strong intuitiveness to me.
I made a conscious choice not to have a 1-10 rating on Hot Tweeters for a couple reasons. First of all I wanted an upbeat site. I didn’t want someone to feel bad because they were rated ugly. This is because unlike Hot or Not where people upload pictures of themselves, Hot Tweeters allows you to vote for anyone on Twitter. If you thought somebody with a Twitter account was ‘hot’, then you can just vote for them. That’s a big difference between Hot Tweeters and something like Hot or Not. In Hot or Not, if you upload your picture and put yourself out there and if you get a low score that’s on you. However at Hot Tweeters a person could find themselves on there because somebody voted for them without them knowing. Thus I didn’t want somebody to come to the site one day and see they had a 1 out of 10 and feel bad.
The Visual Design
I knew from the beginning that I wanted the site to feel fun and light hearted. I knew that a site such as this could easily turn sleazy but if the site design reflected a fun attitude, perhaps it would be taken that way – just as a fun little site.
Originally I had the idea of doing a logo made up of a girly girl pink bird and a puffed up blue guy bird with their backs towards each other with their eyes looking towards each other. I quickly realized that it was going to take too long to create and settled on a much more simplified logo of a cute round looking bird. The male and female versions are just color swaps of each other in the vein of Sub Zero and Scorpion from days of old. If you look carefully at the bird, you will see that it’s just made of up of really simple shapes. I budgeted around 3 hours for the logo and probably spent around that much. The font was a publicly available font that was reminiscent of the Twitter font. The flame was introduced to convey the idea of hotness.
This was very much a guerrilla effort. The development team consisted of Joe and I working part time. I would release the most basic functionality with just a few bells and whistles and see how people would bite and see if it was worth putting more effort into it before building out something that nobody cared about. With such limited resources, I distilled the website down to the essence of the site, but I wouldn’t compromise on the user experience. Whatever I made, the mandate would be the same – make it a delightful experience to use and the users will come back.
I divided the development work between my developer Joe and I. I would do all the visual design, HTML, CSS, and some of the AJAX so Joe could focus on the back end. The reason I decided to have somebody help code on this project was so that I could get things done that much faster. Had Joe not helped me, it would have probably taken me 2 or 3 times much longer to launch because of my current workload. I ended up doing some of the backend+frontend work once all my UI work was done.
In about 3 weeks we had something up and running and I was soon playing with it. I think I’ll end here for this post. In the next post I’ll cover the remaining weeks.
Popularity: 2% [?]