Desk Ergonomics
A six-minute, trilingual microlearning experience for healthier desk work
ROLE
Instructional designer & developer
RESPONSIBILITIES
Needs framing, action mapping, storyboarding, visual design, front-end development, trilingual localisation, accessibility QA
TOOLS USED
Hand-written HTML, CSS & JavaScript · Three.js · glTF · DM Sans, Syne & Bree Serif · Netlify · Claude
overview
Nine screens, six minutes, three languages — a self-directed microlesson about the geometry of a desk. A concept project designed and built end to end: action mapping, storyboarding, a rigged 3D interaction in Three.js, trilingual localisation and WCAG-checked accessibility.
the problem
Desk workers already know the ergonomics advice and their setups stay wrong anyway, because posture is built by geometry — the same chair, the same screen height, the same hours — not by willpower.
A bare laptop makes that structural: the screen is bolted to the keyboard, so a correct height for one guarantees a wrong height for the other, tipping the head forward around 45° until the neck carries roughly 20 kg instead of 5.
Whatever fixes it has to survive an audience that will not sit through a compliance module and does not all read the same language.
the solution
A six-minute experience built on one idea: your own body is the measuring tape, so every rule is something the learner can check on themselves right now — no numbers to memorise, no equipment to buy.
Four of the nine screens refuse to open until the behaviour has been demonstrated: correct a slumped figure, explore all six adjustment points, open all four movement breaks, find all five errors in a desk scene. Progress cannot be scrolled past.
It ships in English, Catalan and Spanish from a single file, with a language gate that treats none of the three as the default.
My Process
The course was designed backwards from behaviour and forwards from the smallest screen. The action map came before any writing, the storyboard before any code, and the mobile layout before the desktop one.
01
Action Map
Mapped before scripting. The target outcome is traced to three observable behaviours and the practice that supports each one, keeping the scope focused on actions people can perform at their own desk.
02
Storyboard
Built as a working storyboard in Word. Each screen pairs its learning intent with on-screen copy, interaction and production notes so decisions are fixed before development.
03
Style Guide
Documented as a vector design board: palette, type roles, interface states, spacing and accessibility rules. The system separates interaction blue from achievement feedback and remains deliberately restrained.
04
Wireframes
Built at 390 × 844 first, then adapted to 1440 × 900. These low-fidelity frames resolve hierarchy and interaction without borrowing the finished course aesthetic.
05
Development
Built as one self-contained file: a rigged 3D mannequin posed through a semantic controller in Three.js, with the desk and chair measured off the body so each ergonomic rule is geometry rather than a caption. 145 translation keys swapped at runtime, gated sections, and a print stylesheet for the take-away checklist.
06
Evaluation Plan
This is a concept project and has not been tested with learners, so what follows is the plan rather than a result.
Completion would tell you nothing here, because the gates make it mandatory. The numbers worth watching are the ones the gates already produce: how many attempts each of the five desk errors takes, and which quiz question gets retried most — a spike on one error points at a scene that is not readable, not a learner who is not paying attention.
The real measure sits outside the course. The take-away checklist is the intended artefact, so the question is whether it gets printed and whether a desk looks different a week later.
Takeaways
Building mobile-first was non-negotiable: the 3D mannequin interaction needed to work on a 390px viewport before scaling up, which forced every layout decision to earn its space.
Action mapping before scripting kept the scope honest. Every screen traces back to an observable behaviour; screens that couldn't justify their existence were cut early.
A single-file architecture simplified deployment and localisation but made version control harder — next time, a build step that merges partials would give the best of both worlds.
