Spotify Mobile Redesign

Role

Time Frame

Brief

Interaction Designer

Fall 2019

Redesign the interaction and UI of Spotify mobile.

Information Architecture

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

Current
Once I had a good understanding the current state I was able to see how it could be more intuitive and I created an alternate information architecture diagram that I would build my design around.
Redesigned

Interactive Idiomatic Sketches

As I 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.

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.

Visual Design

Mood Board

Modern, vibrant, smooth

Style Guide

Updated Logo

Reflects the visual design motifs found throughout in the application

User Interface

Design was slightly changed from the wireframe as I went through the design process

Downloaded songs and albums should be quickly accessible for road trips and when there’s low service

Add allows the user to customize quick links on the library page and rearrange the order of buttons on the page.

Background design changes to correspond to the category color (in this case orange) to help orient the user.

Chartreuse is used through out the application to draw attention to important user information.

The control panel is very similar to the current Spotify because it’s a familiar form to music software users.

The information section can scroll to reveal more information, including the song queue.