Spotify Mobile Redesign

Fall 2019

Redesign the interaction and UI of Spotify mobile in an independent study to enhance my UX skills.

Information Architecture

I assessed the current state of the Spotify mobile app and laid out the information architecture flow.

Current
Redesigned

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.

Interaction Model

This established the way the app would be interacted with, which I could keep in mind while designing the framework for each page.

Iteration

As I moved through each step of the design process I was going back to previous steps making changes as the project developed

Framework

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.

Wireframes

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.

User Interface

Mood Board

Modern, vibrant, smooth

Style Guide

Visual Design

Settings

Albums List

Home

Song List

Discovery

Now Playing

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. 

Library

Before

After

Albums List

Before

After