Work / ChemQuest
Same elements. Brighter minds.
A K–12 chemistry game where students build real molecules and watch a world grow out of them. Concept through to a working app, a locked brand, a design system, a year of standards-aligned lessons, an accessibility pass and a plan for getting it into South Carolina classrooms.
A K–12 chemistry game, concept to working product
One sentence the whole product had to earn
Learn the periodic table by connecting blocks. Put two hydrogens on an oxygen and you have made water — and then the app tells you what water does.
Everything that followed is an answer to one question: how do you keep that true for a seven-year-old and a high-school chemistry student at the same time?
Plenty of chemistry apps quiz. Very few let a student make something and then show them what it was for. The rule I set at the start was that no reward is abstract: every molecule a student builds has to visibly change the world on their screen, and the fact attached to it has to be a real one.
Every element arrives as an object with a shape, not a letter on a chart. Students snap them together under the real rules of bonding. As they get older the blocks become Lewis structures without the mechanic underneath ever changing.
Gamification never gets to bend the chemistry. A bond that would not form does not form, and the app says why. That rule is what makes a science coordinator take the thing seriously.
The long idea is smart blocks a child builds with and scans. That is a hardware company, not a first release — so the app was built to stand on its own, and nothing here depends on the blocks ever existing.
The problem that shaped every screen
Not three apps. One engine, with three developmental bands sitting on top of it — the same canvas, the same bonding rules, three different readings of the same moment.
Grade sets the band. The placement quiz only decides where inside it a student starts, so nobody is ever handed material written for someone four years older.
Pre-readers in K–2 skip the text quiz entirely and start at Level 1 — a written placement test for a child who cannot yet read is a test of the wrong thing.
And it would have cost the sale
The concept brief asked for glass panels, neon cyan on black and an eccentric mad-scientist voice shouting “Great Scott!”. Fun to write. Wrong for the person who actually signs off: a district technology director deciding whether this is a serious instrument or a toy.
The locked direction keeps the delight and moves it. The interface is calm and systematic; the chemistry moments carry the energy.
Concept: “Master the elements. Fuel the adventure.” True to the sci-fi draft, and aimed squarely at a kid.
Locked: “Same elements. Brighter minds.” It still belongs to the student, but a principal can say it out loud in a budget meeting. Discover · Explore · Create carries the rest.
Four brand colors, and the rules that keep them legible
The system is a Figma plugin — about 4,700 lines of TypeScript that generates the whole file: variables in light and dark, nine text styles, the 8px scale, and 30 component families with their states.
It is idempotent. Run it again and it updates the existing system instead of making a second copy of everything, which is the usual way a design file goes bad.
Cyan is the brand’s most recognisable color and its least usable one. Rather than quietly dropping it, the system gives it a job it can do at 11.3:1 — navy type on a cyan fill, and every progress bar in the app.
Manrope ExtraBold for display, Lexend for everything that has to be read. Nine styles, from 64/67 down to a 12px label.
An 8px unit, twelve steps. 4px allowed only for micro-spacing. Controls at 32/40/48/56, default 48.
Nothing interactive below 44×44, even where the visible control is smaller. Body text never below 16px.
Right, wrong, element category, status — each pairs color with an icon or a word. A color-blind student loses nothing.
The build canvas — where the whole product lives or dies
Every atom carries its real valence. Oxygen has two open slots, hydrogen one. Bring two compatible atoms close and they snap; try to hang a third hydrogen on an oxygen and the node rebounds and sits back down, unharmed.
Nothing is punished. A rejected bond is a fact about oxygen, not a wrong answer, and the mentor says so. That single decision is what lets the same canvas serve a second-grader and an AP student.
The toolbar is deliberately short — select, bond, erase, add, clear. Everything else is a view: 2D, 3D, Lewis dots. The molecule is the state; the views are just ways of looking at it.
The Primordial Spark — the opening arc
A points total is a number. A planet that gains oceans, then an atmosphere, then soil, then the first green is a reason to come back on Tuesday.
Each level teaches one new bonding idea, and the reward is the thing that molecule actually makes in the real world — not a badge standing in for it.
Hydrogen gas
Teaches the snap itself. One slot, one slot, done — and the first gas clouds appear.
Water
Unequal valences: oxygen holds two, hydrogen one. The oceans arrive.
Carbon dioxide
Double bonds, the first genuinely hard idea. An atmosphere closes over the water.
Ammonia
A three-way bond around one nitrogen. Bare rock becomes soil.
Oxygen gas
Double bonding again, this time symmetrical. The first green appears, and the Polar region unlocks.
The thing students are usually asked to memorise, turned into a record of what they’ve done
An element lights up the first time a student uses it in a molecule. Two of 118 at the end of Level 2 is not a failure — it is a map of how much is left.
Discovery is not mastery. An element is mastered after it has been used in more than one compound, and the panel says exactly how many more are needed.
Tapping any element — discovered or not — gives protons, group, period and valence electrons, plus the molecules this student has made with it.
The tiles use outline, fill and a tick to say discovered, available or locked. Color carries the category, never the state — the same rule the design system sets on plate 05.
Nine expeditions, four lessons each, four checks per lesson
All 108 versions live in one authored file with their answers. A build step strips the answers out for the browser and writes them into the server’s key instead.
So the app a student loads has no answer in it to find, and every pick is scored server-side. It also means a lesson cannot drift out of step with its own answer key.
One lesson — Why Water Is Weird — in its three bands: the opening line, the objective, and the instruction sending the student back to the canvas. Same molecule, same build, three different things to notice about it.
Class telemetry, built around the alert rather than the table
Twenty-eight students rebounding on double bonds is one classroom problem, not twenty-eight student problems. The banner names it, and the button next to it puts an explanation on the projector.
The count is there so a teacher can tell, in the first two minutes of a lesson, which four students haven’t got in — before it becomes the whole period.
The roster sorts by name, tier and progress, filters by name, and tags each student with the biomes they’ve unlocked — a progress bar you can read across the room.
The curriculum map and the gradebook
South Carolina’s 2021 standards keep NGSS wording but renumber it: middle-school codes name
the grade, high-school codes name the course. MS-PS1-1 becomes 7-PS1-1.
Every pairing was checked against the standards text by hand. There is deliberately no automatic conversion, because SC assigns each middle-school expectation to one specific grade and a script would guess.
On the Chromebook most of these students actually use
Every student, teacher and parent screen scanned against WCAG 2.1 A and AA, in light and dark. Laid out at 1366×768 and 1280×800 — the two common school Chromebooks — and at tablet width. Then the whole building flow played through on a keyboard alone.
It is an internal pass, not a VPAT. It is the groundwork for one.
What the product gives a technology director, and what it still owes them
Students have no email and no password. They join with a class code, type a first name and last initial, and pick a three-picture password stored only as a one-way hash.
No birthday, photo, address or school ID. One service provider. No advertising, analytics, tracking pixels or third-party fonts — the fonts ship with the app.
Row-level security on every table, with 102 automated checks proving it. Scores are written by the server, so they cannot be forged from a browser.
A data inventory listing every field, where it lives, who can see it and why — then checked line by line against COPPA and FERPA.
Five gaps that block a pilot, written down rather than glossed: no deletion, no parent export, family links without parent approval, no retention schedule, no signed agreements.
School budgets run July to June. Quotes go out in spring, agreements get signed in summer — which sets the whole build schedule backwards from there.
South Carolina first, for one unglamorous reason: its 2021 standards are NGSS with state codes, so the alignment is already visible on day one — across about 80 districts and 724,000 students, with grade 6 a tested science year. Pricing is set under the small-purchase threshold so a principal can buy a school licence without running a bid.
Where ChemQuest actually stands
The part worth saying plainly: none of the numbers on these plates are classroom results, because there haven’t been any classrooms yet. They describe what was designed and built, and what an internal pass found. The evidence that matters — whether a sixth-grader who has never liked science finishes an expedition — comes next.