I'm working on a website redesign for a company that has a lot of b2b products & services. Their current solution is very content heavy (overwhelmingly so) and involves a very linear approach to navigation (where users have to drill down to deep levels of the site to find information about their products).

We've got the client to cut back their product information to a few key points about each product (enough detail to answer key questions and interest users to pick up the phone/contact sales) and I'm trying to come up with a UI solution that allows people to easily explore their offerings in a very flexible way.

What I've come up with so far is a listing of all their products with filtering and sorting capabilities (by which industry the user is in, what their job role is, or what problem they're trying to solve) as well as the ability to search for specific products.

I want to try to avoid taking the user to a detail page for every product so they don't have keep clicking back and forth between a detail page and product listing - as this may be more of a browsing/exploratory experience once the user has narrowed the list of products down. Does anyone know of any good examples of a UI that would allow users to easily explore a list of products and details without using a detail page? So far I've tried expandable panels/details, but some members of my team were concerned that there may be too many details for an expandable panel.

closed as too broad by Graham Herrli, Devin, JohnGB Nov 12 '15 at 1:50

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Unfortunately, I think this question can not be answered generally. The list of features to implement, the amount of filters and sorting methods, using a quick view or not and so on and so on HEAVILY depends on your use case. If you would specify the product or the user audience, the device (mobile & desktop filtering e.g. is heavily different, in the worst case) - this could help. – Jan Nov 11 '15 at 15:16

Ikea has a great implementation of product catalog that may serve as inspiration for the problem you're trying to solve, though I'd imagine service catalog may not have any visual components.

As you move your cursor over each product, you get most important product information (dimensions and colors) a hover-over, so you don't have to drill-down into full product detail page.

Ikea probably spent some time determining what piece of information would satisfy the needs of most users 80% of the time, and put them in the hover-over, so you will need to do a similar research to see what would cover 'your' 80% scenario, and fine-tune as you go.

You can check try it here http://www.ikea.com/us/en/catalog/categories/business/20649/ but I've pasted an animation below to prevent link-rot.

enter image description here

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