Could someone please spare a moment and get me feedback on stuff?
Also, is this by any chance anexample of the ol’ “recall vs recognise”?
Many thanks in advanced.
Leon
hi @leonthedesigner123
is kind of tough to give my feedback based on a portion of the page.
I guess this is a landing/category page and it would be much better to have the full context of the UI.
In terms of consistency we cannot figure out how you have designed the navigation, the other links, icons and buttons
Hi Luigi,
Thanks for having a look. The team and I have actually just now settled for an option, which I include below…likely some mistakes in there, but feel free to point anything out.
Thanks again,
Leon
thanks for sharing this!
I really like the color palette, it looks very attractive to me!
Regarding the way how you designed the “cards” I’ve some points. Of course, I am not aware of the research you’ve done in terms of benchmark and usability test. It could be that some of the points are already on your radar.
I’ve listed all of them here:
This is definitely A/B test material. I didn’t find the graphics all that helpful so I would instinctively go with what you did with labels above but definitely test if you can. I would also try with no graphic, just text or even an icon with the text and see what happens.
Yeah, I agree…Testing the concepts for this section in particular sounds like the way to settle it. 1 thing that’s already ruled out with certainty is: label underneath graphic – For a bunch of reasons, but the hassle in finding imagery for every possible category that will be effective in this format quickly revealed itself as a nightmare.
Icons were mentioned by some team members, but I was opposed to it, still kinda am…I just fear for how effectively the icons for the lesser ubiquitous categories will connect with different people’s mental models of said categories. Just as an aside, the idea for representing categories with product imagery was inspired by the card sorting we conducted for deciding on what the categories would/should be.
But anyway, this is getting slotted into the test script for sure. 5-second test or something sounds like an idea for this…What do you think.
For now, many thanks for your help!
Wow, I didn’t expect this much help! Thanks Luigi!
There’s rationale behind pretty much everything that you’ve commented on, so even if just for your interest’s sake", here goes:
CARD #1
The green bubbles – This is probably the comment that I agreed most on with you. It is a hassle to stop and focus on what the specifics of the different special offers/discounts are…at the very least they probably need to be rendered differently, perhaps in different colours. The pattern that I noticed from competitors is featuring the details of the special offer in plain text, just above the actual price of the item. So yeah, we’ll probably go back to the drawing board fir the green bubbles 
The heart icon is a standard pattern for adding a product to the user’s favourites list.
The card with the stepper: The stepper is what the purple “Add to basket” button turns into once clicked – Also a standard pattern judging by competitor analyses.
The “vertical scroll for more products” – I’m assuming you meant “horizontally scroll” 
…in which case, yeah it’s not a widely used pattern (I’ve only ever seen used on Amazon and iTunes Store…which are two outlets frequently used by our personas). This screen mockup (the home page) is the only place on the site where this horizontal scroll pattern is used…as it is just in the context of a promotional hero-section. Comment on this comment, if you could please…I’d love to hear your thoughts.
CARD #2
“Category name doesn’t stand out”…Yep, this is, afterall, part of what started this thread. Another approach yet to be tried is: Having the category name left-aligned…but I reckon you would still have a point with what you mentioned about the work involved in your eyes making their way through all the imagery: One solution to this potential problem might be have at least a tiny bit of white space separating the items in each category image (like the space between the bottle of Coca-Cola and the bottle of Vimto in the “Drinks” category).
“The chevron”…Yep, agreed. 's gotta go…it’s gone on tablet and mobile anyway.
The “link in the top left”…Yep, you probably win here too…Initially, it was positioned top-right.
CARD #3
The green rectangle – Yep, consistency seems to be a problem, or at least that’s a common observation from all the feedback we’ve had. The circle doesn’t suit the purpose in this scenario…the circle ends up covering most of the image…the green rectangle seemed as the easiest+elegant solution in regards to feasibility (for development) and scalability (both in regards to what content COULD go in here, and for when viewed on smaller screens). But overall, there’s likely a better solution.
“The bottom part of the cards”…
– The position of the heart icon here is due to test results revealing that the icon becomes invisible when overlaid onto these images.
– “The person icon” is intended to represent how many people a recipe will serve. But the positioning of the icon was intended to align it closer with the cooking time rather than the total price.
I’m going to stop there, as I’m running into overtime here 
If you are ever bored enough, do respond to my last point made about CARD #1, but either way, thank you very much again for all your help!
hi @leonthedesigner123
sorry for my late answer, here’s my feedback though
Did I somehow answered to your questions?
Hey Luigi,
You did! Many thanks for even more of your time in helping me out here.
I like your point about the heart icon on social media, so that’s something that will get a “Now, please add a product to your Favorites list” click-test or whatever.
…Your point about the horizontal scrolling too. From experience, implementing it is a piece of cake (even I can do it with my intermediate-ish HTML+CSS skillz), but I I like to place a tiny bit more emphasis on usability over feasibility, so I am paying attention to your idea of having a more button…we’ll see what I can coerce the rest of the team into!
Thanks again man, much appreciated 
you’re very welcome!
Please, keep us posted on the future enhancements though
Leon,
Responding to your first posting, there is a trick I learned from my father-in-law that I would recommend:
“take a quick glance and see which catches your eye first.”
In UX terms, which layout gives you the strongest urge to click to the level? The answer to that, in my opinion, is the “Top Categories” version - the action is “above the fold” and the images reinforce the choices.Otherwise, the eye has to process the image before knowing what the link goes to.
(By the way, if you or your parents ever bought anything from the Sears Catalogue, you’ve experienced the results of his layout expertise.)
Hey Rick,
Thanks for getting involved. I like that trick you recommended, will keep that it in the toolbox!
Had a look at https://www.sears.com/ and had to leave pretty quickly as my head started to ache
So you prefer the text-above-image version? Have to say that i do as well…and I like the point you mentioned about otherwise having to process the image first – which is why I asked if this is, by any chance, an example of recall vs recognise in my initial post.
Either way, another member mentioned that this is prime A/B test material, so there’s only one way to be sure – Still, I’m more sold on text-above-image.
Thank you for your thoughts again!
