Table of Contents
About this Web-App Idea
As someone who loves listening to music, I wanted to design and implement a website that allows users to find similar songs (to a song they like) based on the song characteristics that they have selected. The web-apps I have seen are limited in the customization of recommendations.
The Design
The design and wireframes were created using Figma. I used components and grids.
The user can search for a song that they like, then select the characteristics they want the similar songs to be similar by. Finally, they will be shown the song recommendations.
Design Iterations
- Initially, I considered having actions 1 & 2 on the same screen. However, it seems that the phone screen would then have too much content, with perhaps some song predictions overlapping the filters. So, I opted for 2 different screens for the 2 different actions of choosing the song and selecting the filters.
- For action 2, where the user chooses the filters, my original design had checkboxes for each filter, in a vertical list. I altered the design so that each filter would be a select chip, as I feel that this may allow the horizontal space to be better used. Since the select chips turn light blue when the user has selected the chip, the larger area of a select chip (when compared to a checkbox) may also more clearly display the user’s selections.
Wireframes
