Best way to represent product catalogue?

Question

I'm designing an interface used to configure a product catalogue. There are packages with sections, groups, sub-groups, products, prices and tariffs.

The current implementation uses a classic tree structure like:

• Package 1
  • Section 1.1
    • Group A
      • Product A1
        • Charge X
        • Charge Y
      • Product A2
  • Section 2.1
    ...

But the PM thinks is not intuitive enough. He would prefer something more "graphical", like:

but I'm not sure it would be practical when the package (or a catalogue) can have many dependants.

Answer 1

Using a flowchart as shown would indeed become quite unwieldily wide, but you can definitely turn a simple bullet list in to something more graphical.

For instance, if you have a maximum depth of about 5 or 6 (like in your tree example) putting it all in a horizontally orientated flow chart would already save a lot of space due to the horizontal nature of text:

And even if you keep the exact same layout from the tree structure, you could add icons and colors to convey information. For example, putting a $ instead of a bullet in front of prices. And by using light/dark/light/dark background for product 1/2/3/4. Giving each section or group a different hue. Or by having all categorization be one color, and the products be another.

Answer 2

This question is an opinion because it depends on your specific requirements. There is no one right answer.

The best advice I can give you is to look up examples of product catalogues and create a version that works for your requirements. Here is an example of a WP product catalog plug-in. http://www.etoilewebdesign.com/ultimate-product-catalogue-demo/