The problem
When a user “likes” a song on the Spotify mobile app, it is placed into the “Liked Songs” playlist. A notification bar appears at the bottom of the screen notifying the user of this but it stays on the screen for a while before disappearing. If the user wants to access the “Your Library” icon, they must wait for the notification bar to disappear, the user can’t swipe it away.
The goal
To create a solution where the user doesn’t have to wait for the notification bar to disappear before being able to tap any of the buttons in the navigation bar when they want to quickly switch screens.
User research
I decided to interview 4 people who are frequent users of Spotify, I asked their opinions on this pain point and how it affected their experience whilst using the app.
User 1- “I am quite surprised there is no option to swipe the notification away, it is annoying!”
User 2- “This is an issue I have always wondered why they haven’t fixed, notify me in a different way that doesn’t block the navigation bar at the bottom”
User 3- “When I am in a hurry to switch screens, I would love to be able to quickly swipe it away”
User 4- “It is not much of an issue for me, I am used to it”
Sprint 1
Using the research, and requirements collected from users, I created a product backlog and then I collaborated with UX designers to discuss the items in the product backlog (sprint planning). The design phase then began, I spoke to designers during the sprint about the paper wireframe progress daily during the week. I maintained communication with the users throughout the sprint process to gain ideas to be placed in the product backlog.
Paper wireframe idea 2-
This completely irradicates the idea of a notification bar appearing, the “Like” icon instead would change states with celebratory confetti-like animation around the “Like” icon with a tick once the user taps it. The icon will also display the word “Liked” above it and the button remains in this state until the user unlikes the song.
Sprint review
After the two wireframes were sketched at the end of the sprint, I did a simple and quick A/B testing. Just over 50% of the users I showed these two designs preferred wireframe 2, those users thought this design would be more engaging and make sense due to its simplicity.
Sprint retrospective
After the sprint, we as a team came together to discuss what went well and what could be improved.
Sprint 2
After sketching in the first sprint which lasted 1 week, and then getting feedback, I added new product backlog items in the product backlog. The decision was made to take elements from both paper wireframes to create a final solution but heavily base it around wireframe 2 as more people preferred this design. The sketch on the right-hand side is the state of the “like” button after it has been tapped.
High-fidelity mockup
We took my final sketched solution onto Figma and digitised it. we made a mockup showing what the Spotify UI would look like when a user taps the like button to place the song in the “liked songs” playlist. We decided to make some slight changes through further user feedback, we changed the original state of the “like” button to a star symbol for consistency, and we also took the star from the 1st paper wireframe and combined it with the confetti around the button with the word “Like” on top of the word in paper wireframe 2. The “like” button will remain in this state until the user unlikes the song, and then it will revert to its original state
The notification bar notifying the user that the song has been placed in the “liked songs” playlist would no longer appear. This means the user wouldn’t have to wait for it to disappear before being able to click on buttons it blocks.
The mockup on the left below is the song before the user taps the like button, the mockup in the middle is when it has been liked, and the mockup on the right is its state 2 seconds after it has been tapped.
Sprint review
The designs were shown to the users, here are some of their feedback:
User 1: “This is such a cool idea”
User 2: “This is a great solution to the pain point”
User 3: “The design gets a 5 star from me”
User 4: “Superb Idea, a good problem solver”
Paper wireframe idea 1-
Rather than the Like button changing from a “+” to a “tick” icon, I chose to change this to a star as a star is a symbol of positivity and happiness, almost as if to say the user is happy and positive about placing a song to their “Liked songs” playlist. The user would also be able to swipe the notification bar down as soon as it appears, this would allow them quick access to the navigation buttons below if they want to quickly switch screens.
Sprint retrospective
After the sprint, the team discussed the sprint, we discussed what went well and what could be improved.