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.
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.
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.
- The interaction works by tapping and holding the back arrow button for about 3 seconds or so. The search screen will show up.
- Tap the search bar.
- Once tapped, the prototype begins to type the artist name till a search result appears.
- 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.
- 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: http://share.framerjs.com/aqzlbalfbxvl/