How we Brought 2020 Wrapped to Life within the Mobile App

Brand ↔ Product

A key a part of working as a product designer on Wrapped is making certain that the app expertise for cell not solely aligns with the better model marketing campaign — which is led by our Brand and Creative crew 12 months after 12 months — but in addition efficiently interprets key visible components in order that they’re scalable and buildable. For us, scalability means ensuring all the things seems and feels good throughout each cell machine for each single Wrapped consumer. Build-ability goes past time and sources and contains how we use our Encore design techniques, in addition to how designers pair with engineers.

Scalable: Reflected Imagery Effects

When you open Wrapped in your cell machine, you’re met with imagery of a few of your prime artists — mirrored and in movement to create a kaleidoscope impact. While our model crew may manually manipulate imagery, we needed to create one thing automated for the cell expertise, that will pull in photographs of any consumer’s prime artists. So, we examined some photographs, and created some guidelines. 

At Spotify, we care deeply about preserving the integrity of photographs that symbolize artists, so we created a rule that when reflecting imagery, we’d use solely photographs chosen by artists themselves for his or her Spotify profile. We would exclude issues like podcast covers and album artwork as a result of, as you may see within the above instance, photographs that characteristic textual content turn into very muddy and complicated when mirrored and repeated.

When creating the kaleidoscope impact you see in Wrapped, we needed to develop a sort of animation that will be possible for our engineering crew to construct. We had been capable of prototype an answer that’s visually dramatic, however pretty easy to implement. Here, you may see how the animation is damaged down. We use 4 picture masks, with the internal photographs initially offset in the direction of the internal nook. We then transfer the photographs in the direction of the outer nook – creating that easy kaleidoscope impact.

Scalable: 2020 Wrapped Gradient

Another central element of 2020 Wrapped was the brand new gradient our model crew crafted, that includes a lot of our Spotify model colours in a stupendous array. The problem right here was to translate our model crew’s easy, editorialized gradient for cell areas. One means we achieved this was by including a blur on prime of the gradient. The blur is added in as a share worth, which adjustments relying on how massive the gradient is (bigger gradients have an 80% blur, the place smaller gradients have a 40% blur)! This helps guarantee the colours keep brilliant when the gradient scales down on smaller gadgets.

Buildable: Wrapped & Encore

An enormous a part of what makes Wrapped scale so seamlessly is our use of encore parts and types. Every 12 months, Wrapped provides designers at Spotify the chance to evolve and discover our model, and take it in new instructions for the standout marketing campaign second. That being stated, now we have to be sensible about how we discover new model visualizations whereas nonetheless sustaining consistency and protecting Wrapped inside engineering capability. This 12 months, we determined to make use of textual content types and animation curves outlined by our encore cell techniques. By utilizing these established components, we weren’t solely capable of construct sooner, however we may add a contact of familiarity to how issues moved inside Wrapped. 

A brand new strategy we tried out this 12 months was utilizing a Google Sheet to create movement specs for animations inside Wrapped. By adopting this technique, we had been capable of talk higher with our engineers, in addition to specify which Encore easing curves had been for use per component. 

Looking forward

As we stay up for 2021 Wrapped, we’re already beginning to consider how we will improve the expertise. We wish to enhance scalability and implementation, in addition to accessibility and inclusivity. As the crew answerable for the cell Wrapped expertise, our goal is to proceed pushing towards the aim of making a Wrapped that may be loved and celebrated by each single Spotify consumer. 

To be taught extra concerning the varied groups that contributed 2020 Wrapped head to the Spotify Engineering weblog to learn 2020 Unwrapped: The People Behind the Numbers.