Designing and Building a Web App in a weekend: Drunken Stumble
Drunken Stumble: Plan your pubcrawl: http://drunkenstumble.com

I had the opportunity to participate in the Boston Hack Day Challenge this weekend. The gist of the event was to get a bunch of designers, devs, geeks, etc in one place, form teams and see what they can make in less than 48 hours.

I met up with my friend @unruthless at the kick off event and we milled around until we met @bensheldon who is a drupal/php/backend guy. We were discussing our skills and what sorts of apps we could make. The subject of beer was mentioned and our ideas started *brewing*…

A little bit later the official team forming started (after a few beers and awkward attempts at socializing… hey we are geeks!!!) Thats when we happened to meet @mikemiles86 who’s name tag just happen to say ‘Will dev 4 beer’.

Mike was definitely a good fit for team Drunken Stumble!


Team ‘Drunken Stumble’

Brainstorming and getting off the ground

We’re all fans of pub crawling, which for those who don’t know, is a lovely way to spend an evening hopping from one bar to another, sampling adult beverages as we go.

So we decided to build an app to facilitate the planning of a pubcrawl by helping the user choose bars and navigating bar to bar.

With this topic in mind we sat down and got to work. Brainstorming was up first: names, functionality, target audiences etc. The iphones were whipped out and http://domai.nr was used to see if there were any cool domains for the ideas we had:

Pubcrawlr, Beer Beer Beer.me, Drunken Stumble, Drunkin Stumblin etc

The mobile web all is live and fully-functional at http://drunkenstumble.com.

After the idea and name was settled on we planned out all the steps we needed to take to get the app up and running:


Our timeline/todo list

After we had the plan we decided to head home – the next 36 hours were going to be intense.

Lets get down to biznass

Saturday morning we got to work. Ben and Mike started hammering out the back end stuff (see their blogs for a possible write up of the magic under the hood of this app) and Ruthie and I got to work on the front-end elements.

Branding & Research

So this app is about pub crawling, but i wanted to give it a touch of ‘beerness’ to the design. So one of the first I did was research beer related design. Good thing our team decided to help facilitate this research by bringing in several different types of fine lagers, stouts and ales for this reason. I did some tasting as well as inspecting of the design and labels.

Beer labels tend to feature badge type design with ribbons – so I decided to take this design approach with the logo and branding.

Sketching

See some of my sketches of the design process below. Keep in mind that this needed to happen lightening fast so I skimped a bit on this part of the design process:

An early sketch from friday night when we were toying with the name ‘Pub Crawlr’. Using a beer mug to replace the ‘U’ in Pub.

Badge type sketches featuring a a pint, ideas for integrating foot steps because you walk from bar to bar. Sketches also show possible integration of city name into the logo. Another consideration was the size and format of the logo. In order to show other important elements of the app on the homescreen (search location, get started button) The logo needed to be horizontal and not very tall. I kept this in mind when sketching.

Variation of the beer mug(s) in the center of the logo. The idea with this sketch was to show the social aspect of drinking/pubcrawls.

The winning/refined sketch showing all the important elements:

Beer, stumbling, ribbons that are reminiscent of beer labels, oh and the name, yeah thats in there as well! :)

Refining The Logo

From these sketches I moved on to work on the logo in illustrator.

Designing and Building a Web App in a weekend: Drunken Stumble
Work in progress version of the logo


Different pint glass, jagged tracks, shows ‘drunken’ progress


Idea for showing the progress of stumbling, blurry jagged letters


Possible background for the app? Trying to think of those tiny little UI details that will help brand the app.

Designing and Building a Web App in a weekend: Drunken Stumble
Final version of the logo

Typography

Early on in the design process Ruthie and I were discussing typographic possibilities for the app. We knew that mobile safari supported @font-face but we weren’t sure for android phones so we decided to go with the clean and simple Droid Sans. This is a system font for the Android OS so it was a safe bet for most smart phones. I also decided to set the type in the logo in this typeface for consistency.

I was also thinking that the combo of Droid Sans/Serif could be used to make the app a bit more refined and beer label like. However text at smaller sizes on phones looks like crap to me so we opted for larger sans text. Remember – we are designing an app for drunk people. How’s that for a target market? :)

Color

Another consideration for the design of the app is what environment it was going to be used in. Bars tend to be dark and bar crawls tend to happen at night (most times). Ruthie pointed this out and suggested we used a darker color scheme for our app so the light from the smart phone wouldn’t be so blinding. When designing we did some ‘field testing’ of the colors. Imagine two geeks drinking beer huddled under a desk with smart phones. Yeah… :)

Drunken Stumble Color Scheme

Icons

In order to keep things consistent (and deal with the time crunch) I decided to use the Glyphish icon set for use in our app. I modified some of the icons and gave them the ‘Drunken stumble’ touch.

Designing and Building a Web App in a weekend: Drunken Stumble

Wireframes and Layout


Wireframe/screen sketches

As I was working on finalizing the logo and working on icons Ruthie was working on the layout/wireframes/flow of the app. We wanted to keep things as simple as possible due to the fact that people will be drinking while using the app. We decided that buttons should be big, very visible and easy to tap to navigate.

Layouts for each page:

Designing and Building a Web App in a weekend: Drunken Stumble
Screen 1


Screen 2


screen 3


screen 4


screen 5


A close up of the interface

As we hammered out the details of each screen Ruthie went to town coding with the help of the HTML5 boilerplate https://github.com/shichuan/mobile-html5-boilerplate and coded the templates for the site. Since everyone in the group had a smart phone we all pitched in and tested on our devices while doing more market research… (translation drinking beer!)

market research
Market Research aka Breakfast


More ‘Market Research’

Getting Into the Guts of the App!

I can’t speak in much detail about all the other magic that went into the app. Ruthie rocked the front end html, css, media queries, and JS stuff while Ben and Mike rocked all the back end magic that involved Drupal, Simple Geo API, Google Maps & Directions API and some sprinkling of magic geek dust.


Testing on a Droid X

Mike has a blog post that explains some of the Drupal Magic behind Drunken Stumble over at his blog “Miles Per Hour’.


Hard at work!

Conclusion

Boston Hack has been one of the best weekends I’ve had so far this year. Taking a project from concept to working product with the help of an awesome team in 36 hours is intense, but really really freaking awesome and rewarding!

Video of the event

We Won!!!

Oh yeah… did I mention that we won? Drunken Stumble won ‘Best Mobile App’ as well as the ‘Audience Favorite’.

So that was my weekend in a gist. Want more? Check out the awesome photos @LaCapoise snapped of us throughout the weekend. and also check out the other groups and winners. Thanks to everyone for such an awesome weekend!

*I should note that I was not drunk the entire weekend, I just had a beer in my hand in every single photo that was taken. :) *