Users need a more efficient way to explore and listen to music on the mobile app because the interface is unintuitive and overwhelming.

Image by Porapak Apichodilok

When the cheerful GA course producer Mitchel suddenly told me (in a straight face) the User Experience Design Immersive program will be intensive — he wasn’t joking man. I barely caught enough sleep after project two, and three just embark right away…

Jumping into project three, we need to work on a team of three to identify problems and opportunities with an existing mobile application. We need to utilize our knowledge to design a solution. Sound simple enough but not really. There are so many apps to choose from — where do we start? We started searching for ideas frantically in the midst of a class, bouncing off ideas in the group chat yet looking composed.

Okay, we‘re going to redesign the Spotify app — we exclaimed.

Everyone in the class (okay almost all) thought we were crazy. 
“C’mon, it is a suicide mission!” 
“Hell yeah, I wanted to see you fall”

Okay, all is good — It’s a jovial class. They meant well — just happy banter. Still, it seems we‘re getting a taste of a nervous breakdown right there. Okay, lets’ tread bravely.

So what is Spotify?

Music for everyone! Fun fact: they finished with 170 million monthly active users in quarter 1 this year, and 75 million premium subscribers. Holy cow! There are millions of tracks to choose from. Decisions, decisions, decisions. Also, it is extremely convenient as long as you have a computer or in this case, a smartphone since we are redesigning an app. Did I also mention lots of variety, offers smart suggestions and accessibility. Sounds perfect already. Wait, did we really choose a wrong app?

Project Plan

We have two weeks, okay realistically just 10 days to do research, synthesizing research and prototyping. Yep, before we dive in, we need to plan out the workflow to ensure we use the right research methodologies for our achievable.


For research: we need to conduct background research, cognitive walkthrough, content audit, user interviews, online server, and affinity mapping.

Synthesizing Research

We then need to use our research to create personas, their customer journey map, card sorting, feature prioritization, and sketching wireframes.


Finally, we need to develop our high-fidelity prototype to convince our audience, conduct usability testing and lastly but not least to reiterate.

Competitive Analysis

We compared Spotify with Sound Cloud and Apple Music across the matrix of usability and satisfaction. We found the closest competitor — Sound Cloud has a better emotional experience. However, they fall slightly behind Spotify in terms of usability. Even though Spotify met its objective to give everyone access to songs, it is not the most efficient and seamless experience.

Persona Research & User Interviews

We conducted some user interviews and identified many problems. YAY
“I don’t use the homepage ever”
“Wait, there’s a search function?”
“I stopped using my favorite playlist cause I could never find my songs in that playlist”
“Wait, did I download this song already?”
“What’s radio?”
“I wish I could customize my page and playlists more”
“Do you know how I can access my play history?”
“I hate that the ‘Recently played playlists’ are at the bottom”
“You mean you can search for friends?”

Essentially the famous line from Steve Krug — Don’t make me (user) think.

Problem Statement: Users need a more efficient way to explore and listen to music on the Spotify mobile app as the current app is overwhelming and unintuitive.

Unveiling our Personas

We have identified two personas for this project.
First, we have Dhylan. He is 23 years old and a fresh graduate with a major in Design. He is currently unemployed so he has a lot of time. He likes to customize multiple playlists for his friends. He also uses Discover Weekly and likes to follow artist and friends. Spotify is a platform for him to stay in touch with his friends.

On the other hand, there’s Emily. She is still working despite having a child. She is a go-getter, confident but busy. Thus she doesn’t have much time. She likes to access the genres, stream music anytime and create her own playlist to relax, for convenience sake and sometimes to entertain friends at home once in a while.

Dhylan & Emily’s Customer Journey Map

Jumping back to Dhylan — this is his customer journey map. He has a lot of free time so the typical weekday will be like waking up at 11 am and goes to bed at 2 am. Most of his touch points are during the time when he wakes up, having late lunch, during the shower, commuting, and chilling at home.

As for Emily — this is her typical weekday. She wakes up at 6 am and goes to bed at 11 pm. She is a working mum so most of her touch points are during the time she gets ready, commuting to and fro work, lunchtime and during the night.

Synthesising Research

After conducting our research, user interviews, and cognitive walkthroughs, we were able to identify the issues that the current app had. Using the 2×2 feature prioritization matrix, we prioritized the features that were essential and could be done within the project period of ten days.

1. Onboarding/updates —to prioritize
2. Homepage categories — to prioritize
3. Podcast experience
4. The search function in the playlist — to prioritize
5. Adding/editing playlists — to prioritize
6. Curated VS created playlists — to prioritize
7. Playlist art customization
8. Customize UI
9. Reorganise settings
10. Inaccurate recommendations
11. Too many categories in Browse
12. Hard to find songs by keyword — to prioritize
13. Instant download for currently playing a song
14. Queue icon not intuitive — to prioritize
15. No queue history
16. Lack of variety for other languages (Brand)
17. No visibility of friend activity — to prioritize
18. Unable to recognize if a song is in user playlist — to prioritize
19. Inconsistent gesture pattern
20. Tapping on a song from search results overrides current song queue
21. UI for the free account is not as appealing.

The key issues in three heuristic brackets — efficiency, learnability, and satisfaction
Our proposed solutions which you will see in our prototype

User Flow

To illustrate how confusing the current app is, we will be showcasing the example of adding two songs to a playlist. The current process required a user to go through it twice.

And now he only has to go through the select and add-on process once.

Paper Prototyping

We did wireframing and a quick paper prototype so that the team will be on the same page. Also, to make sure our pages look uniform as a product. Very quickly using Sketch, I created a stylesheet to standardize the look and feel. The stylesheet includes Spotify’s circular font and a fixed point size for the header, body text, song title, artist name. Also to finalize the main navigation bar incorporating the new “friends” feature/icon.

Before and after

Here are the five key changes that we have made.

Have fun with our prototype here. 🙂 Alternatively a quick preview below…

An overview of the pages we have done

The Site Map (Before & After)

Usability Testing

Two days before submission, we tested the high-fidelity prototype with 6 Spotify premium seasoned users. Some of them mentioned that the Browse page is still overwhelming (gasp!), therefore we conducted a last-minute hybrid card sort for those categories.

Card Sort Results

From the exercise, 51 items were sorted into 3 distinct categories: Genres, Mood and Explore. With the data-driven insights, we proceed to create the new pages and retweak our prototype.

With our prototype, users now take a shorter time to get to where they want. For Browse: from 11 seconds to 9 seconds. For Friends: from 18 seconds to 5 seconds. For multi-selection: from 7 tabs to 5 taps. Complacency is often the silent business killer, don’t lose your edge Spotify. With a better user experience and some empathy, I’m sure your followers will prove their loyalty for a very long time.

The full presentation slides can be found here
How do you like our redesign? I’d love to hear your thoughts!

Source link


Please enter your comment!
Please enter your name here