Spotify Mobile App

Final Redesigns
Kirstin C. Phelps

All photos courtesy of Spotify

Rationale for Redesigns

Based upon heuristic analysis, cognitive walkthrough, and
user tests, the following main usability issues were
identified within the mobile Spotify application:
1.

Add in more documentation around clarifying actions or

options - particularly around paid vs. free options for users

2.

Increase visibility of action buttons and actions, such as

Follow, possibly by playing around with the color scheme

3.

Modify some of the titles of actions, such as modifying the

Activity to something like Social to increase awareness of
the use of that option

4.

Confirm consistency of terminology across the

application, particularly in terms such as 'starred', 'liked
from radio' and the relation to playlists to reduce confusion

Initial Redesigns: Visibility

Using paper prototyping, I began to
experiment with different options to
help increase visibility of actions.
Primarily through the use of color and
shading, I initially tried to call
attention to certain actions and app
statuses.
While the black background in the
original application makes things look
sharp, it also makes it hard to read the
text.

Spotify mobile application

color scheme - original

Initial Redesign: Options and Documentation

We also attempt a rearrangement of
options in this version.
We included text with the back button on
the top left. We also allow for a
minimization option of the currently
playing music bar on the bottom of the
screen. We also include horizontal
scrolling (vs. vertical) for browsing
mood playlists.

Key Design Iteration Questions

How can we experiment with color and text to
improve usability?

What types of documentation would help users

move through the application and understand
what is happening?
How can we provide better overall cues for users
to understand what is happening, why it is
happening and when something is happening.

Framing Who are our users?

In considering redesign possibilities for
Spotify, I found it useful to frame potentials
around the idea of a typical user.
User LM is a music lover, who uses the desktop,
web player and app versions of Spotify as well as
other streaming music services.
He is a young professional, familiar with
technology, and uses Spotify frequently. Mainly,
during workouts, at home and streaming over wi-fi
networks at the office or while studying.
He is a prime account holder and values ease of use
and access to find the playlists, stations, or songs he
wants.

User LM

Color & Text Iterations

User X

User LM

User LM

Currently Playing Song Title

Song Artist

Original Profile Page

White background

Alternative Color Scheme

Color & Text Iterations

First, I try to work within
Spotifys existing color scheme
but change the background to
white to make it easier to see and
a cleaner look.

User LM

Using the green to highlight active

sections, such as the currently
playing song banner at the
bottom.
I next play around with different
implementations of the
alternative color scheme,
checking for different aesthetic
and usability outcomes.

User LM

15
PLAYLISTS

13
FOLLOWERS

67
FOLLOWING

Currently Playing Song Title

Song Artist

Alternative Color Scheme 1

Alternative Color Scheme 2

Different color iterations are attempted, using Spotifys

black/gray/green/white color scheme.
The green tabs in Figures 2 & 3 provide a lot of distraction,
particularly if we think about the most important
information on the page to the user which is the active
buttons and active sections of the website, e.g. the
currently playing song title or different options within the
interface.

User LM

15
PLAYLISTS

13
FOLLOWERS

67
FOLLOWING

Currently Playing Song Title

Song Artist

Therefore, we continue with

Figure 2 (right inset) moving forward
and plan to use color for action buttons
or to highlight current actions within
the app.

User LM

Alternative Color Scheme 3

Currently Playing Song Title
Song Artist

Fig 1

Documentation to decrease confusion around actions

Insight from the usability studies identified some confusion around
what different actions meant on the site, so we played around with
adding text cues, for example:
Add Menu to the hamburger menu on top left
Add directional arrows to designate horizontal
scrolling
We also attempted to replace one confusing
icon with text, but it became a space issue

Menu

Menu

>

More

10

Icon Iterations
Using text was confusing and too
hard to read, particularly in a
mobile phone interface
Next, we incorporated green from
our color scheme to increase the
visibility of the icon
Third, we played around with
different icon images, using the
right arrow to signify more
different iterations allowed for
easier visibility but a more clunky
looking interface

More

>
>

11

Color & Text Iterations Final Scheme

Color is used to signify currently
active aspects of the application
Color is used to signify icons which
allow you to do something
Including text to decrease confusion
of certain icons
Including cues for user for how to
navigate through the application

Menu

>

Currently Playing Song Title

Song Artist

12

Color & Text Iterations Final Scheme

Menu
Menu

Menu

Close

Queue

>

>

User LM

Currently Playing Song Title

Song Artist

Currently Playing Song Title

Song Artist

13

Increasing Documentation
The next major portion of the
redesign is to improve the visibility
and documentation of actions.
Currently, the application provides
the following documentation for
different actions a user performs,
such as adding a duplicate song or
saving a song to your music.
However, we feel these messages
could be improved.
14

Documentation format
The Duplicate Song message
format provides a good template
from which we will improve the
rest of the documentation
messages.

Something
went wrong!

Saved to
Your Music!

Benefits: easy to see, uses color scheme for the

application

Improving
Station

15

Documentation format
Example od documentation in action:
Documentation screen (center) is
more visible due to coloring
Use of color (for example, green
highlight around thumbs up icon)
helps clarify what has been done and
draws connection to app messages and
user actions

Queue

Close

Improving Station

>

16

Final Comments
Spotify seems to be mostly an application for music lovers, and overall
does a fairly good job for usability. Based upon the analyses and user
studies conducted, however, it could use some more help in regards to
the visibility of actions and documentation.
The previous slides attempt to address some of these issues with more
visible app messages, a more contrasting color scheme, and application
of said color scheme to highlight application actions or active
components of the application.

17