Turning Spotify Upside Down

How collaborative design and engineering brought the Stranger Things experience to Spotify. Get ready for some nerdy design talk.

The products I usually design are very methodical and involve careful planning, multiple design sprints and a large number of people to bring them to life. This particular project followed a different process, one that was more experimental and playful in its development. For starters, there were only two of us working on it. And, if I remember correctly, we had just about one week to deliver the final product.

Researching and designing an eerie feeling

“What would The Upside Down look like inside Spotify?”

We worked with the team at Netflix to set the tone of what we wanted to make. We based our initial designs from this mood board.

I sketched a few ideas to begin with and this specific design had the feeling we want to capture.

We wanted to develop the feeling the characters had when they entered The Upside Down world: eerie, scary, and cold.

With this in mind, we surfaced a few elements that we used as the basis of the design: particles, texture, and light. Combining these allowed us to create a three dimensional and textured space in an otherwise flat UI.

Element 1: Particles ✨

Studying how particles moved in a 3-D space allowed us to recreate the same slow and spaced-out feeling that the show elicits. We played around with the movement, sizes, and shape of the particles. The particles had to move randomly and naturally too. Sergey Basheleyshvili (the Lead Engineer on this project) prototyped this in-client on the fly!

Right: Mimicking the light movement and shadows was the most complex part of the build of this design. (Image courtesy of giphy.com) // Left: The particle tests that we did to mimic how the particles moved in space.

Element 2: Texture 🌌

The Upside Down is supposed to make you feel cold and claustrophobic. We spent a lot of time playing with different shades of blue and textures until we had the exact cold and claustrophobic feeling. We wanted the environment to feel like you’re walking through The Upside Down.

We had to recreate a 3 dimensional space within a flat UI

Element 3: Light 🔦

Stranger Things used light to create an eerie atmosphere when the characters are in The Upside Down, which is a visual effect I love. Using the roving flashlight was central to this, creating tunnels of light offset against the eerie blue shadows.

(Image courtesy of giphy.com)

We also added a flicker effect that you see frequently throughout Stranger Things. We then layered shadows, highlights and colour grading to create the flashlight effect.

We tested the angle of the light and how the source behaved when pressed.

Collaboration and experimentation

The super power of close collaboration between a designer and an engineer

Sergey is a dream to work with. He had already started building the skeleton before I delivered the final design. The design and build process for this project was truly collaborative and experimental, with plenty of back and forth between the two of us. I was tweaking the design and he was tweaking the build right until the end.

When a bond and trust exists between a designer and an engineer, magic happens.

I sketched my ideas on paper.

Sergey quickly prototyped the ideas in client. Proof that he is a designer at heart.

Delight in the details

There are many nerdy details that went into this design. For example, we planned every single particle: how big each one was, how fast it moved, the gaps in between, how many there were, and what kind of air it would be floating in.

The project made me reflect on how much I miss working with this side of design: design that’s experimental, textured, emotional, even skeuomorphic! Simplicity and minimalism is the norm in product design these days. While I like that approach, it’s nice to go back to a more playful side of design. It’s something that’s harder to measure with numbers but the emotional reaction that people have to it is as pleasing and valuable as moving any metric.

If Sergey Basheleyshvili had a social media presence, I would tag him here. But he is cooler than all of us. He used to be an Android Engineer at Spotify and none of this would be possible without him.

Thanks for reading, design nerds! — A