I was asked to add a new feature to an already existed app. My app is Spotify and my task is to show what people around you are listening to.
Step 1
I started my process with research. Spotify is a very well known music app with an increasing number of 113 M premium subscribers worldwide as of the third quarter of 2019. It is one of the market leaders.
Keeping the agenda of the company in mind I have conducted some interviews asking if such a feature would be interesting to use. Would the user want to share what they are listening to? Is it easy for the user to discover new artists?
When we started our conversations, I have discovered that everyone is interested to listen music in different localities at different levels. However, because of the privacy issues, people are not much interested to share publicly their playlists or if they will, they like to share it in a more controlled environment depending on the mood. The users I have talked to are also not much interested in the playlists curated by Spotify. They would like to listen more about what the other residents are listening to. In this way, they can discover new local talents.
Step 2
I started ideate my design ideas on low-fi wireframes with the question in mind if I design such a feature, how would I blend the new feature with the corporate identity? When I started to looking around and seek answers, I came across an already existed category that Spotify offers: Top Hits Germany, by Spotify. That was the hint to took me to my concept:

Research and Concept

​​​​​​​I created 2 more categories. In that sense, users can listen to the popular pieces of music categorized by the country, city, and district. I have added that it is a mixed playlist by the residents, weekly updated. The user also can follow this channel and add them to their library.

​​​​​​​Step 3
Another focus of this week was to dig into atomic design, which is a very useful tool that helps me to communicate my design with the developers. I incorporated it into my sketch file. It creates the hierarchy of my symbols:

Atomic Design and Low- Fi Wireframes

Step 4

User Flow

​​In the next step, I have created two user flows. The first one is my main flow and the second is incorporated into the category where the country hit is located in the home.
Step 5
Hi-fidelity prototypes:​​​​​​​
If you want to see how these categories work in detail here is the second prototype:
Learnings
Pixel-perfect can be also messy on the backstage. Keep your sketch file always tidy. Do not lose the focus.
I would like to know more about geotags and if my prototype really works in real life.
Back to Top