A self-initiated concept: point your phone at any gym machine, and the app tells you how to use it and builds it into a personalised program. The design challenge was making something genuinely usable in the worst possible UX environment - a loud, bright gym, with sweaty hands and a phone at arm's length.
The problem
Most fitness apps assume a calm user and a perfect screen. Reality is glare, motion, and split-second glances between sets. A scanner-driven tool only works if the interface is legible in a fraction of a second and forgiving of imprecise taps.
The process
Designed high-contrast and dark-first, so the screen stays readable under harsh gym lighting and at arm's length - the same contrast discipline that satisfies WCAG 2.1 AA, used here because it is simply better UX.
Oversized, thumb-friendly touch targets for use mid-workout, with one clear action per screen.
A scan-to-program flow that turns a piece of equipment into a structured routine in a couple of taps, removing the blank-page problem for newcomers.
Stack: React and Tailwind, designed in Figma, deployed on Cloudflare Pages.
The result
A working concept that shows accessibility constraints - contrast, target size, focus - are not a compliance tax, but exactly what makes an interface survive a real, messy environment. Built as a demonstration of dark-mode-first, accessibility-led product design.
A high-contrast, dark-first concept app that scans gym equipment and builds a personalised program - accessibility-led UX designed to stay legible in a real gym environment.