User story: Create a group and add some items to it through a filtered list.

I have a mockup but I am unsure where the list of groups would go in case I'd like to delete them or edit them.

enter image description here

Also, would it make more sense to do a wizard?

1.) Create group name 2.) Add items to group 3.) Save and start over to create second group

  • Who is the user and what is their typical/ideal workflow? Are they likely to want to create some groups and then add products to those groups arbitrarily or will they always create a group, add products to that group, and then move on to the next? The wizard only really makes sense for the latter.
    – Matt Obee
    Nov 13, 2014 at 15:53
  • 1
    Great questions. The user is an admin. Essentially they will create some groups during the onboarding process and they MAY edit these groups on occasion, but not often. But to your second question, they'll create a group, add some food items to that group and move on. For instance, they may create a group called "Proteins" and then add beef to it, chicken, and fish. Then move on. Then let's say they start selling tofu 3 months later. They'd want to come back and add that to the list.
    – themack
    Nov 13, 2014 at 15:57

3 Answers 3


There are two possible solutions here:

  1. User creates a group and adds products
  2. User explores products and then creates a group

Ad 1. This would work only if user understands the purpose of group and know what can he add to it and why. But in your case it seems that user should explore products first, since it's onboarding.

Ad 2. This would be better if user has to learn the purpose of group, explore products first and then choose group name. This seems to be your case.

  • You can see https://plus.google.com/circles for a reference of such grouping
  • Consider creating some default groups
  • Consider moving "add group" flow to separate modal triggered by "+Add group" button
  • Products boxes should be visually different and smaller than group boxes, so that smaller elements can fit into larger elements
  • After adding an item to the group, show this item under the group as well, so that user can see what's in the group or at least show counter (like Gooogle plus circles)

Your hierarchy is Groups -> Items. I'm assuming the user must select or create a group before dealing with items. So you probably want to start with the list of groups in a panel on the left side.

Creating/editing a group can either be done within that panel or within a popup/lightbox.

To the right of the groups, you can list the items in the given group. Think of an email application where you select a thread (group) on the left, and see the messages (items) on the right: http://designinginterfaces.com/patterns/two-panel-selector/

Now for the filtered list adding: Instead of having the user "add an item to a group," could you consider having them "select the items" from the list that they want to be associated with the group? Think of the groups as labels applied to a master list of items.

By default, the list of items could be filtered to show only those that are selected for the given group. The user can expand these results by activating one of the other filters, like produce, thereby showing all the produce items, selected or not. The user can see which produce items are already selected, and turn each one of them "on or off".

With this model, you'd always want to display the total number of selected items for the given group, and have a quick link to get back to the default view to only show selected items.


list of groups can be shown in the two ways

  • It can be expandable towards the bottom on Tap on the group
  • On tap on the group you can open a new page with a list.

Wizard option will make sense with my second solution of the new screen.

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.