Spotify Power Search

I wanted to take some time in learning Framer (FramerJS), an interactive high-fidelity prototyping tool. What if we can search for a band, track, or playlist quicker on a app called Spotify?


At the time, on the Spotify app, it would take about three steps or more to get to the search screen so that I can choose a particular artist, track, or playlist. Ideally, I would love to get to the search screen quicker so that I can begin jogging, or to start driving my car to get some errands done around town.

Learning Framer

Back in April 2016, I took a Framer workshop at the Creative South conference in Columbus, Georgia.  A workshop done by George Kedenburg III from Facebook. The workshop made me think on how to add this great tool to the design process so that I can communicate interactions better with people. 

Using Sketch

I started to take screenshots of the Spotify app of the transitions of how it should work. From the workshop, I learned that it's important to set up the layer names, and position the layers as best as you can before importing to Framer.

Working with Framer

The example below is a prototype on how the interaction can work. The goal in this prototype is to change the music to an artist called Depeche Mode.

  1. The interaction works by tapping and holding the back arrow button for about 3 seconds or so. The search screen will show up. 
  2. Tap the search bar. 
  3. Once tapped, the prototype begins to type the artist name till a search result appears.
  4. Tap on the artist name Depeche Mode. Keep in mind that this part of the interaction is automated. In actual use, the user can type in or use a speech to text recognition feature found on mobile devices to play the track he/she wants to listen to. 
  5. The interaction is then complete.

A big thank you to George for the Creative South workshop on learning Framer. A big thank you as well to the Framer Community in helping me understand further about making this example work.  

Full Screen Example: