View
41
Download
1
Category
Preview:
Citation preview
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
Recommended