I am designing a web page for an ecommerce company. The company sells product X which comes in various flavours. e.g x in apricot flavour, x in peach flavour.

There is a dedicated page where one can order various samples of different flavours of product X. How do I go about designing this page in which many if not most products can be discovered.

My users are mostly connoisseurs who wouldn't like to experiment with new flavours so the page where they can order samples has to be designed in such a way that they can view more flavours of product X.

enter image description here Following are the elements in the page:

  1. 7 filter options which have been aligned on left
  2. List view of products available for order
  3. Sort options

I was thinking rather than having a list view I would like to have a grid view with each product taking a container. Any thoughts on how to make it better so that users can see more products.

enter image description here

  • Based on the product flavor, can you add recommendations of similar flavors? – Mark Bubel Dec 15 '14 at 17:09
  • 1
    it sounds like 'flavour' is an attribute of a product and therefore should be controlled by the filters on the left. You said your users are unlikely to experiment with different flavours, so having the options anywhere else is likely going to upset their focus. filter best option – colmcq Feb 16 '15 at 9:12
  • "who wouldn't like to experiment with new flavours" and "they can view more flavours". I am not getting what are you aiming for exactly. – Sol Mar 18 '15 at 12:06

You could take the approach of app stores and tv/movie streaming sites and present the product samples in loose categories to aid discoverablility. E.g:

Popular flavours:
[] [] [] [] []

Exotic flavours: 
[] [] [] [] []

If you like strawberry:
[] [] [] [] []


I'd keep your grid view and implement either an expand button or a horizontal slider to make it easy for users to see lots of samples on the page in one go without scrolling.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.