Mix-n-Match

Challenge: The business wanted to create a seasonal promotional site for the swimsuit in-house brand, Stylus, that allowed users to explore different swimsuit combinations. The inspiration came from competitors who created similar experiences such as Victoria Secret. The user would be sent here through different entry points and promotional banners on the main JCPenney site. 

Once on the Mix & Match promo site, the user had all basic functions and the ability to "Add to Bag" through the promo site. In addition they were able to: 

• Explore swimsuit combinations both through the On Model view or Product view.

• Randomize their selections.

• Filter through both silhouette and/or color combo.

• Save for Later.

• Share their combination to social media channels.

• View more product information.

• View helpful guides; sizing guide, fitting guide, etc.

Solution: The biggest challenge was to create a seamless design in relation to the outdated JCPenney website that was being redesigned, yet create something for a younger target market. Allowing for a sense of delight in the exploration with the goal to "Add to Bag". After a handful of iterations and sketching through different options this was the final outcome that met all of business' requirements and created a new, yet consistent, branding experience with the main JCPenney website. 

Some of the design challenges that arose were as followed: 

• Having to create a layout where the user was able to view both the product details and the product carousel for exploration in the same view. I explored several layouts: having the model as the main focus located in the middle was one of the initial iterations but the the problem remained that the product information would be hidden. Requiring an additional and unnecessary click for users to see minimal but crucial product information.

• Creating a filtering mechanism that allowed the filters to be visible for the user during the exploration phase. Having both the silhouettes and color for filtration became a challenge in layout. I didn't want to overcrowd the experience with too many options.

• The location of additional options for the model/product view became cumbersome because of the amount of options already present to the user for the exploration, filtering and browsing of the products. In addition the shuffle, rotate, the toggle of product/model view options was necessary to be visible. I played with different locations and options but settled with creating a footer utility nav below the product/model view.

• Creating the visual differentiation of the product availability of the different sizes was also crucial. The product page design on the JCPenney site had outdated, really bulky buttons so it didn't match the design aesthetic that was targeted for this promo site. After exploring different options the business approved this iteration with the faded treatment of the sizes that were unavailable.

• The other big design challenge was working through the scenario of when a user is exploring but would only like to only buy a top or a bottom, not the combo. Creating the a seamless "Add to Bag" option for both the individual products and the combo created was a requirement. The verbiage became a point of contention, the business felt that instead of just "Add to Bag", the usual text associated with this action, it needed to be more descriptive. So, as seen below, the middle of the product information column allows the combo Call to Actions to be present; and both the top and bottom product information have their own "Add to Bag" CTA's as well.