November 2017 Junction 2017 Visit Website

Spotify Crowd

Role

Front-end Designer & Developer

Project Type
  • Ambition
  • Web
Knowledge
  • UX Design
Skills
  • CSS3 Animation
  • Framer
  • Sketch
  • Spotify API

At Junction 2017, the biggest hackathon of Europe, Spotify gave us the challenge of using the Spotify API to create something new and exciting. The result of 48 hours of hacking: Spotify Crowd, a whole new product and revenue stream for Spotify.

The idea

Spotify Crowd allows owners of bars, cafés and pubs to manage the music in their venue effortlessly. The system works by intelligently mixing the source playlist of the venue owner with the music preferences of the people present at the venue. This way the music will be different every night, and everyone will feel right at home. The venue owner can see at a glance what the crowd is like, make changes to the algorithm, and accept or deny song requests from people who are present at the venue.

The execution

We created a prototype web app and an app mockup containing the new feature. The web app was fully functioning: it allowed people to log in, influence the music mood and make requests, and even control Spotify through their browser.

My role was creating the design of the interface and I helped with the technical implementation of the web app. Because we intended this to be a feature by Spotify itself, I studied the Spotify brand guidelines and created an interface in Sketch en Framer that matched their style. The Spotify judges even remarked that the design was indistinguishable from Spotify itself! The glanceability of the system was important: a venue owner had to quickly see what the playlist was like. The three pane design communicated this clearly.

This hack was a fully implemented crowd music app. This hack was really well designed (it felt like Spotify) and worked very well.

After the design was done, I made it into an HTML + CSS mockup. I paid attention to creating a reactive user interface: buttons had to light up when you hovered over them with your mouse, and the foldout menu had to animate smoothly and nicely.

The result

We ended up becoming the winner of the entire Entertainment track, which Spotify’s challenge was a part of. Spotify also wrote a blog post about it!