1kdaysontwitter.com - #FridayProject

Posted on | June 18, 2009

Last Friday we had our first #FridayProject day and I wanted to share with you the process of creating a small web application.

Shower idea

While having my morning shower I was thinking about Twitter and its API (yeah I know…) and how to make a small but funny application that would provide some fun and challenges for my teammates but would be useful and funny for its users. I was thinking about when twitter launched - my memory suggested that this was near 3 years ago, so right about 1k days. Secondly I remembered using When did you join Twitter? a while ago and found it quite funny (for the record: I joined Twitter on 10 August 2007).

Coffee and IM

The team usually gathers at Marand from 8AM till 9AM, so I used that time to prepare a preliminary wireframe design on a sheet of paper I can’t seem to find anymore (will post a pic if I do). Meanwhile I was looking at the Twitter API in order to find out what kind of data can be retrieved for each user and @ghaefb knew the answer in a bit (xml for @tomazstolfa).

The next step was to create a basic design and decide which data we are going to use for our mini app.

Concept, design and implementation

Overall design (Logo, Main Container, Footer)

The main goal was to mimic Twitter’s interface, but with some small changes in order to optimize the user experience. Of course the first thing to create was the logo - extending the Twitter text is not a hard task. Use the Pico font, add a stroke of a couple of pixels and you have a perfect clone of the Twitter logo typeface.

After having an idea of how to create the logo we switched to the main container and footer, and tried to replicate the Twitter look & feel - again, no science here.

Landing Page

We wanted to have a clear landing page, that would be very very intuitive. I know. It is just one text box and some text, but you can mess it up nevertheless. That is why we opted for large fonts and a two color scheme - one for the text and the other, brighter for the text box.

In addition to that a good copy was needed. We went through some iterations and the current question sounded the most “intellectual” :)

Results page

A quick glance at the available data suggested that we could replicate the look & feel each user has on twitter. However this is a bit harder than it might look. If you check the XML carefully you will notice that you can not determine if a user decided to hide his background image. Twitter should fix this asap. This means that you need to use a nasty trick to check if the background image should be visible or not. We head to the user’s twitter page and parse the html to find out if we should show it or not.

Secondly we decided to show the avatar and username similarly to the way it is done on the original user page. Font colors are also personalized according to the data we get from the API.

The main part of the result page are the big YES and NO messages that are accentuated in order to have a comic effect. We tried a couple of different fonts and color combinations for the YES/NO results, but at the end we opted for Helvetica as it appears nice even at that size.

Well since the service is all about finding out if the user reached the 1k days on Twitter mark, we decided to provide some additional information - the number of days to go and the exact date when the milestone will be hit.

At the bottom we added a small button that allows you to tweet your result and let all your followers know if you passed 1k days on twitter or not. This is done easily - you just point the link behind the button to “http://twitter.com/home?status=write+what+you+want“. If the user is already logged into Twitter her status box will be filled automagically.

404

The Fail Whale is one of the Twitter synonyms and we decided to make a spoof about it by creating a fail octopus. The first iteration sucked, so @doen provided the second (beautiful) one.

The Domain

The domain name was not a difficult choice, but I know we might have made a mistake by choosing such a long domain name. At least it is straight to the point and it differentiates quite substantially from other servicess like this. We bought the domain in at Domenca but we had to wait till Monday to get our payment processed.

Quick marketing

Of course we tried to let the world know about our little app as soon as possible. We pushed the word  via Twitter, StumbleUpon and Digg, however we did not expect a huge amount of traffic. In any case, we recieved some good traffic and we were surprised by the amount of traffic StumbleUpon sent our way.

End notes

All in all I must say we had some great fun creating this small application and we learned some new tricks, but most importantly went through the whole process from the idea, implementation and launch really quickly. The great job was mostly done by @ghaefb, but almost all the team members contributed in one way or another. I must say I am already looking forward to our next #FridayProject.

Comments

Search