Skip to main content

Desktop with keyboard and mouse — WASD to move, click to swing. Press Esc inside the game to close its intro card.

Open in new tab

Sandbox Demo

I always wanted to make a game. With zero game-development experience, I wanted to see what I could build by just building what I want — hence Sandbox. I treated it like a product I would design at work, with AI as the development team.

Short version

A game, built the way I build enterprise software.

Role
Product designer and product owner
Team
Me, AI coding sessions, generative art tools
Method
Epics → user stories → build → test → QA → iterate
Stack
three.js · TypeScript · Vite · Colyseus in a Web Worker · Netlify

Why

The game I always wanted to make

Making games was always the goal. I built enterprise software for nine years at PayPal instead.

I had zero game-development experience, so the question was simple: what could I build if I just built what I want? That is the sandbox. AI removed the part I was missing — an engineering team. I could describe a system, review what came back, and decide again. So I ran the project the only way I know how: as a product.

The Drifter holds the dark Nyxblade greatsword high overhead in a ready stance, three Jellings scattered across the clearing, oaks and a weeping willow in the middle distance
The Drifter, the Nyxblade and the meadow. The tools made the assets; the decisions were mine. Click to enlarge.

The process

Same process as enterprise SaaS, different deliverable

Nothing about the method changed. Only the thing at the end of it did.

Building SaaS at workBuilding the game
Product requirements docGame design doc
EpicsSystems — meadow, combat, creatures, progression, interface
User stories with acceptance criteriaFeatures and skills — each sword art, the mount, the intro card
Design system and component libraryPainted UI kit — 26 chrome pieces, 16 skill icons, one brushwork style
Prototype, then usability testBuild, then playtest in the browser
QA and release notesTest and QA each release before it goes on the site
Iterate on feedbackIterate the models, the look and feel, the HUD

The game doc

Systems were epics. Features and skills were user stories.

Each system got an epic; each feature or skill got a story with a done-state I could test. What is in the demo today is what passed.

EpicExample user storyStatus
MeadowAs a player, I walk a painted meadow with tall grass I can cut.In the demo
CombatAs a player, I swing the Nyxblade and use sword arts from the hotbar.In the demo 9 of 16 arts
CreaturesAs a player, I fight Jellings, tame the dragon by standing still beside it, then ride it.In the demo
ProgressionAs a player, I level to 50 and spend points on STR, AGI, VIT and INT.In the demo per session
InterfaceAs a player, I learn the controls from one card and can close it with Esc.In the demo
Combat — a swing lands The Drifter mid-swing with a bright cross-shaped slash flare over a Jelling beside him, willows and oaks behind, another slime watching from the left
The swing story: press, flare, hit. The server that validates it runs inside the browser tab.
Combat — recovery The Drifter seen from behind as a slash flare fades above him, a Jelling tucked against his side, dense willow foliage on the right and a spiky white bush on the left
Attack, react and run clips are Mixamo takes retargeted onto the project's own rig.

Who did what

I designed and decided. The AI built.

Me

  • The game doc — epics, user stories, what counts as done
  • Every design decision, and the briefs for every asset
  • Reviewing what came back; keeping, rejecting, re-briefing
  • Playtesting, test and QA of each release
  • What shipped and what stayed gated

AI and tools

  • Engine code from directed coding sessions — three.js, TypeScript, the in-browser server
  • Meshes, painted UI chrome and skill icons — Meshy
  • Foliage sway sheets and the goblin horde — AutoSprite
  • Animation clips — Mixamo, NVIDIA MotionBricks
  • CC0 fills — Kenney, Quaternius
One species, one sheet — oak, 25 frames A five-by-five sprite sheet of the same painted oak tree in twenty-five slightly different poses, the canopy shifting a few pixels between frames so the tree sways when played back
The brief was “a painted oak that sways”. What came back was keyed, tiled and measured before it went in.
The horde — march and attack The top band of a goblin sprite sheet: five columns of a small green goblin in a brown tunic, the first two rows walking with a dagger, the next two winding up and swinging a sword, the last row crouching and lunging toward the viewer
A band of the sixty-frame goblin sheet, drawn and keyed in one pass.
Four painted UI chrome pieces laid out two by two: a cream parchment window panel with dark corner brackets and a dark title bar, a dark rounded title-bar strip, a long amber button with a dark outline, and a dark square inventory slot with an amber rim
The UI kit is the game's design system: 26 painted chrome pieces, one brushwork style, reused for the intro card, the hotbar and the loading screen. Click to enlarge.

Test & QA

Every release got tested before it went up

Same discipline as a SaaS release: a test pass against the stories, a QA pass on the build, then it ships — or it doesn't.

ReleaseWhat I testedResult
Meadow sliceControls, the intro card, the hotbar, cutting grassPlayable in the browser
Keyboard layerEvery action reachable without a mouse; key hints on screenShipped as a separate layer over the build
PerformanceFrame rate on a 2019 laptop with an integrated GPU20 → 60 fps, tall grass kept
LookPixel grid against the painted textures600p, hard pixels, painted look kept
LoadingInput during load; the first skill after loadingInput gated until the world is built; no hitch
The demo's painted intro card over a meadow of tall grass and willows, headed 'A demo sandbox' with 'esc to close' in its title bar, three short paragraphs of intent, a two-column 'How to play' key table, the line 'The town gate is shut in this demo', six sword-art glyphs and a 'step into the meadow' button; the hotbar of nine skills and the LV/HP/MP meters sit along the bottom
The intro card: intent, controls and the caveat in one panel, with its exit in the title bar — the same visibility-of-status and exit rules I hold a SaaS screen to. Click to enlarge.
Sixteen painted sword-art icons in two rows of eight on a plain ground: a starburst, hands catching a blade, a fan of hatched lines, a crown of rays, a spray of fragments, a crossed slash, a stacked zigzag, and blue crescent, hook, moon, star and triple-bolt marks, then brown rings, a broken circle, a spiral and linked rings
Sixteen sword-art icons to one brief. Nine made the hotbar; each shows its key, its MP cost and its name, so choosing is reading, not remembering. Click to enlarge.
← View more case studies

Let's work together

uxjeffross@gmail.com

Contact

uxjeffross@gmail.com 669-289-9546

Work

Case Studies

© 2025 Jeff Ross. All rights reserved.