Building a web app in 12 hours..

Case study of thought process behind building the-hive-mind.com

The Hive What?? Visit The Hive Mind, then read on..

Recently, I've come to the conclusion that I'd rather not spend the rest of my life being a remote control for clients who want websites. I would rather spend that time at the beach! So I'm trying my hand at building websites for myself: The Hive Mind launched this week.

So, where has the realisation that I don't want to build other people's web sites lead me? To building my own. Ground breaking, I know!

What I wanted to do is a) bring something back to the online web and design communities (that keep me from going insane on a daily basis) and hopefully b) take a step towards an income that cuts the client out of the picture.

Now, I know you're all waiting with baited breath to find out what stupid, hair-brained scheme I've come up with. Sadly, it's not the next facebook.. it's far more modest..

The Hive Mind is the community I want to give something back to. It's a small online poll website that will ask 3 pertinent, interesting, intensely enticing questions every week. But more importantly, it allows a completely anonymous ballot to gauge the overall community opinion on the topic at hand. The questions must be phrased as binary YES/NO questions and are user-submitted and hand selected for weekly publication. Each week the results will be available in an RSS feed, along with the next weeks questions.

What follows is a case study of how I went about developing the site inside 7 days. Note: this is not a code tutorial, you won't learn to program, splice or design. I'm trying deliberately to keep the concepts abstract, it's more about the thought process that went into the project than the code I wrote to get me there. If you can't build a web application, this is by no means a tutorial to help you learn how - it's meant to mould your thinking so that you can keep your direction and focus during the development.

So, without further ado..

Phase 1: Conceptualisation.

While I'm claiming that it's possible to build a web application in a week, I would argue that unless you get hit in the forehead by an idea that just seems perfect, it's unlikely that the conceptualisation phase will be included in that 1 week turnaround.

In this case, The Hive Mind was an idea that I was so excited by, I actually did design, spec and implement it inside a week. But that's not something that happens (to me anyway) very often. That aside, let's discuss very briefly the conceptualisation stage.

Firstly: use your friends. Once you have sorted the idea out in your head, write down, in simple, dumbed down, layman's terms, exactly what you are intending to do. Share this concept with a few friends (preferable ones that can't steal your idea and build it before you ;) )... and take careful notes of their feedback. Ask them to criticise your idea, and then defend it.. if you can't defend it.. reconsider it.

Also bounce these ideas off people in real situations, there is a HUGE value to asking someone "Would you use a web site that did..."

Once you've conceptualised the idea, and gathered any suggestions... we move on to phase 2.

Phase 2: Speccing the project.

At this point, make a final decision on technologies you are planning to use. For the-hive-mind, I opted for building the site in django and utilising prototype and scriptaculous for dynamic effects (the fades etc that you see on the site, and the ajax functionality to vote and fetch graphs - I could write a whole article on the implementation of the ajax voting system [but I wont unless people are seriously interested ;) ])

Once you have the technologies down on paper. Start drawing wireframes. You can do this the old fashioned way, on paper OR you can do this in photoshop. I actually completed this step at the same time as creating a look and feel in Photoshop (again, with this project everything just seemed to fall into place) - however this may reflect on the simplicity of the-hive-mind interface more than my capacity to spec an interface.

Once you have a clear spec of how your new whizz bang web site will work you need to model the data and information.

In the case of The Hive Mind, I have Questions and Votes - so the database modelling was a no-brainer. A Question can have multiple votes.. Votes each relate to one question.. that's pretty much it. Note: in the underlying spec phase I also specced the archive and comment system, which included a third database object for Comments - however this has been left out of the initial release (in order to gauge response prior to expending more than my stated 1 week development.. look forward to a follow up case study exploring the process of adding these features).

So, once the data is modelled (again I did this directly using django and it's admin system, however in more complex cases I would opt for either one of the Omni* products OR a good old pencil and paper..) we move on to coming up with the look and feel - the design (the visual part.. the fun part, one might say)..

Phase 3: Interface / Look and Feel Design.

This is arguably the most overlooked phase of web app development. People seem to just opt for a few rounded corners, bright colours and then roll with it (that's why 37signals skip photoshop.. right?). I'm not keen on this approach, I think an interface design needs some serious mocking up graphically... there's very little that can't be implemented, so why worry at the design stage about how hard it is? Make it look right.. then worry about how you're going to implement it.

Be careful not to get carried away with the idea of launching your web app (also be careful not to be fixated with the idea of beating my 1 week turn around time :D).. it's more important to get these things right than it is to get them done quickly.

If you are solely a developer (ie: you feel less than confident in your ability to create a cracking design for your interface) - I suggest you find someone who is a) willing to collaborate or b) willing to charge you reasonably for the design of the interface.

Assuming that you've either finished designing up your interface, or finished the feedback process with your designer, you can move on to the implementation.

Phase 4: Implementation.

I've written in the past about django and how I'm completely converted to developing using it (I imagine I sound almost as much like a broken record as a RoR developer) - but django really is the KEY to my having completed this project so quickly.

Having a design mock, database spec and a clear head. We move on to implementing the application. Again, here I must point out, that in my DB spec phase I implemented my models directly into Python / django, leaving me with a fully functioning admin interface for manipulating my database.

The only thing remaining was to actually fit my visual design to the database models and create the public interface views.. of which i have a grand total of 3 (plus three json based ajax response views).. so as you can imagine, it wasn't a huge job to write these views.

Step 1

Splice the design into happy, healthy XHTML and CSS (but don't put a badge on your web app ;) ). Once spliced I moved the XHTML into template files for django and started compiling my views (django uses a MVT model, which is very similar to the well known MVC concept... both of which are the subject of countless blog posts elsewhere - google is your friend!).

Having already specced everything, we really haven't left ourselves any work at this stage, we are just moving our spec (which you might see as extrememly high level pseudo-code into actual code - a process any programmer/ developer should be more than comfortable completing).

Step 2

Implement the interactivity and pages. For the-hive-mind, this was a matter of programming the necessary django database interactions to present my 3 weekly questions. And secondly, implementing the necessary Prototype/Scriptaculous javascript to make the page as easy to use as possible (this was something i identified early on as imperative to the concept of The Hive Mind: 3 clicks is all it takes to participate).

Phase 4: Test Test Test!

Get the same friends you bounced ideas off to test the project. Make sure everything is sorted, you don't want to launch this brilliant idea, only to have people NOT use it because there are small bugs.

I recommend NOT putting that standard Web2.0 "BETA" tag on your application logo, it's unnecessary.. you should really be trying to have a tried and tested product ready for initial launch. By all means call it a beta, but don't make it part of your brand, just communicate it in writing.

Phase 5: Launch and market

It's early days - The Hive Mind launched this week, but if people are interested I will post another article detailling what steps I take and how it works out..