small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

Published on <a href="http://ift.tt/2oPeMuu">| Prototyping: From UX to Front End &mdash; Medium</a> Renee Lin <img alt="" src="http://ift.tt/2nyYsxy">
<h3>The Challenge</h3>
I love music and use Spotify everyday, when I’m struggling to get up in the morning, when I’m focusing at work and when I’m taking a shower in the evening. It has been a pleasant experience with Spotify but I’m quite the picky designer and I believe it could be better.
I was provided a great opportunity to do a reverse engineering practice of Spotify. I spent two weekends to take things apart, understand how it works and try to improve the user experience. This practice is purely based on my own research and my personal usage.
<h4>Part 1 : Current State Analysis</h4>
<ul>
<li>Business Goals vs. User Goals</li>
<li>Information Architecture</li>
<li>User Journeys</li>
</ul>
<h4>Part 2 : Unsolicited Redesign</h4>
<ul>
<li>Revised Information Architecture</li>
<li>UX Suggestions and Redesign</li>
</ul>
<h3>Part 1 : Current State Analysis</h3>
<h3>Business Goals vs. User Goals</h3>
User experience (UX) is where business goals and user goals intersect. It is how a human feels when using a product while attempting to accomplish a task or a goal.
<h4>Business Goals</h4>
Spotify is a music, podcast, and video streaming service, officially launched on 7 October 2008. Spotify is a freemium service, meaning that basic features are free with advertisements, while additional features, including improved streaming quality and offline music downloads, are offered via paid subscriptions.
<img alt="" src="http://ift.tt/2orZH5V">Spotify free version and premium version
<ol>
<li>Freemium</li>
</ol>
<ul>
<li>Develop a wide range of innovative advertising formats — Audio Ad, Homepage Takeover, Video Takeover, Branded Playlist etc.</li>
</ul>
2. Premium
<ul>
<li>Have users invest their time to build up a library and explore functions. Offer key features in premium version.</li>
<li>Stream content — buying and curating more and more content. Spotify provides access to over 30 million songs in 2016. Every time that a user streams a song, Spotify gets paid.</li>
</ul>
3. More users
<ul>
<li>Retain existing users</li>
<li>Build a social community within the app</li>
<li>Encourage sharing across other social media platforms</li>
<li>Conduct marketing campaigns</li>
<li>Build partnership with third-party platforms</li>
</ul>
<h4>User Goals</h4>
A little background of myself — the user.
<ul>
<li>Age: 20–25</li>
<li>Device: 90% iPhone 10% Macbook</li>
<li>Songs of collection: &gt;2,000 songs</li>
<li>Frequency of use: &gt;5 hours everyday (premium user)</li>
<li>Needs: Access to all the music I like, discover new music and share music with friends.</li>
</ul>
<blockquote>“I just need two spots. One spot for my favourite songs and playlists; Another spot for discovering new songs. ”</blockquote>
User Goals
<ol>
<li>Listen to and save music</li>
</ol>
<ul>
<li>Quick and easy way to search a song</li>
<li>Build a personal music library and listen repeatedly</li>
</ul>
2. Discover new music
<ul>
<li>Discover Weekly/Daily Mix — listen to recommended songs</li>
<li>Radio — listen to songs that are similar to certain songs, albums, artists or playlists</li>
</ul>
3. Socialize with friends
<ul>
<li>Share songs or playlists</li>
<li>See friends activities</li>
</ul>
<blockquote>So, how do we maximize the sweet spot where user goals and business goals intersect?</blockquote>
The simple answer is providing a kick-ass user experience to make your user love using the app. Let’s start from the backbone of a digital product — Information Architecture(IA).
<h3>Information Architecture</h3>
<blockquote>One of the challenges people have with IA is that they can’t easily see it. Have you ever heard someone say, “Man, that website’s information architecture sucks!” I bet no. More likely you would hear, “I can’t find anything. Why is it all over the place?”</blockquote>
Some of my friends have the same frustrations as me since we get confused by Spotify’s navigation. So I visualized the current IA and marked the duplicated sections in green. Let’s see what is going on.
<img alt="" src="http://ift.tt/2nyOH2x">Spotify Information Architecture
I was surprised by how many duplicated sections there are and how little content that I am actually using. [Do I really need to see Daily Mix three times throughout the app? ]
<h4>Main Issues</h4>
<ol>
<li>Content overload</li>
</ol>
<ul>
<li>Duplicated sections or similar functions</li>
<li>Only few parts of content are frequently used</li>
</ul>
2. Lack of priority
<ul>
<li>Need to prioritize the top user flows</li>
<li>Need to create visual hierarchy</li>
</ul>
3. Confusing names
<ul>
<li>Examples: ‘Made for you’, ‘Playlists made for you’, ‘Top recommendations for you’, ‘The perfect soundtrack for your afternoon’, ‘You might also like.’ [Which one should I choose?]</li>
<li>Another example: ‘Jump back in’, ‘Recently played’ [What is the difference?]</li>
</ul>
<h3>User Journey Map</h3>
A user journey map allows you to identify and strategize for key moments. I mapped out the top three user flows with user goals and pain points at each step in order to define key opportunities to improve the overall user experience.
<img alt="" src="http://ift.tt/2orZHCI"><img alt="" src="http://ift.tt/2nyKg7X"><img alt="" src="http://ift.tt/2os24Wc">
<h4>Main User Pain Points</h4>
<ol>
<li>Listen to saved songs — ‘My Library’</li>
</ol>
<ul>
<li>Hard to find user-created playlists within all playlists</li>
<li>Search bar and filter are hidden</li>
</ul>
2. Search a song and save it — ‘Search’
<ul>
<li>Hard to find the right song with too many results</li>
<li>Long press preview function is hidden</li>
</ul>
3. Explore recommended songs — ‘Home/Browse/Radio’
<ul>
<li>Hard to choose from too many recommendation sections</li>
<li>Some of the sections repeat too many times throughout the app</li>
</ul>
<h3>Part 2 Unsolicited Redesign</h3>
In this part, I’m going to minimize the features based on my personal usage, redesign the IA(Information Architecture) and some UI (User Interface). Finally, I will propose a couple of suggestions to resolve the pain points found in the three user journeys.
True Story:
<img alt="" src="http://ift.tt/2nyQVyD">
<h3>Revised Information Architecture</h3>
Almost every popular product starts from MVP (Minimum Viable Product) with the key information and becomes more and more cluttered adding new features as it grows. Sometimes we need to take a step back to focus on what actually matters to the user and how to present that to the user.
In order to create a minimalist design, I reorganized the information, combined the duplicated content and removed some of the sections that I don’t use frequently, such as ‘Concerts’ and ‘Podcasts’.
<img alt="" src="http://ift.tt/2orZHCR"><img alt="" src="http://ift.tt/2nyLhg8">Old vs. New IA
<h3>Wireframes</h3>
There are four sections in the revised IA which are ‘My Library’, ‘Discover’, ‘Radio’ and ‘Search’. I combined ‘Home’ and ‘Browse’ into ‘Discover’ as they have lots of duplicated content and serve the same purpose which is to discover new music.
Since my simplified version of Spotify has less features and pages, I changed the navigation tabs back to a hamburger menu to create a clean interface.
Also, I tried to prioritize the most frequently used sections with visual hierarchy.
<img alt="" src="http://ift.tt/2os0bc3">Redesigned Wireframes
<h3>UX Suggestions and Redesign</h3>
After analyzing user pain points from the three user journeys, I summarized a list of UX suggestions by section.
<ol>
<li>Library</li>
</ol>
<ul>
<li>Label Name — I suggest to change the name from ‘Your library’ to ‘My library’ or even ‘Library’ because an app should communicate with the user from their perspective.</li>
<li>Visual Hierarchy — I prioritized four main sections in ‘My Library’ which are ‘My songs’, ‘My playlists’, ‘My stations’ and ‘My artists’. I suggest to move ‘Daily Mix’ from ‘Library’ to ‘Discover’ and change ‘Albums’ to a filter inside of ‘My songs’.</li>
</ul>
<img alt="" src="http://ift.tt/2nyPh0a">
2. Songs
Currently, the search bar and filter are invisible unless the user scrolls to find them and even then there are only limited filters included. I suggest to make search bars and filters easy to access and add more useful filters including but not limited to ‘Most played’, ‘Artists’, ‘Albums’ and ‘Moods’.
<img alt="" src="http://ift.tt/2orPN3Z">
3. Playlists
Currently, the user-created playlists are buried by tons of other saved playlists. These two types of playlists have different priorities so I suggest to add a ‘Made by You’ filter so that the user is able to access their own playlists easily.
<img alt="" src="http://ift.tt/2nyYqWs">
2. Search
<ul>
<li>Sort the search results by popularity (same as desktop version) — Most of the time a name is all we know to find a song. When users don’t know who the original artist is or which cover is the most popular one, the popularity filter could be very helpful.</li>
</ul>
<img alt="" src="http://ift.tt/2os3tMl"><img alt="" src="http://ift.tt/2nyPj8i">Search results (Desktop vs. Mobile)
<ul>
<li>Make long press preview a user habit — Before I did this exercise, I had no idea that we can long press on a song, playlist or album and get a 30-second preview. This is a great feature to solve the shortcomings of visually browsing music but it’s kind of hard to discover for new users. So I suggest to add a short sentence on the search page like “Try to long press on a song. ” for users who don’t know this function.</li>
</ul>
<img alt="" src="http://ift.tt/2orOW3o">Long Press Preview
3. Discover Weekly
‘Discover Weekly’ is a weekly roundup of songs based on user listening history and their music taste. It is one of the most popular features of Spotify.
<ul>
<li>Keep it at the same place — I suggest to put it in the ‘Made for You’ section and always keep it on the ‘Discover’ page instead of showing it everywhere.</li>
<li>Make the feedback actions consistent (See the screenshots below) — 1. Daily Mix: ‘Like’ and ‘Block’ icons; 2. Radio: ‘Thumbs up’ and ‘Thumbs down’; 3. Discover Weekly: ‘Shuffle’ and ‘Repeat’. I suggest to get user feedback in a consistent way.</li>
</ul>
<img alt="" src="http://ift.tt/2nyOBbb">
<h3>Other Ideas</h3>
Xiami is a Chinese music app by Alibaba that I have been using for more than six years. There are some small features that really bring me joy. I’d like to share with you here:
<ol>
<li>Music comment section</li>
</ol>
I like sharing my stories of music with people who have the same taste. I write down my thoughts and feelings in the comment section where people can like each others comments and make friends.
2. Sleep timer
Lots of people listen to music before they go to bed. A sleep mode allows users to set up a certain period of time before it automatically shuts down. Falling asleep with music on sounds like a good experience right?
3. Lyric poster
Xiami provides poster templates when users share songs. A user is able to choose the lyric and background image to create their own poster and post on social media.
<img alt="" src="http://ift.tt/2orSrXz">
3. Tape player
I still remember the surprising moment when I accidentally turned my phone to landscape mode and found the music player becoming a tape player. It suddenly brought me back to 12 years ago when I held a giant box and listened to a tape over and over again. Sometimes we need to take more than one step back to find the little joy and add it to our product.
<img alt="" src="http://ift.tt/2nz2plN">
<h3>Reflection</h3>
To me, UX design is all about happiness. As a user, it is the exciting and memorable moment of using a product. As a designer, it is the sense of fulfilment when people like my ideas. I love the design thinking process of understanding why things work and why not.
<blockquote>“It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives.” –Don Norman</blockquote>
I hope you enjoyed reading and I would love to hear your thoughts.
Thank you! 🙂
<img alt="" src="http://ift.tt/2osdk59">
<h3>Reference:</h3>
<a href="http://ift.tt/1JV6Opi">Spotify Community</a> — A place where Spotify users interact and propose their ideas.
<a href="http://ift.tt/2fm5Esa">Spotify Business Model and How does Spotify Make Money</a>
<a href="http://ift.tt/1DjED36">Spotify Case Study</a>
<a href="http://ift.tt/2oPfB6e">A UX Redesign of Spotify</a>
<a href="http://ift.tt/2orOEZT">Spotify — An In-Depth Product Analysis</a>
<img src="http://ift.tt/2nz2nub" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2os1EiO">Spotify UX Analysis and Redesign</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Spotify UX Analysis and Redesign

Spotify UX Analysis and Redesign

The Challenge

Top Stories