Depth of UX Case Study

If you want to download or check out the code here is the Github link.

Depth of UX is a browser roguelike that turns UX research reasoning into combat. Each enemy represents a research fallacy: hearsay, sampling bias, leading questions, confounding variables, and eventually the HiPPO — the Highest-Paid Person’s Opinion.

Players answer research questions in their own words. Their answer is scored from 0–100, and that score becomes the damage they deal. A weak answer lets the fallacy survive and counterattack.

The original challenge was making research concepts feel active rather than instructional. Instead of presenting a quiz beside a game, I made the assessment itself the game mechanic:

The grading rubric is the combat system. Articulation is the weapon.

The project includes 32 research questions, eight enemies, three playable characters, items with mechanical effects, branching events, and a complete run structure from character selection to the final boss.

The first version of the grader relied too heavily on literal keyword matching. A player could understand the concept but score almost nothing simply because they used different vocabulary.

I changed the system to match concepts rather than exact words. For example:

“One person’s story isn’t proof”
and
“An anecdote is not data”

can now communicate the same idea without requiring textbook language.

I then tested against keyword lists and repeated phrases. The grader became forgiving about phrasing, but still strict about reasoning. A genuine plain-language answer scored 69, while keyword stuffing scored 39 and repetition spam scored 20.

Phaser handles the pixel art and animation. The interface — text, buttons, answer field, health bars, and feedback — is built with ordinary HTML and CSS on top.

That separation kept the game readable and accessible while making the interface much easier to iterate. It also let the game preserve a fixed 768×432 logical stage while scaling cleanly across screen sizes.

Testing by trying to break it

The most valuable fixes came from adversarial testing rather than normal play. I tested hidden browser tabs, duplicate items, malformed grader responses, malicious HTML, very large answers, generated maps, embedded layouts, and the final deployed artifact.

Those tests uncovered issues including frozen turns, drifting sprites, misleading map states, disappearing feedback, a combat panel covering the characters, and a subfolder deployment failure.

The feedback bug was especially important: the rubric explanation disappeared before the player could use it. Since the feedback is the teaching moment, I changed it to persist while the next answer is being written.

The public build is a self-contained static file hosted through GitHub Pages. It has no backend, database, signup, analytics, or required API key. The portfolio build uses a deterministic offline grader, sends no player answers anywhere, and makes zero network requests during normal play.

The final build was also audited for dependency vulnerabilities, secrets, injection surfaces, malformed responses, and responsive layout issues.

Depth of UX became both a playable experiment and a test of how interaction design can make abstract reasoning memorable.

The project taught me that good educational mechanics need two things at once: generous interpretation of how people express themselves, and rigorous evaluation of whether the underlying idea is actually there.

32 questions · 8 enemies · 3 characters · 8 items · 0 network requests