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: enter image description here

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

  • 2
    Why is the PM making comments like this? Isn't that for you and the client to decide on?
    – JonW
    Commented Aug 3, 2015 at 10:43
  • I've had this experience before where people who have no design background (when I say this I mean 0 design skills) try to give input just so their job is justified. It sucks but it also happens.
    – UXerUIer
    Commented Aug 3, 2015 at 12:06
  • @JonW it's an internal project. The PM is kind of the client here...
    – algiogia
    Commented Aug 3, 2015 at 12:51

2 Answers 2


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: enter image description here

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.


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/

Your Answer

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

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