Sasha Lantukh’s Design Practice

Ocado Product Card Concept (Figma)

What’s the anatomy of a typical food store e-commerce product card? An image, title, price… is that about it?

This product card template contains a collection of components that you need to consider depending on your food store’s complexity, such as:

  • image (dimensions and ratio)
  • tags (new, shelf life, veg, country of origin, discounts, etc)
  • favourite/wish list/bookmark functionality
  • action button (add to trolley, add by weight, more than 1, etc)
  • price (now/was)
  • product name (length limit?)
  • reviews (leave a review, previously bought)
  • icons set

Some more complex shops might require all of the above. How to lay it all out?

Each of the above can have a dramatic effect on your customers’ experience. Their expectations are set based on your competition and industry standards.

This example is most appropriate for an online food store retail and large complex stores. But most things could be removed for smaller/boutique shops.

There are still a few things missing from this example, which will be added in subsequent releases, such as:

  • quick shop state
  • image scroll

I am sure I forgot a few things as well, would love to know what else could go into making a product card? Comments below…

Update

Latest version includes a Responsive screen utilising the latest Figma’s auto flow features announced at Config23.

Other Case Studies

UI Branding Product Design Branding UI Product Design Icons Web Design Church Branding Infographics Web Design Web Design UI/UX Design Branding Branding Web Design