Ben Elwyn

An image

Training by On

Client

  • On

Delivered

  • Software

Roles

  • UI/UX
  • Motion design
  • Development

Tools

  • Web technology
  • Web sockets
  • GLSL

Working with Hato, I built and co-designed some software for On that would orchestrate training events that ran in stores around the world.

The software consisted of two parts:

  1. The Controller that ran on a mobile device that would allow the event coordinator to setup the event, choose the exercises, and run through the whole set of rounds, eliminating and picking winners. And,
  2. The Driver, that would run on a large display creating ambience, displaying information, and synchronising the music with the exercises.

I designed the UI/UX for the Controller, while Hato designed the Driver interface. We both collaborated on designing the audio-synchronised motion graphic background.

Audio-reactive motion

During the exercise, the distortion increases and pulses in response to the music. A white band sweeps across the screen on the beat. The audio reactivity is written in JavaScript and passed to the shader to effect the visuals.

The Controller

In order to setup, trigger changes in the main display, and generally orchestrate the event, the Controller ran on full screen on a mobile device as a progressive web app (PWA). It communicated to a second device, running the Driver, via websockets.

An image
An image

Partner Agency / Design Collaborator

Hato

Back to Work