Drunken Stumble: a breakdown

By mike@mike-miles.com

So my last post, I mostly went through the process of how Drunken Stumble was built and competing in the boston hack day challenge.  So I thought I would follow up with  a more in depth post about Drunken Stumble itself.

An Overview

Since Drunken Stumble allows you to plan what I’ve been calling ‘dynamic pub crawls’ , it was built with the mindset that it would be mostly used on mobile devices. So from the beginning Drunken Stumble had to be at its core elegant and simple to use.

The whole Drunken Stumble experience is 5 different pages. Each page is clean, simple and intuitive to the user about what they can do. (Which is due impart to the great design)

Page 1: User Location

When you first go to Drunken Stumble, you are provided with a page which has only 3 elements. The logo, a text field and a big button.

Drunken Stumble Page 1

Thanks to our great design the user clearly see’s what they are supposed to do. You either enter an address, or you can use the geo-locate button and Drunken Stumble will attempt to find your current location. After that you click on the button to begin a Pub Crawl.

Now a user can also see a slight variation on this page. Say you had already created a stumble but closed your browser, mobile device died or other upset. When you go back to the drunken stumble homepage, you will see a button to rejoin your last active stumble (assuming you have cookies enabled).

Drunken Stumble Page 1 variation

Page 2: Select a Bar

The second page the user experiences is a listing of the 25 closest bars to the location they provided. The list is simple, yet informative. For each bar listed the user is provided the name, category and distance from their current location.

Drunken Stumble Page 2

Through out the Drunken Stumble experience the user comes across this page many times, so it also has some slight variations. If the user is picking their second, third, fourth,ect.. bar then at the top of the list they will see the bar they are currently at and in the listings any bars they have previously visited and displayed differently.

Drunken Stumble Page 2 variation

Page 3: Information

The third page a user comes to (and will spend the bulk of their time viewing) is the information page.  On this page the user is provided walking directions from their previous location to the next bar they have chosen, as well as a map (generated from google) which displays the walking route.

Below the direction information the user is given two ways to share their pub crawl with their friend. Either by twitter or facebook. Each Pub crawl that is generated on Drunken Stumble has its own unique url which makes it easy to share. Anyone who visits the url is taken to the current information page (users are given the choice to change their starting location, making it easy for someone to jump into the middle of a pub crawl).

Below the sharing buttons the user is given 3 more buttons, they can choose to move on to a new bar (pack to page 2), see an overview of their pub crawl (page 4) or end their pub crawl (page 5).

Drunken Stumble Page 3

Page 4: Overview

The fourth page of the user experience is the overview page. At any point during the pub crawl, the user can click on the  ”Where have I stumbled so far?” button (on page 3). This page provides the user with an overview of what they have done the whole night.

The user is first presented with a map, which marks all the bars they have been to. Below that is a count of the number of bars they have visited, how long the have been stumbling and how far they have walked. (the time and distance are estimated, based on the time between choosing bars, and the distance between each bar).

Below that, the information is broken down per bar, and the user can see how long they spent at each bar. Users can also share this page with friends via twitter and facebook.

Drunken Stumble Page 4

Page 5: Taxi!

The final page of the user experience is reached when the user clicks on “Enough Stumbling, take me home” button (on page 3 & 4). On this page Drunken Stumble provided some responsible information, a listing of the 15 closest taxi services. It’s structure is very similar to the bar listing page. Each listing displays the company name and phone number. When clicked on from a mobile device, it will bring up the phone number for dialing.

Drunken Stumble Page 5

Conclusion

So there you have it, the whole Drunken Stumble user experience (minus the 404 page). It’s simple, informative and fun.

So what are you waiting for, Start Stumbling!