Athly
B2C
Interaction Design
UX Design
Startup
AI-Assisted Coding
World-Building
role
Product designer
React prototyping
Interaction design
UI and motion
Sound design
Results
Established the interaction patterns, motion language and presence systems that informed Athly’s flagship voice mentorship experience.
Built a high-fidelity React prototype using existing system constraints to simulate production-level implementation fidelity
Tools
Figma
React (prototyping)
Cursor
Framer
Timeline
1 week
May 2026
I led a one-week design sprint focused on Athly’s voice mentorship experience. Working from a founder-led brief that defined the user objective but left the interaction approach largely open, I developed a high-fidelity React prototype that established the visual language, motion principles and interaction patterns for the product’s flagship touchpoint.
The problem
Most AI voice experiences optimise for speed and clarity rather than relational depth, which results in conversations that, while functionally correct, often feel emotionally flat. This makes it difficult to sustain the sense of interacting with a real mentor, in large part because there is no consistent or engaging link between what is being said and how attention, timing and emphasis are experienced.
The solution
I designed Athly as a single living system where every element responds to shared timing across dialogue, visuals and audio. Motion, lighting and atmosphere are derived from speech structure and emphasis, so every shift feels like a direct consequence of what is being said. This keeps the athlete continuously present and turns the interaction into a reactive, coherent coaching experience.
Key constraint
Limited AI video generation: videos could depict the likeness of a pro athlete, but couldn't sync up with speech. Working constructively within this constraint became a central design challenge.
Core flow
sound off
restart
sound off
restart
sound off
restart
Prototyping approach
A single, central timeline
Speech timing, word boundaries and focus segments act as the backbone of the experience. Captions, camera movement, lighting, audio mix, particles and UI visibility are all derived from this shared timeline and directly tied to dialogue. The result is an interface that feels responsive and led by conversation.
Focus as a perceptual field
The system layers independent behaviours – zoom, edge blur, vignette, ambience ducking, particle flow, UI visibility – that resolve into a single coherent focused state. During key coaching moments, the periphery softens, the athlete brightens, the room quiets and the UI recedes, cues that subtly guide the user's attention.
Voice as a lighting instrument
The real-time RMS signal (or average loudness) from the athlete's dialogue drives lighting brightness, particle emission and vignette intensity, with smoothing applied to ensure a natural response. As a result, emphasis in speech is mirrored in the athlete's external world.
hang up
complete session
Two emotionally distinct exits
The call has two possible exit paths. A natural end plays out with a one-second pause, outro sound, gradual UI exit and the ambience carrying through into the session recap, to reinforce continuity and closure. A manual hang-up cuts the ambience immediately and routes straight home.
Built for implementation fidelity
After conceptualising the interface in Figma, I implemented the prototype as a high-fidelity React call simulation, constrained to the product’s existing stack to reflect production-level implementation conditions.
In summary, the design approach I took treats a digital conversation as a single unified experience, where every layer – lighting, sound, motion, captions, UI – reacts to the same dialogue-situated moment. The net effect reiterates Athly's core value proposition, that talking to an athlete should feel like being personally immersed in their world.
Post-call state
Curating insights rather than dumping an entire transcript on the user mattered because it avoided the risk of cognitive fatigue immediately after an emotionally charged session. Prioritising selective memory over exhaustive recall gave sessions a more concrete bookend imbued with meaning, rather than asking users to rescan for salience themselves.
Ending on an emotional high, backed by quotes and insights, gives the session a greater sense of closure and meaning and works to form a feedback loop, encouraging repeat use.
from the client
Testimonials
Thomas Auld
Co-Founder, Athly
© 2026 Joseph Cholakyan