I hope this is the right place for Web design advice; considering StackOverflow also, but not sure if pure design questions are welcome there?
I'm trying to design a Web page that is to display information contained in 3-dimensional lists. The data model is such that you have a list of persons, where each person has a list of lists of items. When choosing a person in the UI, that person's lists should be displayed, and when choosing one of the person's lists, that list's contents should be displayed in a separate pane. I also want to make it possible to manage the selected person's lists (add/remove) as well as list items. I'm using Twitter Bootstrap as my Web client framework, which makes it easy to create horizontal and vertical tab navigation components.
I've considered using vertical tabs in the leftmost column for the persons, and a horizontal tab bar in the main pane for the item lists (with items beneath that), but I'm thinking it'd be difficult to design a dynamic tab bar (if the number of tabs gets huge especially). As a simpler solution, I'm considering a second column of vertical tabs for the selected person's lists. Lastly, I've thought of making the vertical user tabs collapsible (accordion), so when you expand a user you can see his/her lists within the same nav component.
I've come up with three design mockups so far, of possible avenues I may explore further. Would appreciate very much if someone could provide some practical design advice! Keep in mind that it should be implementable in HTML5 + JavaScript, and should play nice with Bootstrap. Also remember that it should be possible to manage (add/remove) lists and items. Feel free to suggest designs that diverge from my mockups.
P.S.
Don't worry too much about my using the Twitter Bootstrap framework; if you're not familiar with this, it works through CSS definitions and can be customized so I'd think any HTML(5) design you come up with should be possible to integrate with it without too much hassle.