Agency | SapientNitro Role | Art Direction, UI, Visual Design Client | Michael Kors Link | Shop The Look
Michael Kors came to us needing a way to display a new way to look at outfits that hasn't been seen in the category before. Essentially, they were looking for a frictionless way to display
full outfits while making it not intrusive to the user. Knowing they were going to start touting "The Look", they needed a way to display The Look amongst the rest of the site through their PLPs,
as well as a new PDP for The Look itself. Any creations would be implemented on the site globally.
PRODUCT LISTING PAGE
For the Product Listing Page, the idea is that the user would be able to look at a general category page and still be able to find the The Look within it. We had a doodle a little to figure this one out. After we decided on two ways of visual treatment through differentiation of the product photography and type style. We also decided to add a filtration system to the left rail so that the user could filter through different Looks of the their choosing.
We account for various product type scenarios.
CONTENT IN THE GRID (CIG)
The client asked for different ways in which we could differentiate content within the PLP grid system. That said, we proposed using a CIG system that would be templatized throughout the site. We narrowed down three different sizes that the user could choose along with individual business goals that could be implemented within each CIG template. The goal was to have each template be robust but also live within the MK look and feel as well as functionality. One CIG module we came up with takes up an entire 4 row column within the grid. It has the ability to expand down thus pushing down some of the grid content to present content from within the grid. The main goal behind this particular module is to appeal with an editorial approach and tell a small story from within the PLP. Another CIG that we came up with encompasses another group of 4 products but from a vertical approach. This particular CIG module starts off as a two-grid unit, and expands into a 4. Again, the goal of this CIG is to appeal from an editorial approach. From a visual approach, the idea is to maintain the 2-block visuals within the 4-block. The third and final CIG unit is data driven and pulls content through statics of MK choosing. For example, within a regular PLP, if the business side decided that they wanted to focus on just up selling handbags within a dresses page, they could pull their most popular bags and have them appear within the data driven unit.
Users would gain the ability to see The Look amongst their Search results. For example, for Brown Bag, the results of Brown Bag would also include any looks that contain brown bags.
product detail page
The product detail page would come into play after the user had selected on a look.
The PDP starts with a feature of the entire outfit. Included next to it are details and CTAs allowing the user to either buy all items included in the looking or to select the items individually by scrolling below. Picking the items individually allows the user to select specs and narrow down the items they do wish to buy. Content slot space is available under the look items including the one seen below allowing the user to see more of what "looks great with" the featured outfit.
buy all functionality
In the case that the user wishes to buy all of the items, they are presented with an overlay that takes them through a timeline experience of choosing their look items. As the user progresses through the process, dots under the image indicate decisions made by the user. For example, a black dot means that the user has chosen to keep an item within the look. A black 1px outline with white filler indicates that the user has wished to pass on the item, and a grey circle means that the user has yet to choose between having or skipping an item. The selected item has a 1px border around it, and the number of the item above the item name changes dynamically. We decided for the mobile version, to make all prominent CTAs sticky, so that that the user could maintain position on a mobile device.
ACD | Misook Ji UX Designer | Steven Wakabayashi UX Designer | Sue Kim