Designing motion-driven interaction to make AI discovery experiential
Q2 2024 - Launch
KKCompany
Product Design
Motion Design
User Research
PM*1
Engineering*2
Design*1 (Yit)
[Context]
Repositioning AI playlists as an engaging core experience
KKCompany is an AI-driven music streaming platform with over 2 million paying subscribers. Yet engagement with AI playlists was declining, as users increasingly relied on manual search over algorithmic discovery.
I led the 0–1 design of a motion-driven AI playlist experience that transformed a black-box recommendation into an experiential discovery journey. Post-launch surveys showed a 75% satisfaction rate, indicating strong early user reception.
[Discovery]
#1 Users experience high cognitive load when navigating AI playlists
Through interviews, I found that users felt overwhelmed by the number of similar playlist options. The need to compare titles, covers, and descriptions increased decision fatigue, discouraging exploration.
#2 Playlist covers lack visual balance
Unlike competitors that mix graphic and image-based covers, our reliance on album art created visually repetitive layouts, making playlists harder to distinguish at a glance.
[Solution]
From browsing to instant exploration
Through co-design workshops with users, we explored alternative discovery patterns and validated a one-tap, interaction-driven refresh concept. This direction shaped the final interaction and visual experience.
Motion as a visual language
To replace repetitive album imagery , I defined a motion-based visual language for AI playlists, introducing rhythm and progression to discovery.
From text to artist portraits
I replaced text-heavy descriptions with artist portraits, enabling quicker listening decisions through visual recognition.
Smoothing the recommendation transition
I introduced a brief visual progression during playlist generation, replacing an abrupt result with a smoother transition and a sense of unfolding.
[Delivery]
A motion-driven AI playlist experience
The final experience integrated interaction, visual language, and staged transitions into a cohesive AI playlist feature. Inspired by the brand concept “Listen, and be heard,” the design transformed static results into an experiential discovery flow.
[Reflection]
Designing for perceived time, not actual duration
Testing revealed that users have very different tolerance levels for animation timing. Rather than focusing on visual appeal, I prioritized whether the experience felt smooth and free of waiting. Through iterative testing, I found that keeping the full generation sequence within four seconds maintained rhythm without making the interaction feel slow.
Prototyping as an alignment tool
Establishing a motion-based brand voice was more complex than extending a color system. Motion communicates tone, not just visual effect. To drive alignment, I created rapid prototypes and facilitated structured feedback sessions, allowing stakeholders to experience different directions firsthand. This process ultimately helped define and solidify the product’s motion identity.
Thanks for reading.
