Social UI Concept for Spotify
I remember trying out Spotify almost seven years ago when it first came to the United States. Although I didn’t really understand the service initially— compared to iTunes or Pandora — Europeans seemed to love it, and there was something special about the product and its introduction in the US. I quickly discovered the magic of being able to search for a song, then play it immediately. Spotify has shown to consistently provide a music experience like none other, and it’s easy to forget what music was like before it.
For a music service, having an intuitive app that draws users to find and play music is key. However, pressing “play” is usually followed by the device being put to sleep, then stowed away in a pocket or bag. Consequently, music services face a unique design challenge in customer engagement: might the product itself draw interest when the content is available everywhere? Spotify’s success with features like Discover Weekly demonstrate its ability to offer unique, delightful experiences, but I’m sure they can do more.
As a designer who’s constantly using Spotify on my iPhone, I’ve often considered opportunities within the app. When I was preparing my portfolio for my design school application, I wanted to include an interactive piece. So I began to explore some concepts for the Spotify iPhone app as a personal project.
After jotting down various potential features, I found that most of my ideas related to navigation and social features. I sketched out multiple solutions for navigation, however when considering the complexity of information architecture, I was rather overwhelmed. Ultimately I found the scope of social features more practicable and intriguing, so I decided to implement some of my ideas. Spotify has been a social product from the beginning, and it’s gained a reputation based on that.
What to Design Where
I wanted to integrate the “Friend Activity” feed into the mobile experience, which was long present in the desktop app. I saw the feature as akin to social media stories, which have become pervasive across services. People love seeing what their friends are doing, and music is an inherently social experience.
The question was where such a feature would be included in the app. I realized that Now Playing could be perfect, since it could showcase the music both you and your friends are listening to. Additionally, Genius’s “Behind the Lyrics” was introduced shortly before I began to work on the project. Although conspicuous, I found its integration somewhat odd, accessing by swiping up or down on the album artwork.
I imagined a new now playing view which included Up Next, Genius, and Friend Activity. After exploring the new user flow on paper, I was finally ready to start work on a digital design.
Concept for a Prevalent Brand
When designing for an existing, well-known product like Spotify, I knew it would be essential to make interactions feel completely Spotify. This required close adherence to branding guidelines and the use of existing interface elements. I also wanted to end up with a refined prototype, one I could use for future ideas as well.
So I re-created the entire Now Playing user interface in Sketch. The most time-consuming elements were certainly icons, which Spotify redesigned after I had already finished the previous set. Luckily, the fresh icons were definitely an improvement and easier to draw again.
Sketch proved to be an excellent tool throughout the process, especially when it came to features like nested symbols. They made documents incredibly organized and allowed icons to be seamlessly switched on individual pages.
New Screens and Gestures
The normal Now Playing screen would remain the same, featuring large album artwork and central controls. The new view would provide full music controls, but invite users to stay and interact with the app. I combined the three new screens into tabs, a UI element which Spotify has periodically used across platforms. I also added a share button in this view, as it’s intended to be conducive to longer interactions and encourage social behavior. With preliminary designs for each of the new screens, I was ready to work on a prototype.
I considered several ways the new view could be revealed in the existing interface; it seemed sensible to use the familiar, top-right button, which already signified Up Next. I wanted to add an additional, swipe-up gesture, allowing users to quickly get to the new view. Then, each tab can be tapped, or swiped horizontally between.
Creating a Prototype
Prototyping tools come in every shape and size; for this project I started with InVision for a simple walkthrough, but I quickly sought software for higher fidelity. Flinto for Mac integrates nicely with Sketch, and its transition and behaviors tools enable very simple or complex animations. Throughout early prototyping, I invited friends and colleagues to try out the new design; it was great to see them immediately use the tabs and scroll through the Friend Feed, sometimes unaware that it wasn’t the actual app.
The prototype I ended up with felt great, and it included all the features I had intended. Familiarizing myself with a new prototyping software was an objective from the beginning, and it was exciting to see what I could do with Flinto. In reflection, I realize the benefit of spending more time with low-fidelity mockups: with multiple, less-refined prototypes, big changes can be made quickly if necessary. In the future it might be interesting to further rethink the overall visual experience of Now Playing (as Spotify has started doing with its top playlists like Rap Caviar).
Takeaways
This concept interface better connects users with each other through music. Social networks can be hugely successful because they do just that, while the platform fades away. This project definitely gave me an appreciation for the complexity of large, cross-platform services like Spotify, where so many sacrifices are made to ensure a cohesive experience. I really enjoyed this project, and I’m so excited for the rest of my time in design school, where I can take risks in exploring the future of interaction design.
See the finished project in my portfolio!
Thanks for reading! If you found this interesting, let me know by sharing some 👏 or a response below. I’d appreciate your feedback!
