Idea to prototype in 10 days: How I made Jamstack Attack!
By: Robert Mion
Tags: Coding, Prototyping, Front End Development, Videogames, Web Development

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

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

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

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