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

Image for post
Image for post
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
Image for post
Image for post
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
Image for post
Image for post

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
Image for post
Image for post

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
  • Re-design starting page to feature a wheel spin with iconography
  • Added a ‘choose a category’ page with a deck-building aspect: one collectable card per language
  • 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
Image for post
Image for post

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
  • Turned second phase of Coding Telefone screen into an automated demo of watching teammate type code
  • Neat idea: show player leveling up and earning a new card after finishing either game
  • 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’
  • Idea: Refactor instructions for both games to be more like a short video

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
  • Had good friend usability test: noticed it looks super-zoomed-in on a phone
  • Started re-creating existing screens for widescreen devices
  • 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

Written by

Designer, Developer, DataViz, Dad • rmion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store