Spotify, the world's most popular music app, that once in a while makes its user double think whether they should continue using it, and the downturn that its UI is taking could be one of the main factors. While we were sitting here waiting for certain issues to be fixed, Spotify kept on adding new features and designs that created even more problems and inconsistencies across different devices. I mean, if there's a quest for the perfect music app, Spotify is busy doing all the side quests. After you guys asked me to redesign Spotify, I knew it was time to complete that main quest. The past few years, Spotify's general style changed a lot, going from a more serious, sharp design to a playful, rounded design. So, I'm not going to change that, but there are other problems here. First of all, even though Spotify's font is cool, it's not exactly free, so I'm using the closest alternative in my design. Secondly, Spotify changed all of its icons a while back to match the new design, but these icons are still a little inconsistent and sometimes misleading, so I made a whole set of

icons for them from scratch. Thirdly, we all know Spotify doesn't only have a list of songs; it has albums, playlists, and recently, podcasts and audiobooks also. More on these later, but the thing is, if I remove the cover image, would you be able to tell what's what at the first glance? Yeah, that's a problem. We get used to the way different things look like on apps, and not just through icons or titles, but the layouts and shapes. So, if we had little details on these items, that would be much easier to distinguish anywhere on the app. Last but not least, this one's going to feel a little cursed, but why isn't there a light mode? I mean, I'll probably never use it, but some people do, and that's why certain other apps have it. So, Spotify, you might want to give that a try. In the very beginning, we must answer this question: what the hell do we want from a simple music app? A homepage to see music related to us, a search and browse page to find more music, a library.

to save stuff, a section for our profile and other account details, and a place to see the music that's now playing. That's it, everything else is a side quest, so let's focus on the main things first. Here are two different versions of Spotify on mobile and desktop. Let's see if their layout checks out. This list, if you're a free user, you'll see four of the main parts down here on the mobile, but there's this whole premium tab that keeps haunting you wherever you go. And on iPhone, it's literally useless thanks to certain policies, and you ultimately got to subscribe on their website. On the other hand, your profile settings and everything is hidden up here, far away from any point your thumb can reach. Instead, it could have been down here, merged with the whole subscription details. On desktop, the layout is a bit more complicated. The app is divided between different sections with no sign of hierarchy, like home and search, waste this entire space, and open up on this side where we can also see the other elements on our checklist. Can't decide

if profile and friends are subsections of home or search. If they are, why does friend activity open on a whole different section? If they aren't, why are they in here to begin with? Then there's the whole goddamn library on the sidebar with weird expansion controls. I mean, I get it. What Spotify is aiming for is a modular design that gives you flexibility in choosing how different sections look, but what's more modular than different tabs? I put all the main parts of the app up here, and since we need the library on the sidebar, we'll just leave it here for now. This way, you can even open new tabs from anything you like. All right, enough fun and games, time to play some good music on a Spotify desktop. If you want to search, you got to click on the search on the sidebar, and then, uh, no, no, no, over here, yeah, and then search for whatever. On this new design, though, you'll just click on search right up here, and it will immediately turn into a search bar. Before I even search for anything, though,

can we talk about what a weird salad of different things this whole browse section is? Like, if I want to find more rock music, I got to read through all the tiles to find it. Items here are from completely different categories, so why not group them under different titles? On mobile, you have a row on the top for clips, which is a new thing Spotify is trying. I'll remove it for now, but I'll come back to this one later as well. All right, let me find some of my favorite artists now. Wow, this is great. Everything is 100% related to my search up here. Let's make these search filters look distinguished from all other types of buttons and tags on the app. This is one of my favorite artists, so let's go see what's up on desktop. The first thing we see on the artist page is their top 10 most popular songs, then a row for their discography with all the releases in one place, beat albums or singles, and then the rest of the page is just stuff related to the artist. But let's be fair.

We only care about this part, at least in the beginning, so it shouldn't be such a pain to browse. Like, let's say I'm looking for a certain album. I click on the albums, and I only see a few of them. How do I see all of them? There should be some sort of a scroll bar, right? But no, I got to see all their songs and albums and EPs in one very long page. Luckily, there are filters up here to make our job easier, but come on, no one wants to go through this every time. If you think this is bad, then you should know that the mobile app doesn't even have a proper discography section, except this button that takes you to the page with the whole discography. No filter, no sorting, nothing. Instead of all this on top of the main page, we could have different tabs for everything. For example, on the main page, there could be some of the most popular songs, and on top of that, some of the songs you listen to most frequently. So when I hit play, it wouldn't start playing the most popular.

songs because I don't know about you, but my favorite songs from an artist might not always be the most popular ones. On the right side, I can add some of the artist's picked content and a small about section that links to the about tab, where you can find full info about the artist. On the album tab, you can find the list of all albums in two different views: grid and list. But instead of all the albums being expanded, turning the page into an infinite scroll bar, they'll be collapsed in the beginning, so you can open whichever one you like. The same goes for the rest of the tabs. Oh, I almost forgot, we really, really, really need to be able to search on every, every page. I don't know, I just feel powerless without a search bar. All right, let's actually visit this album now on Spotify. The design of the album page is similar to the playlist, song, podcast, and everything else. I mean, it's okay for the layout to be the same, but on an album, you would want to see the album cover a little better, and why is

the title size is so large sometimes and so small other times when they're longer. Why can't it just be a fixed readable size? Now that we're at it, why not change the layout a little bit and add more details to the album page, like genre tags for discovering similar songs, or a list of all the artists contributing to the album? The song list itself could add a life-saving feature to be able to select multiple songs and apply bulk actions on them. The playlist page or a podcast page will have about the same layout, except with a smaller cover image, but the layout here allows for much more information to be available on the sidebar. I'm going to add this album to my library and listen to it later on my phone when I'm touching grass. But you know what? I'm tired of listening to this album or my other favorite artists over and over. What does my Spotify homepage have to recommend based on the music I follow? Well, let's see. The homepage of Spotify has different rows of recommendations for you. Sometimes they're related to you and

Other times, they have nothing to do with you. Yeah, the homepage is supposed to be a marketing funnel, but history has shown that we music listeners are very committed to our preferences, and this page might be called home, but it doesn't feel like home. First of all, let's switch all the items to the new style that properly differentiates them. On desktop, you can't see all the items on the rows; you got to go to another page for that. But it's not like there's so many that couldn't just be on the main page with one scroll to the right. Like, that's the most expected behavior here. Then you get all these recommendations of podcasts and audiobooks right from the beginning. I don't know how it's recommending me these specific things, but sure, you do your marketing. It's just that this is the homepage, which means every user should be able to customize what they want to see here. So, to fix that, I'm adding an option to hide a section complete, or if you like it too much, just pin it to the top. Actually, why not let

you add or remove whatever you like to your own homepage, and many you like. This could help you pin, move, or hide different rows, or if you want, add a new row from your library, or turn Dynamic recommendation rows on or off your homepage, your rules. Last but not least, on the top, you get these buttons that look like filters for the content on the homepage. On desktop, it doesn't seem to filter the content; it just recommends other things in the category, which is weird. But even weirder is the behavior on mobile. They basically turn your homepage into TikTok light, playing previews of different audiobooks, podcasts, or songs, but at their very climax, just giving you the best part of the song, which is both sad and great for marketing, but it certainly doesn't belong in my homepage. Remember the clips from the search page? Well, why not mix them together and put them on a different tab called Discover? So if you ever want to discover new stuff, you know where to find them. A Discover clip is basically a song preview C card with the elements from

Clips, but what is the point of this quick preview of songs to add them to my library at the end? Well, maybe I don't want them mixed with my favorite songs. Maybe I just want to listen to the full song later and decide how I feel about it. Expecting people to create their own playlists to save things for later is not the best way to draw engagement either, 'cause the interactions have to be quick, right? So we need a place like saves to save something to explore later. Spotify already has a saved episode section in the library, so we can expand that. And to drive even more engagement, there could be a number to show how many people saved this music on the top of the Discover page. I'm adding several categories, just swipe left or right and listen to different genres. You know what? This song actually caught my ear. And now the most controversial part of the app, the now playing part. This option here for different devices, it bothered me. Why this specific option had to be here and not the other more frequently used ones. So I asked you guys.

for your opinion, and yeah, I got my answer. The add to playlist icon goes here. But what if, hear me out, now what if there was a way to do even more without expanding this. Think of a hold gesture that shows you three different options, like liking the song, device list, and hiding the song. This way, you could just speed everything up. But let's say you wanted to expand it. This is where I kept reminding myself of that old saying, There's always a better way of designing things. But before that, a huge thank you to the sponsor of this video, Mobin. [Music] I can't, I can't think of anything. There's got to be a better way to make a navigation bar. You know what, I'm done. What is it, little magic wand? What's that? Wait, are you kidding me? Those are some good navigation bar examples. Thank you. Wait, wait, wait. Do you happen to have any music-related UI examples? You do? Ooh, that's exciting. There's a bunch of good ideas in here. Where do you even

get these from its a website filled with UX and UI inspiration across all sorts of industries. Well, look at this. They have full flows of apps recorded in here. I was looking for this. There's different versions of Spotify completely recorded in here. There's examples of different marketing pages, UI elements, screens, and so much more. I already have a bunch of cool ideas. Now let me send all of them to my library and keep them for later. This is just pure gold, and you know where we keep our gold. All right, now what do you think about the expanded now play? It's mostly all right, except when you actually want to interact with it. Like, you got to go down here to see the lyrics, then click on here to expand the lyrics. That's two interactions, only for it not to close when you drag it down. So, you got to get out of your comfy one-handed zone to close the lyrics. Then it does the same exact thing for the queue. I feel like it's over-complicating a very simple layout. Just move the lyrics up here and instead

of the extra options being all the way up there, bring them down here, and uh, ew, what is this? It adds the song to my likes. What if I don't want it to add it to my like songs and instead a playlist? I got to open it again, unlike it, and then choose something else. Why can't add to like songs and add to library just be two different icons? See, this is where I draw the line for minimalism. Now down here, we have devices, sharing, lyrics, Q, and more options, all accessible with one press of the thumb. The Q on the Spotify is pretty simple, maybe a little too simple. For example, if you add some playlist to the queue, there is no way to remove all the songs from playlist one and skip to playlist two unless you remove all the songs one by one. I mean, who's got time for that, am I right? We could have that with a simple dragging. Now, what if you wanted to loop or shuffle playlist three before you reach it and maybe just add two simple icons next to its name? This gives much

more control over what you want to listen to. Now, for the song options, what are these icons? Make a guess. Remove from library. No height song at this artist to the library. No, of course not. It's song credits, silly me. But now, take a look at these options on desktop. They're different. There is no height song option. The song credits icon is different, and there is no sleep timer. Besides, none of these platforms have the option to download the song for times when you're offline. That option is for playlists. Let's fix these problems on both of them. And while we're on desktop, let's talk about the desktop now playing Spotify. Recently added a now playing section that has some information about the song and the artist. And since it kept opening and taking half of the screen, users were actually looking for a way to completely disable it, which later on made his Spotify add an option for that in the settings. I mean, this is pretty useless. Plus, the icon looks exactly like the video icon on a Spotify, and it's not like it's preserving any space because

if I want to see the lyrics, the whole screen will be filled with this song's information anyway. It just takes away the option of having my friend activity or Q on the side as I'm looking at the song information. So why not just open the songs page with a zoomed-in version of the cover art, some controls, artist info, and full lyrics? The lyrics have a lot of potential on a Spotify, for example. We could have time-sync lyrics or just static lyrics. We could have translations of the lyrics in any language or annotations directly integrated from Genius. But well, I guess Genius already did a collaboration with someone else. We could also add a font size control for the lyrics because this might just feel too large for some of the users. Last but not least, this Bottom bar really needs some love. First of all, it's just not giving a Spotify with that black soulless background. How about making it with a dynamic color that shows as long as you're playing the song and goes gray when you pause? The song name is all the way on the side of the

screen and the song options are all the way on the other side. Bring them a little closer, swap it with the play controls, and change the layout in here to let us do cool effects like this on the song. So we can skip the 30 seconds of silence in the beginning of some songs. But now, can you guess what the lyrics icon does? No, it doesn't take you to the song page. It opens a small lyrics popup so you wouldn't have to open a full page if you don't want to. Alright, I'm going to create a new playlist with this song. Uh, did it just create a playlist with a song name? It could just have a new playlist button that lets me write a custom name, create the playlist, and add it to my list so I could select it if I wanted to. You're making this really hard for us, Spotify. Now I got to go to the library and clean up the mess. I can tell Spotify really thought it ate with this library, and yeah, it's innovative, but it's not usable.

especially if you have a lot of music saved from years of activity. First of all, this layout is a headache. This icon here expands and collapses the library, turning it from a sidebar to a semi-full-page experience. Using this menu, you can sort the library and change the way it looks from compact to list view and grid view, with this slider that has weird tick mark positions. Why was this even approved? But it's not like the view options and resizing matter in the slightest, 'cause when you close the library, it's just going to be the grid view that doesn't really make your job any easier, 'cause you still have to hover on everything to know what it is. You can't organize much in this library either, no matter how wide it is. If I go inside an empty folder, it tells me to add playlists to it by dragging and dropping. Where? Where are the playlists in my library when I need them? I got to go back again, so what's the point of all this? A fixed type bar with a list view.

of the library would have done just fine. So now that the library is a fixed type bar, everything could be categorized into different sections. This way, if you'd prefer to see your playlists, you'll open your playlists. Someone else might bring their following artists all the way to the top, and for some proper library management, you can open the library in a full page. I think it's also cool to be able to filter our library by artists or genre, and then save that as a dynamic playlist that gets updated every time you add something to your library. What is that? Hey, how you doing? You're here with your DJX. Hold up a second. What is that doing in my library? I think it's very cool that we get a DJ that plays songs that match our mood, except when it doesn't. Beside the fact that it frequently recommends NPC music and plays songs that are completely irrelevant to you, and there's no way to tell it to stop, even the placement of it in the app sucks in my library as a playlist. The way I see this

DJ is like an extension of the now playing somewhere like here, and it really needs its own controls because sometimes it just goes on. Who's been definitely navigating the gap between Florida Georgia Line and Sam Hunt? What do I do? Click next. Well, that just goes on to the next song. There needs to be some sort of a skip button next to it. Then it keeps recommending songs I don't vibe with, or I wanted to recommend a certain type of song more. I should be able to express my opinion from here. Then, if I don't want it anymore, I should be able to turn it off. Uh, hold up, that's my friend. Hey, are you on Spotify? Uh, yeah, let me add you. Let's open friends activity and add a friend. Uh, how do you add a friend on Spotify? Do I really need to have a Facebook account? Silly me. Of course, I have to search the username of my friend in the search bar, only for my friends not to actually show up as friends but as my following, so I don't have a place.

to see them or their activity. Either they're amazing on the Spotify mobile app. Even accessing your own profile and settings is complicated. It doesn't have to be like that. Just divide the profile tab into different sections. Put a preview of my profile up there along with my username. Easy to copy and share it with my friends. Underneath that, put a preview of my friends list and let me add whoever I want without the need for Facebook. I mean, imagine your social system being dependent on a third-party app. Then add my billing information and other things like settings and listening history below that. It's beyond me how Spotify can add a social media, a DJ, and TikTok together in one app but make it impossible to reach your own settings. Think Spotify, think. What will you have after all these annoy half-assed features? Why don't you just speed up releasing the lossless audio feature like all the other music apps? I don't know, but get your sh together. Putting these all together, say hello to a fresh new look of Spotify. One app for all songs, albums.

playlists, podcasts, audiobooks, and more. Follow your favorite artists, listen to songs based on your mood, create playlists with your favorite songs, customize your homepage, and discover more songs. Make your library yours, drag and drop. Miss hearing lyrics again? Check them out in one click. Music for everyone on every device. Well, that's all for this video. If you liked it, make sure you do your magic down below, and see you on the next one.

I Redesigned the ENTIRE Spotify UI from Scratch

I Redesigned the ENTIRE Spotify UI from Scratch

Scripts