Rethinking Product Details

pdp-chart

Overview

Although the Product Details Page (PDP) is a responsive single page app, it has struggled to convert users. There is an overload of information that lacks hierarchy. The information architecture has been convoluted by too many marketing and third party vendor initiatives. When we're meant to delight and suprise the user, we've ended up creating usablity friction. Consequently, this has lead to decision paralysis and site abandonment.

In order to streamline the user experience and convert more users, we want to clear the path to purchase in the PDP itself, delight the customer by optimizing the experience, and predict user behavior by improving product recommendations.

While visits to Product Array were +93% YOY on Saks.com, flow through rates to Product Detail were -4% and Add to Cart remained about flat to last year with +1% at close of FY 2016. 

Current State

In its current state, the Product Detail experience lacks balance and information hierarchy. One of the main issues our users face is that the image player is not intuitive. Rather than showcasing the product and creating delight, the experience is flat and cumbersome. Zooming in and out requires more than one click and the user must investigate how.

 In addition, the page real estate is unbalanced with certain areas being over populated by information. Users do not have a clear path to purchasing due to the high amount of options and promitions which often leads to decision paralysis and abandon.

page 4

Prioritizing the Path to Purchase Architecture

We broke down all the Product Detail components and ranked them in hierarchy of user decision making. We marked primary those elements that are necessary for users to complete a purchase; secondary those that have a positive effect on users; and tertiary those elements that assist in enhancing the Product Detail experience but do not prohibit the user from continuing to the path to purchase.

By establishing this hierarchy, we can focus the experience on the primary elements and showcase what users need most to complete the purchase. Once these elements are prioritized and highlighted, we can also prevent future secondary or tertiary from infiltrating the primary experience.

page 5

Sketching and Ideation

Firstly, we wanted the player experience to be intuitive and effortless. In this version,  the user scrolls through the images on load, easily zooms in and out with one click and the zoom is a whole page takeover where the product's details can be viewed up close.

We organized all the primary IA elements to one area that remains sticky once the user scrolls through the images.  Lastly, the tertiary elements were organized in card designs in order for them to be interchangable based on importance. In this way, the Product Detail architecture is not affected by tertiary elements (ie, promotions).

page 6

In the second version, all product images are directly presented on load. We rearranged the primary elements as a sticky component so they're everpresent to the user, creating a new unique experience.  Secondary and tertiary elements are organized in tabs rather than cards to expose product details.

page 7

Testing Our Assumptions

To validate our assumptions, we user tested three experiences similar to our initial sketches for both desktop and mobile experiences.

The majority of users chose the Gucci PDP as the easiest to use for both Desktop and Mobile experiences. Users were looking for control and for their actions to be replicated. Frustrations were present when results didn’t reflect users’ actions, i.e., no zoom on click, etc.There was also an overall consensus that ‘Related Items’ and ‘Complete the Look’ are useful to understanding the product better. Users looked for recommendations.

Overall all users wanted a zoom functionality. Most preferred to have control on click (Gucci), vs on hover (Farfetch) and all responded with frustrations with the lack of zoom (Reformation).

"Gucci was the best as far as zooming in on the picture and seeing detail. Farfetch had a close up image but you couldn't zoom in more. The last site didn't show the detail hardly at all. "

All users had no issues locating details, regardless of location. Price clarity was a point for all users.

Dropdown design did not hinder usability but users found frustrations in translating sizes (European into US) and ALL referred to size guides. Keeping relevant components close was a priority.

page 11

Creating the Optimal Experience

After testing we made enhancements to the Product Detail UX. We enlarged the image player. We created a primary elements compoment which includes only those elements needed to add to bag. After testing and looking into visitor traffic, we established that the size guide and FitPredictor should bealigned with the size section.

We created the cards components inside a tabular structrure. In this layout information is not hidden behind cards, but we still maintain a flexible structure for future enhancements. From testing results, we confirmed that exposing the product details was necessary to the product experience. we also created a flexible promotions component to promote marketing initiatives and SaksFirst.  We also brought Reviews further up the layout so users could easily toggle from the product details.

page 8