Logistics
Specs: Designed in Figma for iPhone
Time Frame: January 2023 – March 2023
Role: UX Designer & Researcher, UI Designer
Contents
The Problem
User Flow
Wireframes
Hi-Fidelity Mockups
Next Steps
The Problem
How might we make the most common information easier to access for the average listener?
Three Main Problems
- The information displayed in this Spotify image can only be accessed by the ellipsis at the top right corner of the phone.
- There are too many options which causes the user to have to scroll down to specific information, this extends the user’s journey unnecessarily.
- Artist info is not accessible within the immediate region the user will be in when wanting to find more information about a new artist.
User Flow
This user flow represents the four different possibilities the user has when interacting with the utility bar. The flow starts from the main listening page of Spotify since this feature is only accessible from the listening page. Once the user has gotten to a specific page from the utility bar, their journey is considered over. However, they could go back to the main listening page to access other feature from the utility bar.
Wireframes
The wireframes below represent the building blocks for the new utility bar. While creating these wireframes, I wanted to make sure they fit in with the rest of the Spotify app and seemed like a seamless integration rather than a completely new redefinition of the app. The utility bar acts as a useful edition to the app and one of my main goals was to ensure that existing users of Spotify would not have to get used to the new feature, or take on much of a learning curve.
Main Listening Page
Listening History
Recommended Songs
Alternative Playlists
Artist Info
This represents Spotify’s main listening page with the addition of the utility bar icons at the bottom of the page for easy access.
The listening history feature allows users to go back and see the song title and artist name within a playlist without losing their spot.
The recommended song feature shows the user songs they might like based off the current song they are listening to.
The alternative playlists feature shows other playlists that the artist or song appears on for the user to discover.
The artist info page takes an existing Spotify feature and pushes it to the front of the listening page for easy access to artist information.
High-Fidelity Mockups
The listening page of Spotify is similar to the original, except with the addition of the utility bar at the bottom of the screen. The utility bar was four unique icons that let the user know what feature they want to use.
The first feature is the listening history. This allows users to see songs they have listened to recently without pressing the back button and losing their place in a playlist or an album. This is especially useful when a user wants to know what a specific song or artist was a few songs back in a playlist.
The utility bar also shows what songs the user might like based on the current song they are listening to. Spotify has a recommended feature but only for adding a new song to a playlist.
The suggested playlist is a new feature to Spotify. While Spotify recommends users playlists on the homepage of their app, they do not recommend playlists based on a current playlist or song that is being listened to. This feature will gives users more power and choice over the songs they want to search for, especially if they find a new favorite artist or genre of music that they have not listened to a lot recently.
Lastly, the artist info page brings and existing Spotify page up to the listening page for easier access, while also improving on it by adding more quick and glanceable information. This will be useful for users who have come across a new artist through any of the other features that are in the utility bar and want to know more about them. Adding this to the listening page ensures that the user does not have to go digging around the app for the information, but rather has quick access to it at the bottom of the screen.
Design System
The design system used for this case study is either the same or very similar to the design system that Spotify uses. All of the colors are 1:1 with what the app uses, as well as many of the icons and the sizes of the album images or artist image. The typography text size is also the same with what Spotify uses.
Next Steps
There are some additional features for the utility bar that would be interesting to build out and test with users. Then I would want to do a user survey to see which ones would be most useful and popular with the users. While I am confident in the features that were provided in this case study, there had not been any user feedback.
Additionally, I would like to set up some usability testing for the app itself, and see if there is anything to improve on such as the font size or type of information given in the artist info section.
Recommendations
- Make sure any additional Spotify features remain in the app when doing usability testing, this will ensure that the users get an accurate representation of what this would actually look like.
- Ask users to compare the current way of finding the information on Spotify and then ask them to do the same thing with the usability bar and see if there is a difference in difficulty and speed.