Songsterr is a tab player and mobile application designed to help users learn songs on bass, guitar, or drums. This was a passion project for me, as I use the app myself and have noticed the same issue as other users have. The app lacks categories or filters to browse songs. This is an unsolisited redesign.
The only way to browse songs is through search or by using the two filters provided. These filters are instruments and tuning, which still leave hundreds of songs to browse through. In summary, the easiest way to find a song is if the user already knows what song they want to play. This can make the app not friendly for beginners if the users can’t find songs that match their level or preferences.
Redesign
To improve the app’s browsing experience, navigation was moved to the bottom, making it easier to reach with a thumb.
According to Material Design 3, which was applied making improvements to the interface, there were too many trailing icons in the search bar. These filters were relocated to new chip filters under the search bar.
The menu icon was relocated to bottom navigation from the search bar. The menu opens a list where users can choose to log in, get information about the app, or edit settings. The menu icon makes more sense in this case to be in the bottom navigation, as it has little to do with the search function. It is better to cluster related items together. The top menu text and icon color was edited brighter to bring the contrast ratio over 3:1. Clustered elements should have enough contrast to make it easier for the user to distinguish each one.
New filter chips were added below the search bar. The chips can scroll horizontally to show all the filter options. There is an option for the user to remove all the filters effortlessly. The available filters are instrument, type, genre, tuning and level. Instrument and tuning were pre-existing filters. Type (electric or acoustic) and genre were added based on user feedback. Songsterr’s desktop application has more filtering options such as filtering songs based on their difficulty level. This filter was added to make the mobile application more beginner-friendly and to attract more novice users, even among experts.
Sources and tools:
Material Design 3
Figma