I’d shown up without any ideas for what I wanted to build, and as I made polite conversation with the other attendees, I wondered what I’d gotten myself into.

The team forms

My friend Niki Brown - an amazingly talented designer - and I immediately found each other in the crowd. A friendly back-end developer named Ben Sheldon struck up a conversation with us, and we three quickly realized we shared a common interest: beer. It was only natural that we decided to build an app around the idea of adult beverages. We knew that in order to accomplish everything we wanted by the end of the weekend, we would need another back-end developer. I pitched the idea of a pub crawl app to the crowd, and less than a minute later Mike “Will Dev 4 Beer” Miles walked up to us. We had our team.

The four of us brainstormed what we wanted the app to do and what we should call it. First, we roughly sketched the main four screens for the app on a giant sticky note to make sure we were all on the same page - happily, we were! Next we turned to domai.nr. We found that DrunkenStumble.com was available, so we went for it - registered the domain, reserved the Twitter handle, and set up web hosting, Google Analytics, and email for the domain. We left for home around 10:30pm, buzzing with possibilities for the next day.

Market research

At 9am Saturday morning, we all reconvened and mapped out our tasks for the day. First, we had to make a decision about infrastructure. Mike and Ben were both very familiar with Drupal, so after they assured me that it wouldn’t mangle my markup too badly, we decided to use it as a framework for DrunkenStumble. If we’d had more time to build the app, I would have pushed harder to use a standalone MVC framework like CodeIgniter, but Drupal was the correct choice given our time constraints.

Framework decision made, we took our rough screen sketches from Friday night and spent some time redrawing them - this let us all see what the app was going to look like and do before a single line of code had been written.

Once we were all happy with the overall flow of the application, we split up. Mike and Ben dove into Drupal and various APIs, figuring out how we were going to get data into and out of the system. Niki began sketching and refining DrunkenStumble’s brand, logo and supporting iconography, while I generated high-fidelity mockups of each screen, researched typographic options, and began thinking about mobile stylesheets. We checked in with each other occasionally to ask questions: “What do you all think of this brown? Will this text be readable at night, in a dark bar? Are we cool with web fonts? Does this beer mug icon need more bubbles?”

We also conducted very extensive “market research,” which we took extremely seriously. Each of us had brought in several of our favorite beers to share with the team, and anyone else who wandered by. Turns out beer is a great way to make friends. Who knew?

Mobile markup

By early afternoon, Niki had finalized versions of the logo and the color scheme, which was enough for me to begin writing template code. We moved between Illustrator, Fireworks, and Coda for the rest of the day, passing high-fidelity mockups back and forth. I grabbed the mobile HTML5 Boilerplate as a starting point, generated the web font package we needed, established a grid system, and tweaked the stylesheet to meet our app’s needs. Once the page layout was in place, I added the markup each screen needed, and then wrote CSS to cover the new markup. This turned out to be a remarkably efficient way to work, though it did mean that we were making design decisions all the way through the process rather than all at the beginning.

Meanwhile, Mike and Ben had been plugging away at database tables and three different APIs. As we finished each template, we passed it over to Ben, who incorporated the markup into Drupal. We worked together to identify places where the markup I’d written didn’t play nicely with Drupal’s Forms API, and I ended up restructuring some of the front end code to work around the Forms API limitations.

A sprint to the finish

Eyelids drooping and caffeine wearing off, I finished coding the final screen’s markup and styles a bit after 3am. Niki, Ben, and I split a cab back home to catch a few hours of shut-eye, while Mike decided to stay and power through the night. We were back and starting to work through bugs around 9 in the morning, and by noon the app was feature-complete with no critical bugs. We spent another hour tidying up various corners of the application, and then Mike and Ben went to save us seats while I wrote our three-minute pitch and Niki practiced running through the app. We had just enough time to rehearse twice before the organizers called Keyboards Down.

We pitch, we score

I’d somewhat naturally fallen into the role of spokesperson for the team, so I knew that I’d be the one doing the talking Sunday afternoon. Fortunately, I was too exhausted to be nervous by the time it was our turn to present. Niki ‘drove’ the application as I did my best to remember public speaking advice - talk slowly, articulate each word, pause often, make eye contact with the crowd. I guess we did all right, since not only did we win Best Mobile App, but also Audience Favorite! A most gratifying end to a hard weekend’s worth of work.

There is no I in Team

Niki flat-out rocked the visual design for DrunkenStumble, and did an incredible job incorporating my poorly-phrased feedback into the final look. Mike was a Drupal machine, architecting the entire app as a Drupal module and squashing bugs left and right. Ben was the API Whisperer, and it’s thanks to him that DrunkenStumble has awesome walking directions and custom-drawn maps to get you to the next bar or show you all the bars you’ve visited for the night. He also wrote the Javascript that powers the geolocation. I wrote all the markup and styles, checked the app in every mobile browser we could get our hands on, and acted as unofficial project wrangler to make sure everyone stayed on the same page as we worked to hit our deadline.

Long story short, we each brought complementary skills to the project and, from the very beginning, had mad respect for each other’s work. Couldn’t have put together a better team if we’d tried. Fantastic experience, beginning to end.

What’s next?

Since the Hack Day Challenge weekend, the entire DrunkenStumble team has gotten together for one code sprint and we have another planned. We’ve made a number of infrastructure and front-end improvements to the application, and have started a feature list for future development. We’re psyched to keep working on this app, and we’re excited to see where it goes.

Cheers!