We’ve talked about this on other channels, but I took another pass and have some more feedback.
Generally, I think this is looking very promising. It’s modern, makes the website a lot more user-centric (which is currently missing), and the design is of good quality.
I will first echo what has been said before about the trash icon being too close to the love/hate icons and the possibility for error there.
I also agree that tick boxes on each row + batch actions would be a plus.
The placement of the previous/next buttons seems a little bit off. What does it look like with the previous button left-aligned with the listens table and next button right-aligned? Currently the margin to the right of the next button makes it look misaligned.
I like the minimalist player on the bottom left ! With our grand plans of integrating the LB player on other MeB websites, I think something like that will be a lot easier to integrate compared to the current LB player. Eventually, I’d also love to see another version with an even smaller footprint by having the image be a background of sorts.
I’m not a big fan of the purple pills at the top of pages (“Recent listens”, “Chat the world loved”). I think they have a bit too much presence in the page, and look like a call to action—like a button (when the real button is in the navbar on the left)— rather than a page title.
Speaking of the navbar to the left: I like the light grey background. It’s subtle. I think the highlight on the nav elements isn’t right though. That white is a bit too close to the grey and isn’t very visible. It would (at least) need to be couple with some other indicator like a • in front of the nav item, or an underline, or white text on a darker background, or…
If it’s visible enough, I wonder if there will be a need for the page title above the listens table.
You have two different styles of small cards on the right side that could do with having a more uniform look. The rounded-corners-and-a-shadow ones could do with a bit more work; I’d say the shadow is a bit strong if the background is white like that.
On the other hand the “You might also like” column ones are a bit plain like that.
I’m sure there’s a good solution to find somewhere in between that will fit both scenarios.
When you get further in the project, let’s also put our heads together to see if we could find a good way to add some info to each listen that has an MBID (and consequently we can fetch metadata for it).
An initial thought I wanted to implement on the current listens pages was to make listens expandable (accordion style) to display more info underneath.
This could be metadata for the track, number of times you listened to that track/artist, maybe a button to show/copy the listen json, etc.
Maybe depending on screen size we should present the rows a bit differently, mainly to make them more compact on smaller screens. On your mockups there’s 8 listens per page, which isn’t a lot. There might be a need for a condensed version of the listens without the artist name and thumbnail.
Overall great work, it’s really nice to see some well designed components and some care for user experience !
I look forward to seeing the continuation.
And as always, don’t hesitate to come to me for any UI/UX questions !
.
