I'm trying to design this feature, but so far not much luck finding any decent implementations of this feature. one example is http://www.bonarium.com but even that is pretty basic.

what would the user flow be like? for now i think the feature could be triggered when a user add an item to cart and then browses to a category that compliments the 1st one (e.g. 1st shirt, 2nd pants)

and which pages would this feature be able to be accessed from. catalog? pdv? cart?

how would the user be able to add products into selection of products?

  • Way too wide ranging. Personally I would start by creating your hierarchies and then asking here whether users agree they make sense, flow and are logical. Commented Jul 8, 2014 at 13:43
  • This question is as interesting as badly phrased.
    – Crissov
    Commented Nov 14, 2014 at 19:07

2 Answers 2


Customers can either combine a piece with more from the same set/collection (e.g. bra and knickers in lingerie or parts of a formal suit) or they freely choose parts of an outfit and a set or piece can also be shown in a different fabric, color, pattern or design. This can be divided – also visually or by gestures – into horizontal and vertical alternatives selection.

kid’s game

Classic mix ’n’ match or pick ’n’ mix or paper doll dress-up games for kids usually feature 3 vertical parts, i.e. either eyes, nose, mouth or head/hat, body/top, tail/bottom, but you’ll also find 2 or 4 parts and horizontal alignment.

My first intuitive design would be to copy this approach and let users switch items by vertical section or horizontal style. The example linked to in the question has just top and bottom parts.

mix and match outfit generator with 5 items
(source: teamsugar.com)

Outfits in those sexist fashion/lifestyle magazines often consist of a standard set of components, something like main (top, dress, shirt), jewelry (earrings, necklace, ring), accessories (gloves, glasses, hat), legwear (skirt, trousers, pantyhose), footwear (socks, shoes). Since clothes are worn in multiple layers (which are not always covering lower ones fully) and their back and side views may also be decisive, that amounts to a non-trivial design task. Magazines tend to show the pieces next to (instead of on top of) each other and a picture of a mannequin or model or starlet wearing the outfit.

Diablo character inventory
(source: blizzard.com)

Another less obvious example to look at are computer games. The inventory view of classic role playing games conventionally lets the player put clothes, armor and weapons onto their character. Elsewhere, avatars can be designed and dressed even more freely, but a shopping site will probably neither have nor need flashy 3D models of all their stock items.


In broad terms the flow should be centred about the users focus point - namely the ensemble the user will buy. If the right UI is achieved this display should be ever present.

Few high-level approaches

  • Have browse tools that will "drop" an item onto the 'mannequin'
  • Build a matrix of looks (i.e. generate real-time masonry portfolio) based selected mix-and-match items. This could be very useful for comparisons.
  • Rather than showing a picture of an item in isolation, have mannequin "before and after" images on every catalogue page.

Also note that even if you don't retail jeans or basic white T shirts, the user may want to see how item would work with a number of "wardrobe staples" so do have these available as well.

Part of the enjoyment of UX is forming new experiences, while learning and borrowing is valid, sometimes you can do better than what is currently out there. By way of ideas the Wii Mii dress-up UI may be of interest.

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.