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
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
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
- 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
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
