Advice for designing a multi-vendor product list

Question

I'm working on a web app that allows users to quickly build a custom quote by searching/filtering our (large!) product database.

My problem is that we will often have multiple vendors offering exactly the same product. I'm not sure if I should design it so each vendor's offering gets its own row (resulting in lots of duplicate offerings in the main view), or if there's a good way to "de-dupe" the main list and nest vendor offerings within that master list item?

Amazon deals with this problem by displaying the vendor with the best price in the main list, but allowing you to click on the product and pick a different vendor if you so choose.

We're really trying to emphasize clarity and speed (in that order) in the way we deal with this. Are you aware of any design patterns that apply here, or notable solutions to this problem elsewhere on the web?

Answer 1

Another solution could be to show each product only once but the list of vendors inside the row. This way you can not only show vendor but other types of information where the products has many different kinds, such as color.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This use more vertical space but gives a better visibility for the different vendors. By using hints such as text size and typeface you can give an hierarchy to the displayed information. So that it's clear that the products has many vendors/colors or other. While still only showing one product.

Answer 2

IF different vendors have the exact same product at different pricing you could probably follow the Amazon way by showing different vendors order by price in ascending order, like the following mockup:

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you show the combo-box dropdown arrow, the user would know that there's more vendors available. If there is only one vendor - use just simple text so the user knows there's no other vendor to choose from.

Answer 3

The main ambition in the user is to search for products and see how cheep can I buy this..? The user will, at first, not be interested in how many vendors there are that offers the product, or even which vendor is the cheapest, that becomes interesting first when a user is set on making a purchase.

To cater for this goal I would suggest simply listing different products based on the search pattern. Eg. search for 'Sony' and the site lists all products from that brand with the cheapest price displayed.

Once the a user wants to investigate a certain product more thoroughly they can click that product and get a list of different vendors with their prices, product information, maybe a feature to compare with products in the same category, etc.

Answer 4

Let's discuss two places, the item list (search result rows / category browse) and the item details (page seen after you click on one of the rows).

1. Item List

   In my eyes, you should return one row per product, meaning if 5 vendors offer exactly the same product, you should have a single row for all 5. This consolidated row should appear almost identical to other single-vendor rows (IMHO Alvin's multiline approach is too cluttered, and Benny's combo-box as well). I think having several types of rows is confusing. Regarding the item price, you can either use the lowest price (used by Amazon and eBay) or give a range (ie. $500-$750). If you really want another indication that this is a multi-vendor row (although I think it isn't needed), I would recommend an icon (with a tooltip explaining it), or maybe a numerical icon (with the number of vendors in it).

2. Item Details

   The multi-vendor product should have a slightly different item details page. Instead of the traditional price + "add to cart" button on the top, you should have a table on top showing the different vendors. Each vendor will have its own row (probably ordered by price). You can include a column for every details which is specific to this vendor: the vendor's price, the vendor name / logo, "add to cart" button for this vendor. Also consider other fields such as quantity, availability, thumbnail image which may be specific to a vendor. If and only if every vendor supplies his own item description and images, consider sending to a separate Item Details page (for each vendor) from this table.

Keep in mind that if this product appears anywhere else after the vendor choice has been made (ie. when the product is found in the buyer's cart waiting for payment), it's a good idea to show the vendor name (in a subtitle or something).

As you've said, the best examples of similar design patterns are Amazon (many multi-vendor products) and eBay (traditionally have a row per vendor but trying to change that, take a look at eBay categories like DVD's which are easier to split into defined products, see http://pages.ebay.com/sellerinformation/news/highlightingvalue.html#hi).