TrackPacer

cover image

TrackPacer is a digital "track rabbit" that helps competitive runners train harder. It's a controllable beam of light that orbits a 400 meter track, illuminated by thousands of LEDs and driven by Arduino-compatible microcontrollers. Coaches and runners control the pace, distance, and intervals of the pacer using an iOS app.

After a React-based prototype had been created, I was brought in to design the user interface. This included:

UI Design

Sketching, interaction design, prototyping, and final art production.

Feature Definition

Planning and design for enhancements like saved workouts and a wearable app.

Runners chasing TrackPacer.

The app

The main screen displays workout stats like distance, pace, and intervals.

Circling the perimeter of the screen is the track. The pacer orbits this in real-time, offering additional feedback to the coach — important in bright conditions when the pacer may not be easily visible from afar.

Buttons appear and disappear, depending on the state of the track.

Controls for editing and changing workouts are shown only when the pacer is paused. While helping simplify the interface, this decision serves a more important function—it protects against inadvertent changes to settings in the midst of a workout.

Changing settings

Users can swipe between predefined distance settings or enter one numerically. A custom keypad guards against invalid input and makes choosing units easy. Pacer color can be tuned for best visibility in changing light conditions.

Requesting and transferring control among users.

Requesting and passing control

Inevitably, multiple users will try to use the system simultaneously. A user who wishes to use the track can request control. Doing so messages the current “owner” who can choose to pass control or ignore the request.

Requesting and transferring control among users.

Detaching from the track

While control of the track is released when the owner walks out of range, she can also do this manually. Pulling the screen down past a certain point—in essence, away from the track—disconnects the app from the track.

An animated icon depicting a plug pulling away from a socket provides feedback where this threshold lies. The track UI dims to draw attention to the message.

Detaching from the track.

Companion app

The simple UI was easily translated to a wearable form factor. This natural extension allows a coach to start and stop the pacer with a tap. Saved workouts can be changed with a swipe.

Apple Watch companion app

Case study

Our corporate site was in the midst of a redesign, but we wanted to tell the story of creating TrackPacer in an engaging way. I collaborated on the design of this one-off case story page with Billy French.

case study page

Credits

Agency
Viget
UX & Visual Design
Todd Moy, Billy French, Joseph Le
Hardware Design, Fabrication, and Software Development
Lawson Kurtz, Justin Sinichko, Eli Fatsi
Front-end Development
Ben Tinsley