Turning Spotify Upside Down

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?”

Stranger Things TV Screengrabs
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

--

--

--

Multi-disciplinary design and artist based in London, Paris, and Stockholm

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Civic Hall Toronto: Behavioural Insights Training Recap

How I got unstuck in creating my first design portfolio

How to ASK your users & convert them delightfully?

Claire Richards: “Don’t be afraid to follow what you want to do, even if you are intimidated by…

3 Hour Feature Design: Crowdskout

Zumper Redesign: Roommates and Reviews

Kerning is the space between specific characters.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrea Limjoco

Andrea Limjoco

Multi-disciplinary design and artist based in London, Paris, and Stockholm

More from Medium

Green Tech: Fighting Wildfires with Innovation

22, We’re Graduate, and Still Don’t Know What Should We do

Three lessons learned from running a startup — Interview with Anna Rapp, CEO at Layke Analytics

Architects the prisoners of dilemma