<p>Published on <a href="https://blog.prototypr.io/what-if-spotify-had-stories-9471a1464bd1?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Andres Arbelaez <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VQFZ3FI7o5RKuuCnJVs62w.png"></p>
<h3>Context 🔍</h3>
<p>On Spotify’s Desktop app, users can navigate a sidebar that shows their Friends’ listening activity. The sidebar looks like this:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UNNU9QwB9syb4pRz2dZy1Q.png"></p>
<p>This is an awesome feature that distinguishes Spotify from its streaming competitors. I am an avid user of the Spotify desktop app and the Friend activity feature.</p>
<h3>The Problem 🤔</h3>
<p>The Friend activity feature is not available on Spotify’s mobile applications, despite demand from its users. Below is an idea from Spotify’s Live Ideas forum, where people can suggest improvements to Spotify. This idea has received 734 votes since it was suggested in mid-2015.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*i5Fhkss6KWOmUQBZiqyYNg.png"></p>
<p>And here is Spotify’s response from February of 2017:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1BgyNP-mfW6zTJxq60w1ag.png"></p>
<p>Evidently, Spotify has considered the idea and decided not to implement it. Perhaps this feature is not a high priority for the organization, or they are intentionally leaving it out of mobile to attract more Desktop app downloads.</p>
<p>Regardless of their reasoning, I believe that desktop and mobile experiences should aim to be as similar as possible. I also think that incorporating an ephemeral content feed would mesh well with Spotify’s business of acquiring and retaining long-term Spotify Premium subscribers, as users could feel compelled to share and view their friends’ activity on mobile.</p>
<p>Snapchat and Instagram have successfully created Story platforms that allow people to keep up with what their friends are doing and seeing. What if Spotify could allow people to keep up with what they’re listening to?</p>
<h3>The Challenge 💪</h3>
<p>Provide a space on the mobile platform for Spotify users to share their listening activity.</p>
<h3>The Process ✍️</h3>
<p>The building block for this design concept comes from the “activity cell” found in the desktop Friend Activity sidebar:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vBwFzs25xGllur9eAIXOpg.png"></p>
<p>I iterated a few times on the best design for translating this activity cell onto mobile:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/168/1*-kRjh3_DYMSJKQmfCG6FiQ.png">v1: just the song<img alt="" src="https://cdn-images-1.medium.com/max/168/1*F1FXuypLOL053vx18wLThg.png">v2: song and artist<img alt="" src="https://cdn-images-1.medium.com/max/168/1*SywL9wvuLzi5S53pDMdqaQ.png">v3: ellipsis to show more on a modal detail screen<img alt="" src="https://cdn-images-1.medium.com/max/148/1*aCwFRJYtucd_XWJSNU_MHw.png">v4a: final cell design (active)<img alt="" src="https://cdn-images-1.medium.com/max/148/1*qtblRTNhVjUhOQaig_VIYg.png">v4b: final cell design (inactive)</p>
<p>With the final cell design, the goal was to indicate activity or inactivity quickly and show most of the activity information in an activity detail screen on-tap of each activity cell.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8A4wApARLhmGfbxAdLTTuQ.png"></p>
<h3>Designing for Implications</h3>
<p>I just finished up a Systems Thinking course here at the University of Maryland, where we made sure to consider implications in the design of complex systems. I decided to apply this mentality to this design exercise. It allowed me to realize a few things:</p>
<h4>Consider empty states.</h4>
<p>What if a new user just downloaded the Spotify app and hasn’t added any friends yet? I emulated the empty state found on the desktop app and included a call-to-action that replaces the normal content on the Friend Activity feed.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cmg7WTx7I3M9733AOTvvIw.png"></p>
<h4>Adding this row component to the home screen could affect engineering performance.</h4>
<p>Without Friend Activity, the home screen only has to fetch data once<strong>, </strong>but this new feed showing friend activity would require constant updating. I emulated the interaction design of other social media apps by including a pull-to-refresh interaction that only updates the activity when needed.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*axbpxMiUIGNGtMlQ5vqAOQ.png"></p>
<h4>This design creates a hyper-awareness of activity on the mobile platform.</h4>
<p>Yes, the Friend Activity feature is available on Desktop, but adding this to the iOS mobile app could potentially introduce this new dynamic to millions more people. It makes sense that some users may not want their listening activity to be seen by their followers. Because of this, I added a highly-discoverable toggle in the Profile screen of the app.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_RmzEkUhDxgT-VdEhErUQ.png"></p>
<h3>The Solution💡 — Spotify Friend Activity</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/370/1*uot2EB06OEZJO_T9OUqxMw.gif">Users can scroll through friends’ activity and play songs directly from the detail screen</p>
<h3>Learnings</h3>
<ol>
<li><strong>Don’t design things in isolation. </strong>Always place components in the context of the screen to reveal more information about how they interact within the product.</li>
<li><strong>Consider implications.</strong> It might take some more time to speculate on these implications, but doing so can indicate when more work needs to be done.</li>
<li><strong>Peers are important. </strong>I wouldn’t have been able to iterate so many times on this design without my friends telling me it could be better.</li>
</ol>
<p><em>I’m Andrés and I’m passionate about design and people. Find me on </em><a href="https://www.linkedin.com/in/andresmaaa/"><em>Linkedin</em></a><em> or check out the </em><a href="https://andresma.com/spotify"><em>full case study</em></a><em> on my portfolio!</em></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9471a1464bd1" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/what-if-spotify-had-stories-9471a1464bd1">What if Spotify had Stories?</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


What if Spotify had Stories?

Context 🔍

Top Stories