UI
Redesign
Discovery
Problem
With more music services developed, Spotify needed to find a way to keep ahead of the competition. The key to that was their user experience.
Solution
Conducted research to find pain points in Spotify's user experience and interface. Take that data and recreate a layout that alleviated the issues bringing more customer engagement.
10
ONLINE
SURVEYS
5
USER
INTERVIEWS
5
USABILITY
TESTS
3
COMPETITIVE
ANALYSIS
Finding #1
Multiple users were unaware of select features in the app. During usability testing I had them complete the same task in various ways. Users were unable to find another way besides the path they were used to.
-
The layout traps users into a certain path of action, keeping them from trying other features.
-
Adding songs, searching songs, making a playlist, all social features were untouched.
Finding #2
The layout of the homepage turned people away. It was full of music, podcasts, albums and more. However there was no organization, the colors are bright with words layering over. The visual experience is overwhelming.
-
Users will resort to going straight to their made playlists instead of navigating the home page for new music.
Finding #3
Social features were useless. Most users didn't use it or bother to connect. Because all it meant was you could see what your friends were listening to, there was no use for it.
-
Users said they were more likely to use it if reactions to songs, direct messages or more interaction was invovled.
Ideation
Site Maps
I created different site maps for each task I had users complete in the usability test. I wanted to understand each click and interaction that went into the task. Using these I was able to pinpoint excess clicks, spots that could be combined into one action, and more.
User Stories
With the research completed, I started creating different user stories that would help guide my design later on. These will be the goals I intend to complete through my redesign of the site's UI.
-
As a user, I want to create an account and learn all the features of Spotify.
-
As a user, I want to connect with friends and interact with them about music.
-
As a user, I want to create a playlist in the fastest manner possible.
Design
Wireframes
These designs were created using Figma. I focused on the three painpoints from the interviews and worked with visibility in mind. I changed some of the icons to make them more clear. Each bolded green icon in the designs are ones added by me.
Usability Testing
Using the tasks I outlined in the previous stage, I went to five new users and had them test. This time using the wireframes instead of the original design. My goal here was to see if the changes before being fleshed out made any difference.
-
Users navigated the home menu quicker.
-
"The home page feels more like my home than a menu."
-
"I had no idea these functions were available."
-
Searching songs went faster and easier to find multiple methods.
A/B Testing
I also created a quick mockup of the old layouts as wireframes and new wireframes back to back. I asked peers and friends to look at each set. Making sure they weren't Spotify users already, I had them tell me what they could conclude from each wireframe. The visual first impression is just as important as functionality.
Results
Designer's Note
As someone who uses Spotify religiously, this project challenged me to stay non biased. There were parts in the design that I wanted to add for myself, but it didn't follow the data. It was interesting hearing the different relationships people hold with music, some were connections I didn't think of. In the design phase I really enjoyed recreating the layout and then changing it to be something new. By adding the color and making the final prototype, it really came together.
I have always loved learning how people work and what makes them tick. I have also always enjoyed designing new experiences for people, learning how to make their lives easier even if just by one click.