Spotify Mobile Redesign
IxD and UI redesign of a mobile music application. Made during an independent study to learn skills for digital product design.
I assessed the current state of the Spotify mobile app and laid out the information architecture flow.
Interactive Idiomatic Sketches
As I hand-sketched possible idioms of interaction I was simultaneously going back to the information architecture diagram I made, tweaking things as I made changes to each.
This established the way the app would be interacted with, which I could keep in mind while designing the framework for each page.
As I moved through each step of the design process I was going back to previous steps making changes as the project developed
Frameworks were created as the base structure onto which I could build out the more detailed wireframes.
Icon for quick navigation to the home Library page.
Swipe up tab can open larger to show more info or smaller to show only necessary information.
Large spaces for album art to be displayed.
Home icon for quick immediate navigation to the main Library page.
Orients user where they are in relation to the Library page. Also makes it clear that they can swipe between pages.
Option to customize quick links directly from the main Library page.
The current playing song can always be accessed by swiping up the tab on the bottom of the screen.
Corresponding photos, colors or album art can indicate different categories.
Any of the navigational buttons from the Library page will take you to a secondary page using the same grid layout.
Space for the album art to be displayed.
Different colored text indicates the selected song currently playing.
Marquee effect will be used for longer lines of text.
Additional song info or actions are displayed within the info card.
I designed an additional Now Playing page so that the extra song info could be hidden, but I decided that wasn’t necessary and the album art would not fit as well.
Search can be accessed from any page in the app by swiping down from the top of the screen.
Modern, vibrant, smooth
A few months later...
After getting feedback from many different people on this project I decided to come back to it (redesign the redesign you could say) and made some changes to the UI.
Mainly taking away the distracting background pattern and improving the color contrast for increased accessibility.