Designing a Timer That Knows When to Stay Quiet

BoxBeat began as a workout timer. But timing a workout and supporting the person completing it are not quite the same thing.

We wanted the product to feel like a training companion rather than a timing machine: capable of offering encouragement, intensity, or relief at the right moment without becoming distracting, patronising, or simply annoying.

That turned out to be considerably harder than expected.

Support has a timing budget

During physical effort, attention is limited and time feels valuable.

A supportive moment therefore had to arrive at precisely the right point, communicate almost immediately, and fit naturally within the rhythm of the workout. It could not obscure essential information or create the impression that the application was taking additional training or recovery time away.

This created an unusual design constraint: emotional support could not simply be inserted wherever the interface had room for it.

The timer still had one non-negotiable responsibility—communicate time and workout state clearly. Any emotional layer had to strengthen that function without competing with it.

Two different training companions

We explored this idea through two characters with deliberately different roles.

Jaro, the jaguar, represented courage, strength, composure, and forward momentum. He could be demanding and occasionally pushy, but needed to remain sympathetic rather than aggressive. His authority was intended to feel calm rather than loud.

Luma, the hummingbird, represented flow, lightness, breathing, and release. She was the counterbalance: a reminder to soften, recover, and allow effort to become lighter when additional intensity was no longer useful.

Their personalities needed to be understood visually before either character moved or spoke.

When the eyes change the character

Jaro was constructed as a polygonal character in a full-face frontal view. Restricting the perspective reduced some of the animation complexity, but it did not make the character easy to resolve.

His eyes became the central problem.

In the early design they were too large and too round. Jaro appeared friendly and approachable, but lacked the composure and authority his role required. He did not yet feel like a character whose direction would carry weight during a difficult training session.

Animating him amplified the problem. Movement did not correct the underlying character—it made the unresolved qualities more visible.

The experience produced a practical rule:

If the static character does not already communicate the intended personality, animation is unlikely to rescue it.

From an AI-assisted image to an animated character

The production workflow crossed several tools and representations.

We began with an image created with the help of AI to establish the basic character. The character then had to be reconstructed as layered polygonal vector artwork in Adobe Illustrator. Those layers were taken into Adobe After Effects, animated, and prepared for use in BoxBeat through Lottie.

Each transition introduced additional work.

An image that appeared convincing as a still was not automatically suitable for vector construction. Vector artwork that looked correct in Illustrator was not automatically organised for animation. An animation that worked in After Effects still had to survive export and integration into the application.

Jaro was somewhat easier to animate because we restricted him to a frontal view. Luma presented a different challenge. Her polygonal construction needed to communicate the lightness and fluidity of a hummingbird, while her face and wings still had to remain coherent throughout the movement.

The artwork remained fundamentally two-dimensional. Creating convincing changes in volume, perspective, and expression would have required a substantially more sophisticated 2D rig—or a move to a three-dimensional character workflow. Neither was proportionate to the role the animations needed to play in BoxBeat.

The apparent simplicity of a brief character moment concealed a long production chain: concept, expression, vector construction, layer organisation, motion design, export, and application integration all had to work together.

This refined the earlier lesson:

Validate the character in a static image—and test its smallest meaningful movement—before investing in the complete animation workflow.

The three stages below show how an AI-assisted image became a usable animation. The original visual direction was reconstructed as editable vector artwork, prepared and animated in After Effects, and exported through Lottie for integration into BoxBeat.

Characters must belong to the product

A character can succeed as an illustration and still fail as part of an interface.

Jaro and Luma needed to belong to BoxBeat’s visual language: its typography, colour, movement, intensity, and overall tone. Otherwise they appeared attached to the product rather than originating from it.

This was not merely a styling problem. A character from a different visual world can weaken the coherence of the entire experience, even when the character is well executed on its own.

The question was therefore not only whether Jaro and Luma were appealing. It was whether their presence made BoxBeat feel more coherent, useful, and supportive during training.

Resolving Jaro’s expression was only part of the process. The full-colour character still felt visually separate from BoxBeat’s restrained interface. For the final application treatment, the palette was reduced to black, grey, and white, with light purple retained in the eyes. Jaro became quieter visually while preserving the stronger, more composed expression.

Finding the context where animation belonged

The complete companion concept was ultimately reduced rather than forced into the active timer.

BoxBeat remained, first and foremost, a timer.

Jaro remained in the application as a frontal face in two carefully selected moments: the get-ready countdown and the workout-finished view. Both were existing transition points. His appearance therefore introduced no additional waiting time, interrupted no exercise, and demanded no response from the person training.

Jaro and Luma also remained part of the onboarding experience, where there was more space to establish their different personalities without interfering with a workout.

Two completed Lottie animations of Luma were retained in onboarding. In the opening screen, shown below, she flies into view and lands on a kettlebell. A later screen pairs her with a full-body Jaro—the finished movement from that scene appears in the production workflow above.

Onboarding gave the animation something the active timer could not: attention without urgency. The user was not in the middle of an interval, waiting for the next exercise, or protecting valuable recovery time. Luma could introduce the lighter side of BoxBeat without delaying a workout or competing with essential information.

Knowing when to stop

The exploration was not wasted because the original concept was reduced.

It clarified what the product needed—and what it did not.

During onboarding, character animation could introduce personality. During training, the timer needed to remain clear, immediate, and quiet.

A useful training companion does not provide the greatest possible amount of encouragement. It understands when encouragement helps, when it interrupts, and when silence is the more supportive choice.

Sometimes disciplined product design means refining an idea.

Sometimes it means giving the idea less space.

And sometimes it means letting it go.