Best way to populate multiple lists from a shared data source

Question

I'm trying to design a UI wherein a person is moved from a list of people into one of four mutually exclusive groups. Each group needs to be shown on screen (there are typically less than 15 people in a given group).

The workflow is to find a user and then add them to a list, so I think having one place to select users is more intuitive than having a selection region for each group.

I'm currently split between two layouts. In both the list of people would be docked to the left side of the screen and go from the top to the bottom. The first layout involves splitting the rest of the screen vertically between the lists. The second would be arranging the group lists into a 2 by 2 table.

I'm not really thrilled about either a few these ideas. Which of these seem less overwhelming to the user? Or is there a better flow that I'm missing here?

Answer 1

Think of it as if you have a list of values and you wish to segregate them into different buckets depending upon some condition. You can then have a table of all these values with the four buckets right below it as shown in the picture below:

This layout will also prove to be useful when you try to make your design responsive for tablets. You can keep reducing the columns of the table with less-significant data and the 4 blocks can wrap around when available width is less.

Also, on a side note, making the records draggable and droppable in the blocks will make it more intuitive then performing the same action using clicks.