I've been working at Kohl's during the last 4 years and the PDP has been in constant evolution.
This collection of screens show some of the updates and exploration made during 2017.
The intention was to create a clear and visual way to include a set of overlays where the user will be able to customize and filter the exact product they were looking for without leaving the product page.
For this specific project the team received a base wireframe for the main PDP scroll and a user flow that allow us to define the possible scenarios during the creation of the size and color overlays.
This experience was implemented for multiple mobile platforms, including iOS, Android and web. Right here you'll be able to find examples for some of the mobile web exploration.
As showed in these screens, the size options menu was placed inside a bottom drawer that appears on top of the product details. This resource is the perfect solution for mobile layouts where screen space is limited.
At the same time, the user can easily go back to the product description by clicking "Done" and maintaining the same scroll position.
The same kind of interaction worked for solving the "Colors" selection menu:
While creating this scenarios it was very useful to include small details like the "out of stock" and "selected" states for design validation and development clarity. This will help to reduce an open interpretation from any department non related to experience design.
Another detail I was able to explore was related to the different offers scenarios that users can run into based on their engagement level. Kohl's allows users know an item's price, including how much it is after offers stored in their wallet. This feature is displayed as "Your Price". The store will automatically calculate the final price before buying it.
As part of the offers variations, there was the need to create multiple badges based on different options to present offer scenarios. These badges are presented below the "Your Price" and offer description.
As mentioned at the beginning, this explorations and implementations had to be adapted to all digital channels available. Been the most common Webstore (desktop) and Tablet. For this cases, no overlays were necessary. Most of the information was placed upfront (like the colors and styles) or inside a dropdown menu (like the sizes).
