Hackathon 101How to Prepare for Your First Hackathon

Presented By

Erica Stanley@ericastanley

What is a Hackathon?A hackathon is a collaborative event that brings programmers and other interested people together, using technology to solve problems or create something entirely new.

The time frame is usually between 24 and 48 hours.

Benefits of Hackathons● Learning Opportunities

○ Exposure to new people, tools, and ideas○ Can see the different product development roles, in

action● Work and Business Opportunities● New Friends and Connections

Who should attend a Hackathon?There’s something for everybody!

A Few Useful Roles at a Hackathon● Entrepreneur (Idea Person)

● Designer(s)

● Developer(s)

● DevOps

● Marketing Specialist

● Product Manager

Other (Often Overlooked) Roles● Problem Solver/ Mentor

● Documenter/ scribe

● Presentation preparer

● Social media writer/ blogger

Hackathon Breakdown● Idea Pitch & Team Building

● Prototyping

● Development of Prototype

● Timed Pitch & Product Demo

Idea Pitch and Team Formation

● Understand the Theme and the Sponsors

● Tell your initial story● Get like minded people to

rally around your idea

Team Dynamics● Team Communication & Collaboration

○ All in one room with big whiteboard.

○ Tool to Try: Slack.com

● Division of Labor

● Getting Along ○ Leave emotions and defensiveness at home; Talk openly and

decide quickly.

● Ideas and Contributions from all Team members

Team Skills● Diverse set of skills; Many Backgrounds

● Clear Division of Responsibilities

○ Have 1 leader/ scrum master/ project manager/

tiebreaker to keep things moving

○ Decide on integration points and check in times

● Familiarity with a wide variety of tools and frameworks

○ Limited time for experimentation

Designing the Prototype● Product design sprints can help you brainstorm and

evaluate product features you want to include.○ Learn more about design sprints here: http://goo.gl/jKBOiQ

● Once you have a set of features you feel tell the most unique story of your product, start thinking of how to present it.○ Envision your perfect demo and work backwards.○ Refine the prototype based on how you want to present it.

● Develop a high fidelity prototype for the demo, from the prototype you refined in the previous step.

Product Design Sprints

Phase 1: Understand - Goals● Develop a common understanding of the

working context including the problem, the business, the customer, the value proposition, and how success will be determined.

● By the end of this phase, we also aim to have identified some of our biggest risks and started to make plans for reducing them.

Phase 1: Understand - Deliverables

● Notes & documentation capturing the definitions and goals we discussed throughout this phase.

● A plan for initiating the next phase of the sprint.

Phase 2: Diverge - Goals● Generate insights and potential solutions to

our customer's problems.● Explore as many ways of solving the

problems as possible, regardless of how realistic, feasible, or viable they may or may not be.

Phase 2: Diverge - Deliverables● Critical path diagram: highlights the story most

critical to the challenge at hand. Where does your customer start, where should they end up and what needs to happen along the way?

● Prototype goals: What is it we want to learn more about? What assumptions do we need to address?

Critical Path Diagram

Phase 3: Converge - Goals● Take all of the possibilities exposed during

phases 1 and 2, eliminate the wild and currently unfeasible ideas and hone in on the ideas we feel the best about.

● These ideas will guide the implementation of a prototype in phase 4.

Phase 3: Converge - Deliverables● The Prototype Storyboard: a comic book-

style story of your customer moving through the previously-defined critical path. The storyboard is the blueprint for the prototype that will be created in phase 4.

Prototype Storyboard

Phase 3: Converge - Deliverables● Assumptions Table: A list of all

assumptions inherent in our prototype, how we plan on testing them, and the expected outcomes which validate those assumptions.

Phase 4: Prototype - Goals● Build a prototype that can be tested with existing or potential

customers. ● The prototype should be designed to learn about specific

unknowns and assumptions. Its medium should be determined by time constraints and learning goals. Paper, Keynote, and simple HTML/CSS are all good prototyping media.

● The prototype storyboard and the first three phases of the sprint should make prototype-building fairly straight forward. There shouldn’t be much uncertainty around what needs to be done.

Phase 4: Prototype - Deliverables● A testable prototype. ● A plan for testing. If we are testing

workflows, we should also have a list of outcomes we can ask our testers to achieve with our prototype.

Phase 5: Test & Learn - Goals● Test the prototype with existing or potential

customers. ● It is important to test with existing or potential

customers because they are the ones you want your product to work and be valuable for. Their experiences with the problem and knowledge of the context have influence on their interaction with your product that non customers won’t have.

Phase 5: Test & Learn - Deliverables

● Summary/report of our learnings from testing the prototype.

● A plan for moving forward beyond the design sprint.

Prototype Design ToolsWireframing/ Interactive Prototypes● Desktop

○ Balsamiq Mockups ○ Omnigraffle ○ Keynotopia - UI Addon for Keynote

● Web-based ○ Solidify (Free Trial), UxP

● Mobile ○ Paper, Noteshelf, iMockups for iPad

Prototype Design ToolsHigh Fidelity ● UI Frameworks

○ Bootstrap ○ Foundation

● Photoshop ○ UI Kits (ie. Flat, Square, Minimalist, etc.)○ Velositey

● UI Builders ○ Easel.io ○ Jetstrap.com○ Proto.io - with new features for Android Wear prototping

Prototype DevelopmentSource Hosting & Version Control ● Github - public repositories, issue/ feature

management ● Bitbucket - free unlimited private

repositories, issue/ feature management, teams (free up to 5 people)

Prototype DevelopmentFront-end ● UI Frameworks

○ Bootstrap ○ Foundation

● JavaScript Frameworks ○ Meteor.js - Build an app in 45 minutes with Meteor○ Angular.js ○ Knockout.js

Prototype DevelopmentMobile● Cloud Platform

○ Appery.io - Build an app in 90 minutes● For Touch Interfaces

○ Jquery Mobile ○ Hammer.js

● Build and Packaging○ Phonegap/ Cordova ○ Titanium

Prototype DevelopmentWearables (Software)● Google Glass

○ Mirror API (GDK may add more complexity to prototype)○ WearScript

● Android Wear● Pebble● Plantronics● AT&T - Mobile and Wearable APIs

○ Speech○ Messaging

Prototype DevelopmentWearables/ IoT (Hardware)● Arduino

○ Lilypad ○ Pro Mini○ Nano

● Ada Fruit○ Flora ○ Gemma

● Intel○ Galileo ○ Edison

● MetaWear (iOS & Android)● WaRPboard (Coming Soon;

Android)

Prototype DevelopmentBack-end● BaaS

○ Parse○ Appcelerator Cloud

■ Singly○ Kinvey○ Loopback

Prototype DevelopmentPlatform ● PaaS

○ Engine Yard ○ Heroku○ Google App Engine○ OpenStack

Pitch Presentation● Presentation

○ Powerpoint, Keynote, Website, Video?○ Multiple Collaborators?

■ Google Presentations■ Github / Bitbucket (for Websites)

● Product Demo ● Q&A

The Pitch: Tell Your Story1. Hook . Tell an interesting story. Remember that your app is 1 of 100. Give

a yawning, texting judge a reason to perk up and care. 2. Pain Point: Ok, great story, now weave it into the larger pain everyone

has. Again, answer: Why do I care? 3. Solution - ie, your app/product. What did you build that makes that pain

go away and is also intuitive/ entertaining at solving it. Just show the most compelling stuff.

4. Leave them wanting more : Finish this sentence: “This is the best app you’ll see all day because…” If the rest of that sentence isn’t authentic, convincing and clear, then people are just waiting for you to get off stage and not in “I have to tell friends about this” mode.

The Pitch - Tips● Look at the judging criteria ahead of time so that you’ll rock all

the sections. ● If your pitch is less than 5 minutes, you should only have one

person give the presentation. (You can always have multiple team members participate in the Q&A session). Make sure that you pick somebody awesome. Make sure that they have a bulletproof understanding of the business.

● Give someone the job of brainstorming the hardest questions that the judges will ask. Figure out how to respond to all of these questions from vertical integration to alternate routes to monetization, competitors, etc.

The Pitch - Bottom Line

If you cannot prove that this product is needed and has demand, you don’t have a product.

Things to do before 1. Get some sleep! (You’re going to need it.)2. Do your Research.

a. Know the theme and sponsors.b. Check out any relevant APIs & libraries.c. Get a good feel for any new tools you might be

using.d. Install Common Prerequisites.e. Have any necessary API keys handy.

3. Pre-form your Team?

Workflow Tips● Working > Pretty

○ You can always add pretty, if you have time.● One Feature at a Time

○ Don’t start on feature 2 until feature 1 is finished and demo-ready

● Keep Goals Limited and Well-Defined● Do Mini-Sprints

○ Break up your time into 4-hour chunks○ Everyone has deliverables that must be done in this timeframe

● Feature Drop

Staying Sane● Take breaks. Get up and walk around.● Pace yourself - don’t load up on caffeine too

early. A slow steady supply will keep you awake and alert.

● Sleep when you have to.● Don’t eat too much; it’ll make you sleepy.

Things to do After1. Stay in touch with your team.2. Test, Refine or Refactor your prototype.

a. Research Audience and Competitive Markets.3. Startup potential? Research company

formation.

Share Your Stories

SourcesCheck these links out for more information:1. http://www.mashery.com/blog/how-rock-your-first-hackathon-tools-

and-resources2. http://robots.thoughtbot.com/the-product-design-sprint3. http://hackforwesternmass.org/have-to-be-a-programmer4. http://java.dzone.com/articles/how-prepare-hackathon5. http://planetjeffro.com/post/36452473034/14-tips-on-how-to-crush-

a-hackathon-bonus-video-of6. http://code4sac.org/what-is-a-hackathon/7. AT&T Developer: Lessons from Hackathons for Rapid Protoyping8. https://speakerdeck.com/kplawver/hackathon-101