AT&T sponsored a Mobile App Hackathon here in Atlanta lasting for only 8 hours during Saturday, September 10th, 2011. I'm fortunate to be able to participate and collaborate with a talented team on a fun app idea. We explored several different concepts before deciding which one to build. We brainstormed 10 or more different app ideas before deciding on a direction. We even seriously considered building a multi-user, location-aware, social gaming app involving zombies, but ended up settling on something a little more feasible to accomplish in less than 8 hours. We wanted to make something fun that would also leverage our unique strengths. We eventually settled on one of our first concepts which is a mobile web app for people to report potholes, poorly timed traffic lights, and other road problems. We called this app Road Rage. Similar concepts already exist, such as Pothole Scout and Waze, but what makes our approach different as a web app is our emphasis on convenience and accessibility. We want users to have a simple and convenient way to share input without involving too many steps. We also believe that publishing our concept as web app instead of a native app is the best way to reach a wider audience, while also allowing us to deploy a single code-base that works well on every mobile device. This article provides a little background on our concept and shares some insights into our experience competing in the Atlanta Mobile App Hackathon.

Our Team:

The team started out as four people and dwindled down as things progressed. We already knew going into the competition that Jason and myself would have to depart a few hours before the completion deadline because of prior commitments. Phil ended up missing the event day completely due to a death in the family, but was able to contribute ahead of time conceptually in addition to some R&D efforts. We had to adapt our team dynamic to accommodate these changes and ended up functioning similar to a relay race, where each team member hands off their work for the next person to run with. Unfortunately, Manny was left sprinting the last lap to the finnish line alone. I feel pretty bad for deserting him in the final stages, especially because he had no interest in presenting our app in front of a room full of strangers. Considering the circumstances I feel we adapted pretty well and were all able to benefit from the experience as a whole.

(from left to right)
Mason Brown (me) : designer
Phil Huffsticlker : front-end developer
Manny Blum : front-end developer
Jason Ardell : back-end developer

The Concept:

Tag road hazards, detours and bad traffic lights. Allow users to 'vote-up' potholes to higher priority to increase an area’s priority. A dashboard can track popular tags, life-span of each incident, display how it was fixed, show hazard density per capita, show top trending tag results, and share the results online to promote greater awareness.

Our Goals:  1pm  -  2pm  -  3pm 

•  Core Feature: tag a new pothole 
•  Core Feature: tag a traffic light problem 
•  Core Feature: tag a poorly visible road sign 
•  Core Feature: tag a bike lane needed 
•  Advanced feature: +1 tags to vote higher in priority 
•  Advanced feature: ability to tweet blast tag results (requires twitter account auth) 
• Advanced feature: display a dashboard view of user activity (tag data)
• Advanced feature: share results to city of Atlanta (requires voodoo magic)
• Advanced feature: report a bad driver by license plate
• Advanced feature: track cellular movements to collect ‘run-keeper’ style activity. (requires movement detection)

The Potential Benefits:

• Use crowd-sourcing to collect road data and save city planners time and money.
• Provide a robust data source for DOT and private contractors to access.
• Promote efficient city road repairs by allowing citizens to identify priority road concerns.

Our Experience:

Our team met early in the morning at Starbucks to pre-game and organize our thoughts before walking across the street one hour later to the ATDC on Georgia Tech's campus. When we arrived at the hackathon event space we were greeted at the welcome-table by one of the event organizers who was busy troubleshooting the facility's wifi connection problems. The room was already full when the event began but no-one had internet access. Luckily Jason from our team brought his personal wifi router from home and was able to connect us to the internet long before the event organizers were able to provide another solution. Apparently they had to buy 7 new cisco routers in the middle of the event so we could have a suitable network for nearly 80 developers to hack all day. A little later on they were able to provide us with 4G hotspots, which were actually pretty cool. Despite having several wifi options mid-way into the hackathon, we still experienced miserable connection problems. It turns out that not having reliable internet access can slow you down when you're depending heavily on api's hosted in the cloud. We were able to get by with periodic access to Google's mapping api and shared github repo. The internet latency felt similar to having to wave your wet hands a bunch of times in front of a paper towel dispenser before it actually gives you one. Apparently the ATDC building is well known for having unreliable wifi, which is ironic since they're supposed to be a prestigious technology power-house. Fortunately our team and event sponsors were resilient so we all survived.

A few speakers presented different mobile frameworks and api's. Unfortunately I was only able to catch fragments from each presentation because I was trying to stay focused on creating our wireframes and design interface assets so we'd actually have a chance of finishing on time. By 11:30am our app's development was well under way, but a lot of other participants in the room hadn't started hacking anything yet and several people were still just trying to join a team. Our team was furiously hacking away, sharing incremental progress, and pushing changes to github. Every five minutes someone else in the room would swing by our table and distract us in different ways. Most of the people checking in with us were curious what we were hacking and just wanted to network. Given the aggressive time-crunch I wasn't very interested in networking, so I tried to keep my headphones on and politely ignore the constant distractions. I was able to speak with a few nice people, swap some ideas and share contact info, but I wish I had more time to embrace the social aspects of this event a little more. There were a lot of talented developers, entrepreneurs and evangelists in attendance, but I forced myself to stay heads-down for most of the event and missed out on some idea share.

The Execution:

While I was designing the app's graphics, Manny quickly built the scaffolding for the initial views, and Jason setup the server and wrote the backend application logic. We used Google's api for map data as well as fonts. Our front-end was built using jquery-mobile, sitting on top of Ruby on Rails with a sqlite database, and deployed on Heroku. Jason and Manny would do a much better job of explaining the technical architecture than I would, but I can convey my insights on the presentation-layer side of our framework.

We all worked with jquery-mobile before and knew it could help us get our interface up and running with minimal effort. While I agree it's a good out-of-the-box solution for prototyping web apps, as a designer I find it cumbersome to customize and not very rewarding for the amount of time I spent hacking together a simple custom look. Sure, some interface elements are easy to skin, such as colors and dimensions, but other elements are painful to modify and can be more effort than it's worth to change. I spent more time removing default styles than I did creating a custom ones. It's frustrating when you're running short on time and realize you have to reverse-engineer a theme's stylesheet just to tweak a few positions, margins and borders. I was able to customize our skin enough to not look exactly like a default jquery-mobile theme, but overall I'm disappointed with how much time I wasted overwriting styles compared to how noticeable the impact was in the end result. I feel I could have skinned a more impressive looking interface from scratch with the amount of time I spent modding their default css and would certainly take a different approach in the future. I would like to re-visit jquery-mobile, on a less time-sensitive project, and possibly customize a boilerplate theme that's more easily skinnable for designer/hybrids like me.

The Result:

Road Rage App: http://roadrage.heroku.com

Road Rage Icons:

Since everyone on our team dipped out before the end of the event I don't think our finished app even got shared with the other hackathon participants. Either way, I'm glad to see the Four Corners game won the competition, and know that the developers @cyu, @lorennorman, @blakebyrnes and @dsims certainly deserve the recognition (and prizes too!) The other hackathon apps I saw were pretty cool as well and think everyone had some great ideas overall. Although our team didn't complete all of our app's goals for the day, we certainly achieved the most important goal which was to have fun jamming out with like-minded peeps creating a web app that has potential for greatness. I'm really thankful for the opportunity to work with my team and contribute to Atlanta's mobile app community. Hopefully we'll be able to continue collaborating on our concept and eventually publish a more feature-rich app in the future. In the meantime, check out what we were able to accomplish in a single Saturday by visiting Road Rage from your web-enabled device. Feel free to share any constructive feedback.