Feedback needed on product card design

I am currently developing a device using LVGL to search for electronic components and manage their stock. As I am new to UI/UX design (I’m only 15 y/o), I would greatly appreciate your feedback and tips on improving the UI, specifically for the product cards and detail pages.

For the product cards, I’m uncertain about the optimal placement of the items, and the Details button doesn’t seem quite right, though I can’t seem to find the issue. On the detail page, the layout also seems off, especially for the description area, which can be quite long and appears awkward.

I am using Squareline Studio for my UI design. Any advice on enhancing these aspects and the overall design would be highly valuable.

Thanks!

Here are screenshots of my current product card and detail page:

rich text editor image

These are just personal opinions, so take them for what you will.

First of all, pretty solid start. It looks decent and could be accepted as a production release, but could definitely use some polishing.

  1. The blue bar bothers me. It should either
    • be connected to the card below
    • have a rounded bottom corners - OR - the top of the card below should not have rounded corners.
  2. Overall, it needs a bit of breathing space. More padding
    • Some top/bottom padding on the top bar.
    • Some left/right padding inside the large card.
    • all sides In the white cards inside the large card.
  3. Watch your color contrast levels. The text in the blue bar, and in the buttons are not far enough away from the background colors and could cause problems with people with vision issues…
  4. Careful with the color choices for in-stock and details. People with Red/Green color blindness will have problems with those choices.
  5. The text of the details card looks to be skewed left of the image, though I’m betting that’s an image/text width difference. Just looks odd.
  6. What’s the difference between the $0.15 and the $15.00 on the details card?

The blue bar is not part of the design. It is added by SquareLine Studio to differenciate the different screens.

Can you explain what you mean?

About the detail button, do you know what makes it look strange/inconsistent and how could I fix it?

The $0.15 will be removed as I want to make an horizontal scrollable area to show the details for different provider with 3 of the current cards (the one with the $15.00 inside)

Ah, then it seems the cards need some sort of title to them. I assumed the blue bar WAS the title.

The image looks centered, but the text is left aligned and not full width (or doesn’t appear to be).

I didn’t say strange/inconsistent. I did say you need to increase the color contrast on the text of both of the buttons but they were otherwise fine as designed.

I DID say to be careful using red/green as the color choices because someone with Red/Green color blindness will see both of those as black (I think…I don’t recall exactly). You can get around this by adding some sort of iconography to both so they’re not solely dependent on color choice.

Also, the “in stock” “button” is not a button. How could I make it look less like a button?

Here’s few tips:

  1. Product Card:
  • Center the image and text vertically for balance.
  • Move the “Details” button to the bottom right.
  • Highlight important info (e.g., part number, stock status) using bold text or colors.
  1. Detail Page:
  • Use a scrollable text box for long descriptions.
  • Maintain consistent margins and padding.

Isn’t it already that?

Remove the background and just display it in a color, And while I hate to repeat myself, add an icon to signify for those who are color blind. Don’t rely on color alone.

What icon could I use? I searched for icons for in stock, low stock and out of stock and There a not much icon that would fit.

Quick search of out of stock and in-stock icons bring up these. Make sure whatever you use has licensing for use.

Low stock seems arbitrary so I personally wouldn’t worry about it, unless you want to include that in the text - something like “in-stock (only 10 left!)”

Thanks For the icon. For the stock, it is only for user to know how much they have left of this component in their personnal stock (not like an online store). So wouldn’t it be better to simply say “low stock” and on the detail page say “low stock - consider buying other part soon” ?

I came up with this new design:


I made it clear that the “In Stock” was not a button and I added an icon and bolder font for the details button. I did not put an icon for the “In Stock” since the resolution is so low that it looked very bad and it was like if the icon should not be there.

Is this for an internal org, or an point of sale with external customers?

If internal, I’d probably be a little more direct with it and include a quantity

100 in stock
or

Quantity in Stock:
1,000

You need to make that text darker or at least bold. There’s not enough contrast and it’s hard on the eyes to have to read that constantly…

For context, what I am making is a system for users (maker) to track the stock of their electronic component in their own component “library”.

It it’s for makers, then including the quantity on hand makes sense.

It could also work for external users, but that always seems like cheap marketing/scammish to me.