AB Designs

Interactive job instructions

Job instructions rebuilt as an interactive page: every step with its key points and reasons, photos that enlarge, and the matching 3D setup video one click, tap or QR scan away.

Role
Design, build, content
Discipline
Training · Web
Built with
HTML, CSS, JavaScript
Pairs with
The time-pressure setup guides
The project

What, how and why, with the video beside it.

A job instruction lists each step, its key points and the reasons behind them. This version keeps that familiar table but makes it work on a screen: photos enlarge on click, the page scrolls step by step, and a full-screen mode suits a shared display.

Every instruction carries a QR code. On a computer it opens the full process video, on a touchscreen a tap does the same, and on a printout a phone camera gets there. The videos are the animated time-pressure setup guides.