Hackathon Playbook Course

Context & Content

Yvan RooseleerBelgian IT Academy Support Center

September 2018

My Hackathon Experience

Hackathon = real-time ACTIVE learning● A Hackathon uses project-based learning methodology to develop

technical skills and soft skills in a fun and meaningful way. These are referred to as 21st century skills.

● Learning and innovation skills are what separate students who are prepared for today’s increasingly complex life and work environment, from those who are not. Among other skills, these include:

○ Creativity and Innovation○ Critical Thinking and Problem Solving○ Communication○ Collaboration

● In an educational environment a hackathon can also replace an exam

Multidisciplinary Teams● Creating an IoT solution requires

multiple skill sets● The creative work of the team is

organized in 5 phases: Inspiration, Ideation, Prototyping, Testing and Presentation

● End goal: functional prototype to demo during the presentation

● Strong focus on collaboration within the team, as well as outside, with coaches and mentors

IoT Security New Course Positioning

Hackathon Process Overview● Prior to beginning the Hackathon

○ Module 1: Design Thinking○ Pitch Training

● Day 1○ Hackathon Kickoff & Challenge○ Inspiration Phase ○ Ideation Phase: -Problem Definition -Creativity and Solution Concept ○ Consolidation Phase & Expert Checkpoints

● Day 2○ Prototyping and Expert Checkpoints

● Day 3○ Presentation Preparation○ Final Presentation○ Jury Awards

Cisco Design ThinkingCisco Live 2017 Barcelona => Design Thinking v0.9

Stanford d.school methods● Design is an iterative prototyping and testing-based process based on

meeting human needs● Stanford d.school Empathize

○ This mixtape will lead you through interviewing and observing users, and then synthesizing your findings to discover meaningful needs and insights

○ WHAT is empathizing?Empathy is the foundation of a human-centered design process. To empathize, you:- Observe - Engage- Immerse

Stanford User Empathy Map WHY use an empathy map?

HOW to use an empathy map?Four Quadrants

● SAY● DO● THINK● FEEL

Stanford d.school Define● Empathize mode is divergent (or "flaring"); define mode is convergent (or

"focus"). Note that define mode is not yet seeking to define solutions, but rather, the problem to be solved.

Stanford d.school: Point of View (PoV) & Madlib● Create a point of view (PoV) to define your product, service, or experience● A point of view shot (also known as POV shot)

○ First-person shot (or a subjective camera) ○ Short film scene that shows what a character (the subject) is looking at (represented through

the camera)○ Usually established by being positioned between a shot of a character looking at something,

and a shot showing the character's reaction

● Madlib ○ Game used for creative thinking○ certain aspects of a sentence are left blank, to be populated by creatively generated words,

to create a complete sentence for fun

Stanford d.school Ideate● Ideate mode is again a divergent phase, where we take the defined problem

and try to generate many possible solutions. It is crucial during this phase to not converge too quickly to ONE solution, a common temptation.

● Reframe your challenge, and facilitate a high-impact brainstorm to generate solution concepts

○ WHAT is ideating? - radical design alternatives○ WHY ideate?- exploring solutions

Stanford d.school Brainstorm● You brainstorm to come up with many, wide-ranging ideas● Facilitate a brainstorm

○ ENERGY - keep ideas flowing○ CONSTRAINTS - What if …? How would …?○ SPACE - plenty of space needed to note down key ideas

Stanford d.school Method: Selection● Structured approach to taking the results of any option generating activity,

including but not limited to the results of brainstorming, and clustering and organizing the options for selection.

Stanford d.school Prototype● Advancing your solution via prototyping● Prototype to test

○ Don’t spend too long on one prototype

● User-driven prototyping ○ Understand their thinking and perhaps reveal needs and features○ Asking a user to draw something ○ Asking a user to make an object with simple materials○ Asking a user to compile things (“tear out pictures from these magazines that represent your

ideal mall shopping experience”)

● Wizard-of-oz prototyping○ Wizard-of-Oz prototypes often refer to prototypes of digital systems, in which the user

thinks the response is computer-driven, when in fact it is human controlled

Stanford d.school Prototype● WHAT is prototyping?

○ Prototyping is getting ideas and explorations out of your head and into the physical world

● WHY prototype?Traditionally prototyping is thought of as a way to test functionality

● But prototyping is used for many reasons○ Empathy (deepen understanding of the design space and your user) ○ Exploration (develop multiple solution options)○ Testing (create prototypes and develop the context to test and refine solutions with users)○ Inspiration (Inspire others: teammates, clients, customers, investors)

Key Concepts for Rapid Prototyping● Building models ● Sense-Making (Weick, Sutcliffe, & Obstfeld)● Affordances (James J. Gibson)● Zone of Proximal Development (Lev Vygotsky)● Scaffolding (Wood, Bruner & Ross)● Activity Theory (Lev Vygotsky and Sergey Rubinshtein)● Distributed Cognition (Andy Clark & David Chalmers)● Community of Practice● Design-Based Research● Interaction Design

Equipment for Prototyping Lab KitRequired (1 kit per Hackathon team):

● Raspberry Pi Ultimate Starter Kit● SparkFun Inventor's kit or Arduino Starter kit● Male to female jumper wires (The above kits come with male-to-male and

female-to-female jumper wires, but you may wish to purchase additional types of jumper wires.)

● Micro SD Card USB reader

Optional Equipment for Prototyping Lab Kit● SparkFun sensor kit - https://www.sparkfun.com/products/13754

● Grove kit for Raspberry Pi - https://www.seeedstudio.com/item_detail.html?p_id=2240

● Grove kit for Arduino - https://www.seeedstudio.com/item_detail.html?p_id=1855

● Small speakers

● Raspberry Pi camera

● NFC Module

● Magnetic card reader/writer

● Fingerprint scanner

● HDMI to VGA adapter

● 3x4 matrix keyboard

● Bluetooth module

Materials for Prototyping Lab Kit● First Aid Kit● 3 inch sticky notes● Coloured Pens● Coloured Fine tip markers● Easel paper with sticky back, flipchart or small white board for each team● Dry erase markers if using whiteboards in classroom● Batteries – 9 volt for motors● Digital camera => Smartphone● Video camera => Smartphone

Recommended Materials for Prototyping Lab Kit● Index cards● Scissors● Box cutter● Glue● String● Zip ties● Tape● Fabrication Materials to create boxes or physical models for prototyping● Cardboard/Poster board● Plastic● Metal● Fiber● Wood

Stanford d.school Test● Testing can be fun but should be done mindfully so as to maximize what you

learn about the product, service, or experience you are designing● Nielsen Usability 101: Introduction to Usability

○ Usability is a quality attribute that assesses how easy user interfaces are to use.

○ Usability is defined by 5 quality components:■ Learnability■ Efficiency■ Memorability■ Errors■ Satisfaction

Interaction Design● Why UX?

○ ROI of User Experience○ YouTube: https://www.youtube.com/watch?v=O94kYyzqvTc

● Interaction Design Textbook○ Bill Moggridge: http://www.designinginteractions.com

● Stanford d.school○ Reading List: https://dschool.stanford.edu/resources/dschool-reading-list

● Communities of Practice○ Interaction Design Association (IDA) ○ Interaction Design Foundation○ Lab: ideas from a variety of design-related disciplines to better see, research, draw, and

diagram

Lab - Fresh Eyes● Ideas from a variety of design-related disciplines ● Inspiration for "seeing" from Druckrey and Eames

○ Seeing ■ A key skill for effective design is learning to see, through fresh eyes, people, artifacts,

and situations■ http://www.eamesoffice.com/

○ Researching■ Industrial Design Awards: http://red-dot.de/pd/online-exhibition/?lang=en

○ Sketching => Visual thinking■ http://www.networkworld.com/article/2220218/ethernet-switch/napkins--where-ethernet--compaq-and-fa

cebook-s-cool-data-center-got-their-starts.html○ Diagramming => Knowledge representations,

■ 6 Panel Storyboard, Block Diagram, Sequence Diagram, Logical Topology, Physical Topology

Lab - Enchanted Objects● Designers of IoT systems => empathize with users, clients or customers● One way to deepen our empathy is to understand their needs● Organizing the Internet of Things by human desires● Enchanted objects are ordinary things made

extraordinary

Ladder of enchantment● David Rose’s concept of "enchanted objects"

with six human desires○ the desire to know all: omniscience○ the desire for human connection: telepathy○ to protect and be protected: safekeeping○ to be healthy and vital: immortality○ to move effortlessly: teleportation○ to create, make and play: expression

● product > service > experience● connection > personalization > socialization > gamification > storyfication

Business Model Canvas

Pitch Training

Hackathon Playbook: Organizations & Names

● Stanford d.school● Lev Vygotsky & Sergey Rubinshtein● Andy Clark & David Chalmers● Wood, Bruner & Ross● Weick, Sutcliffe, & Obstfeld● James J. Gibson● Jakob Nielsen● Bill Moggridge● Druckrey and Eames● David Rose● Alexander Osterwalder