Playlist in a Bottle
Creating an interactive, in-app experience where you give yourself a musical surprise in January 2024.
Spotify’s latest experience aimed to tap into that sense of nostalgia with “Playlist in a Bottle”, an in-app and web experience that allows you to create a playlist, only to be locked away until January 2024.
We (Active Theory) partnered with Spotify to help bring their concept to life with a sticky, and delightful digital experience.
We (Active Theory) partnered with Spotify to help bring their concept to life with a sticky, and delightful digital experience.
Process
For this project, the team at Spotify briefed us with a high-level approach to creative direction and a user flow. It was our job to expand and fully flesh out all aspects of the concept and take it all the way to launch.
One major concern that the client made clear was the load-time for this experience and how it might impact the duration of the average users engagement. Overall, the Spotify team was looking for “Playlist in a Bottle” to not only match, but exceed the engagement duration and sentiment that prior the campaigns had set.
Due to the load-time concerns, the client initially requested that the experience only rely on using 2D assets, however, we felt that we could confidently support the use of 3D without sacrificing the quality or load-time of the experience.
For design, we started with a high-level sitemap to help us identify all the screens we need to design.
One major concern that the client made clear was the load-time for this experience and how it might impact the duration of the average users engagement. Overall, the Spotify team was looking for “Playlist in a Bottle” to not only match, but exceed the engagement duration and sentiment that prior the campaigns had set.
Due to the load-time concerns, the client initially requested that the experience only rely on using 2D assets, however, we felt that we could confidently support the use of 3D without sacrificing the quality or load-time of the experience.
For design, we started with a high-level sitemap to help us identify all the screens we need to design.
Motion references
This part of the process helps kickoff the motion explorations for all parts of the experience, as well as gives developers a clear guide for how movement should be approached.
I’ll usually try and use basic shapes to represent elements that haven’t been fully realized just yet, and this also helps prevent clients from focusing on the wrong things during design presentations.
I’ll usually try and use basic shapes to represent elements that haven’t been fully realized just yet, and this also helps prevent clients from focusing on the wrong things during design presentations.
Y2K Aesthetic
For 3D, the visual direction was going for a “Y2K” aesthetic, tapping into the trend of reviving 90’s pop culture references and styles. We also knew that the priority was the solidify the look and feel of the “Time Capsules”, and for added texture and visual candy, we proposed the addition of “Backing” elements.
As we started receiving soft green-lights regarding 3D, we began to impliment them into our dev environments in order to optimize the models and any shaders that would be applied.
As we started receiving soft green-lights regarding 3D, we began to impliment them into our dev environments in order to optimize the models and any shaders that would be applied.
[ CREDITS ]
Client: Spotify
Agency: Active Theory
My role: User experience, Direction, & Design
Producer: Jordan F.
Design support: Katie H.
3D: Johannes H.
Developement: Andrew A., Fransisco T., Jonatas S.
Client: Spotify
Agency: Active Theory
My role: User experience, Direction, & Design
Producer: Jordan F.
Design support: Katie H.
3D: Johannes H.
Developement: Andrew A., Fransisco T., Jonatas S.
© 2024 Aaron Kim
︎︎︎