1

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

3
  • Based on the product flavor, can you add recommendations of similar flavors?
    – Mark Bubel
    Dec 15, 2014 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, 2015 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.
    – Harshal
    Mar 18, 2015 at 12:06

1 Answer 1

1

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:
[] [] [] [] []

etc.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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