As the proverbial dust settles on our annual Wrapped campaign, we’re reflecting on how it came to life — not just figuratively but also literally, in a motion design sense. Wrapped is a massive project with countless moving parts but today we’re honing in on some of the visual details by asking UX Motion Designer Ade Omole about what goes into animating many of the campaign’s playful data stories. Learn about how Ade mapped out his work, the feedback and crit processes, the highlights and, of course, some challenges along the way. Let’s get moving!
Firstly, can you tell us a bit about what you do at Spotify and what your brief was for 2022 Wrapped?
I’m one of Spotify's few UX Motion Designers and my role consists of developing motion theory and animation solutions for user interfaces and experience challenges. On the odd occasion, I also imagine, direct, and edit vision videos for internal teams.
The brief for 2022 Wrapped was to take the toolkit that Brand & Creative had created and develop motion templates for the Wrapped data stories that live in the mobile app. The toolkit supplied broke down the character of the shapes, formation of the monograms and design principles. which helped clarify the direction of the motion design. Additionally, we had to level up the user experience and push the boundaries of how we technically achieve that in 2022, to open more opportunities for years to come.
Toolkit provided by Brand & Creative team.
How did you map everything out? What was your approach to transforming your thoughts/ideas to motion?
I normally start by trying to immerse myself in the latest designs and the journey the product designers took to get there. At this point, I can start researching motion styles or vibes and then begin to create explorations. This is my way of getting thoughts into visual documentation, it helps me talk through ideas and concepts with others as well as create a reference point for later stages of design.
My additional high-level motion principles and some initial exploration with the monograms.
What was the most challenging part of the process for you? What takes up the most time?
The most challenging stage of motion design for a product is when the design team is caught between speccing and designing, meaning several vital screens are not finalized for development. At this stage, you’re normally trying to apply the motion parameters to the design at hand to stress-test it and see where improvements can be made. However, designs are still evolving.
In the case of 2022 Wrapped, once we had established designs and animation, the team had to ask themselves; What would deliver the best user experience? The answer was to implement the animation using Lottie. This made speccing and implementation the most challenging, as this was the first time we relied on using Lottie animations as the foundation for animation in the Wrapped experience. We took After Effects animations and converted them to JSON script (Lottie format). We had to do additional work to uncover all the bugs in the design structure that could cause the experience to fail, as well as meet an additional set of technical requirements. While it took more time, it was worthwhile because it improved the motion and made it more flexible.
Entry cards on the home shelf created by Ade Omole, Julia Wong, and Aaron Harmon. Supplied as Lottie animation for the product experience.
What does crit look like for animation and motion work?
During the Wrapped design process there were many formal and informal crits. I think there’s always a slight misconception when it comes to providing motion critique. Designers tend to review it separately from UI/UX, when in fact the two should be judged with the same measuring stick. For a UX Motion Designer, the expectation is the same as a crit for UI/UX critique: “What problem is this solving?” “Is there a better way to reach the solution?”
From here, it's easy to open the floor to debate, opinions, and perspectives. Every other day of the sprint I would share motion explorations and progress with the product design team. Due to this being more of an expressive brief, conversations revolved around brand and style.
How did you work with engineers? What was some feedback you received that was really helpful during this process?
Working with Spotify engineers is one of the most rewarding parts of the motion design process, as everything starts to come together. I learned something new about the build capabilities and I got involved in technical solutions to solve visual challenges.
In the final stages, I scheduled one-to-one sessions almost daily with the engineers who were building the data story templates. In these sessions, we went through the build with a fine tooth comb and I designed improvements whilst they applied improvements there and then. This allows for an instant fix for many small bugs or design challenges.
Data story intros supplied as Lottie animation for the product experience.
What did you enjoy most about working on Wrapped?
Two things made working on 2022 Wrapped a dream come true. Firstly, the fantastic teams I got to collaborate with, the people in Brand & Creative, product, and engineering all made the experience great and the work easier. Secondly, it was the opportunity to lead Wrapped to a place it had not been before by using Lottie animation over native. This allowed for more fluid and flexible animations within the product which put the control of animation into the hands of the design team, meaning we only relied on engineering for implementation.
This was a proud moment for me because, as simple as the animation templates were, being able to successfully get this into the hands of millions of Spotify users completely blows the door open for more dynamic and complex animations in 2023 Wrapped! We hardly scratched the surface.
This is also a proud moment for the team as ideas, inspiration, and even some motion design reinforcements were key to getting this delivered.
A huge shout out to the team who worked on this rollout:
Chloe Wood, Associate Principal Designer
Bruno Borges Brand Design Director
Josephine Tan, Art Director
Myles Robinette, Senior Motion Designer
Belen Tenorio, Ashley Moody, Julia Wong, Aaron Harmon and Vandana Pai, Product Designers
Also a massive shout out to all the engineers who made this possible, thank you.
Credits
Ade Omole
UX Motion Designer
Ade (pronounced aa-deh) was born and raised in London, UK. When he’s not designing, he enjoys NBA basketball, travel, and church.
Faith supports the Spotify Design community by editing, writing, and curating stories on the blog. When she's not adding to her long list of favorite words, Faith leads yoga classes and sound baths around London.
