Idea to prototype in 10 days: How I made Jamstack Attack!

A journal of the process by which I made a multiplayer game where web developers practice frontend together

Try the game now

Click here to play Jamstack Attack!

Day 1 — Nov. 27

  • App idea: Learn Jamstack by playing with and against other people
  • Name? Jamstack Attack!
  • Preliminary Mini-games: Pair programming, Debugging Duel, Clear the stack, What’s missing?
  • Comparisons: ‘Fall Guys’, ‘Gogogo!’, ’You Don’t Know Jack’ for Web Developers

Day 2 — Nov. 28

  • 10+ funny phrases as possible ‘You Don’t Know Jack’-style category names
  • First action for player: Pick a category!
  • Short mini-game intros: Find the error faster, Help them write this, Clear the stack faster, Find what’s missing faster, Fill the blanks faster
  • Fighting game UI: Health, indicators for rounds won
  • Duels or group play? 1-on-1 or last man standing?
  • Principles: Competitive and collaborative, Practice Frontend Together, test speed and accuracy
Sketches from my notebook

Day 3 — Nov. 29

  • Mini-game ideas: Spin a wheel to see who gets which Pair Programming role
  • From Ring Fit Adventure: to start match, each player must simultaneously press and hold button for 3 seconds
  • Limit play per 24 hours? 1 round per language per day…3 rounds total
  • When answering, freeform type with autosuggestions based on language reserved words
  • Persistent keys for < [ { ( “ that toggle open/close
  • ‘While you wait’ for the other player to go in Pair Programming: Trivia? Typing exercise? Quiz?
  • Debugging Duel: UI to help player target the exact spot: Which line? Buttons for 1–7
  • Clear the stack: Stack overflow logo as progress indicator, show call site with passed arguments, function definition and text entry starting with <- | like in browser console

Day 4 — Nov. 30

  • Captured screenshots of App Store pages that I intend to use in mocking up my app
  • Captured screenshots from other apps to gather interaction design ideas: Duolingo, Codecademy Go, Mimo, SoloLearn
  • First app icon idea: toast with jam on it and bite in it
  • Second app icon idea: JA!
  • First two app pages

Day 5 — Dec. 1

  • Find and Replace: easy design pattern for player to quickly highlight code error and fix it
  • Sketch mock-up of find-fix interaction design pattern
  • Axure prototype of single Debugging Duel challenge
  • Created first flow: download app, open, splash page, attack!!!, first challenge with countdown

Day 6 — Dec. 2

  • Pair programming: explore a few code snippets to understand the expectations of the instructor — how open-ended should it be? What could be flagged as attempting to merely write the answer in the instructions (look for code-y characters like +=(){}[])
  • Draw wireframes of both players’ screens: Help them code this, Your turn: code this
  • Crazy fact: no ‘pair program’ apps on App store
  • Prototyped first iteration of pair programming mini-game, Coding Telefone
  • User-tested app experience with junior web developer — a lot of conceptual model misunderstandings that I will attempt to fix tomorrow
  • Brainstormed new copy for each mini-game’s instructions

Day 7 — Dec. 3

  • Made an iteration of nearly all existing pages
  • Incorporated more instructional text on each mini-game screen
  • Added screenshots of app to splash page
  • Added screens after each mini-game to show leveling up and game over with corrected code
  • Added small avatars and round 1–3 indicators to Debug Duel
  • Tested start-to-end flow to ensure it plays as expected
  • Recorded videos of today’s and yesterday’s end-state ‘play through’

Day 8 — Dec. 4

  • Final updates to latest iteration of prototype: larger wheel, Debug Duel video instructions
  • Created Typeform survey to elicit feedback from anyone who completes the demo
  • Published a blog post on dev.to as a way to promote the game
  • Re-designed a few screens as a result of the process

Day 9 — Dec. 5

  • Finish re-creating desktop version of remaining screens
  • Add two examples to Debug Duel mini-game
  • Test entire flow for odd behavior or inconsistencies
  • Record demo video of newest iteration
  • Added flags to Coding Telefone to check for input of unacceptable code that’s too identical to the code their teammate is expected to match

Day 10 — Dec. 6

  • Write the promotional message for use in various slack channels to find beta-testers
  • Update both mini-games to incorporate searching for and finding Player 2
  • Channels to publish: SCcodes, FrontEndMentor, Coding Coach, Meetup
  • Created Meetup event for three nights from now: Day 13

Designer, Developer, DataViz, Dad • rmion.com