Product Details Page optimisation

Product Details Page optimisation

Case Study: Using Lean UX to improve ATB conversion rate and decrease Returns rate.

Case Study: Using Lean UX to improve ATB conversion rate and decrease Returns rate.

TIMEFRAMES: 2 Sprints (4 weeks)
LAUNCH DATE: April 2017
ROLE: Senior UX Designer
COMPANY: River Island

Objective

Objective

Redesigning the Product Detail Page (PDP) and addressing key service benefits would see an increase in Add to Bag (ATB) conversion rate, potentially reduce returns rate, and highlight the primary River Island’s omnichannel service approach.

Redesigning the Product Detail Page (PDP) and addressing key service benefits would see an increase in Add to Bag (ATB) conversion rate, potentially reduce returns rate, and highlight the primary River Island’s omnichannel service approach.

Role

Role

I worked collaboratively with Sam Scott (Senior UX Consultant) on this challenge. The whole design process took almost 4 weeks, starting from research to final UI deliverables.

Challenges

Challenges

The PDP acts as a conduit from the user thinking about looking for items and committing to a purchase. The page needs to inspire users into purchasing an item by showcasing it clearly and providing the necessary product and service information. The PDP is dated from a design and UX perspective which affected the way people perceived the River Island brand and decreased trust in their services. We believed that an optimised PDP could lead to an uplift in ATB conversion and potential for a reduced returns rate.

Process

Process

Process

A lean UX approach has been followed to tackle this challenge:

We ran a heuristic analysis to identify which areas of the PDP could be improved to see benefits on ATB Conversion rate and return rate.
With a foundational understanding of the task and the areas it applies to, a research plan has been formed, that included:

  • Analytics reports to illustrate the current baseline
  • Customer feedback from moderated user testing sessions
  • Competitive analysis to show how competitors are tackling the same issues

These exercises formed a great foundation to move into feature ideation and prioritisation. We synthesized our findings and were able to create an MVP which were presented and discussed with the stakeholders.
We finally ran an A/B test to validate the hypotheses, with potential to re-address the solutions or inform the business for future opportunities.

Design for outcomes
Design for outcomes
Design for outcomes

The "Design for outcomes" process aims to identify and validate opportunities that solve the customers and business goals

Phase 1 - Understand the business requirements

Understand the business requirements

Areas of assessment

Brainstorm/exploration exercise around KPIs and other related areas of the site/service

Brainstorm/exploration exercise around KPIs and other related areas of the site/service

Defining the areas of assessment

Defining the areas of assessment

After identifying all the features and services that may be affected by the changes, we decided to focus on PDP areas only and scored each of them based on the customer & business benefit and the research effort.

Scoring system
Prioritisation Areas
Hypothesis generation

Hypothesis generation

The scoring and prioritisation were useful to identify the top areas to focus our research.
We've then created hypothesis statements as a way of expressing assumptions in a testable form.

The scoring and prioritisation were useful to identify the top areas to focus our research.
We've then created hypothesis statements as a way of expressing assumptions in a testable form.

Hypothesis generation
What we want to know

What we want to know

This exercise helped to identify necessary quantitative and qualitative methods for our research.

This exercise helped to identify necessary quantitative and qualitative methods for our research.

Top areas

This exercise helped to identify necessary quantitative and qualitative methods for our research.

What we want to know - Top Areas

Research areas related to understanding the full PDP without deep-diving into specific items

Research areas related to understanding the full PDP without deep-diving into specific items

Product Page General

This exercise helped to identify necessary quantitative and qualitative methods for our research.

What we want to know - Product page

Validate the assumptions

Validate the assumptions

Anaytics

Analytics

Anaytics

When reviewing how people were interacting with the PDP through heat map analysis and session replays, we discovered several issues:

  • There was a certain expectation from customers for the image to zoom in when they clicked on it. At that moment, this functionality wasn't available.
  • Customers were interacting with colour swatches considerably lot. Combining this insight with Google Analytics, we found out that 50% of the PDP visits were coming from a previous PDP through the colour swatch.
  • The quantity selector was sometimes erroneously considered as the size. Besides, GA showed that very few transactions involved multiple items with the same size.
  • The "Wear it With" functionality (cross-sell) was not widely used and could potentially distract customers.

When reviewing how people were interacting with the PDP through heat map analysis and session replays, we discovered several issues:

  • There was a certain expectation from customers for the image to zoom in when they clicked on it. At that moment, this functionality wasn't available.
  • Customers were interacting with colour swatches considerably a lot. Combining this insight with Google Analytics, we found out that 50% of the PDP visits were coming from a previous PDP through the colour swatch.
  • The quantity selector was sometimes erroneously considered as the size. Besides, GA showed that very few transactions involved multiple items with the same size.
  • The "Wear it With" functionality (cross-sell) was not widely used and could potentially distract customers.
Heatmaps
PDP-decibel-insight

Heatmap analysis (top) and sessions replays (bottom) with Decibel Insight on the current PDP

Heatmap analysis (top) and sessions replays (bottom) with Decibel Insight on the current PDP

User research

User research

To investigate more the behaviours found in the data analysis, we conducted direct interviews with customers. We also wanted to understand what information the customers were prioritising when interacting with the PDP, how easily they could complete specific tasks, and eventually highlight potential pain points and areas of optimisation.
The majority of the participants had no problems with completing the tasks requested, however, we discovered several opportunities that were missing on the current PDP and learned more about different shopping behaviours.

To investigate more the behaviours found in the data analysis, we conducted direct interviews with customers. We also wanted to understand what information the customers were prioritising when interacting with the PDP, how easily they could complete specific tasks, and eventually highlight potential pain points and areas of optimisation.
The majority of the participants had no problems with completing the tasks requested, however, we discovered several opportunities that were missing on the current PDP and learned more about different shopping behaviours.

PDP_User_Testing-2
PDP_User_Testing-1
Major findings
Major findings
Major findings
  • Participants attempted to trigger the zoom feature by clicking on the main product image (currently not available)
  • Participants expected all items the model wore to be available to buy within the same PDP
  • Participants looked at specific views (front and back of item). This means image 1 & 3 are viewed most of the time
  • Participants tried to select the quantity initially, thinking this is related to the size of the item
  • Participants forgot to select their size before adding to basket
  • Delay on adding an item to the bag left the participant confused as to whether something was definitely added to the bag
  • Participants were not using PDP delivery and return area to find information, instead opted to check the footer for specific pages.
  • Participants had to enter a PDP to understand sizing prior to filtering within the PLP
Competitive analysis

Competitive analysis

To continue with the research, we analysed 5 direct competitors in the retail industry (Topshop, Missguided, ASOS, Boohoo, Zara).

We learned that:

  • ASOS provides Catwalk videos and also the ability to scroll through the images
    Zara's images all shown at a default view / editorial feel
  • Missguided includes the model's names in the product description, which allows customers to find and follow them on social media
  • On Boohoo and Topshop, swatches are instantly shoppable and colours are an option of one product ID
  • ASOS' Buy the Look functionality let the customers shop the outfit the model is wearing from one page
  • Boohoo includes "People who view this item also like" – recommendation based on other visitors behaviour

To continue with the research, we analysed 5 direct competitors in the retail industry (Topshop, Missguided, ASOS, Boohoo, Zara).

We learned that:

  • ASOS provides Catwalk videos and also the ability to scroll through the images
    Zara's images all shown at a default view / editorial feel
  • Missguided includes the model's names in the product description, which allows customers to find and follow them on social media
  • On Boohoo and Topshop, swatches are instantly shoppable and colours are an option of one product ID
  • ASOS' Buy the Look functionality let the customers shop the outfit the model is wearing from one page
  • Boohoo includes "People who view this item also like" – recommendation based on other visitors behaviour

To continue with the research, we analysed 5 direct competitors in the retail industry (Topshop, Missguided, ASOS, Boohoo, Zara).

We learned that:

  • ASOS provides Catwalk videos and also the ability to scroll through the images
    Zara's images all shown at a default view / editorial feel
  • Missguided includes the model's names in the product description, which allows customers to find and follow them on social media
  • On Boohoo and Topshop, swatches are instantly shoppable and colours are an option of one product ID
  • ASOS' Buy the Look functionality let the customers shop the outfit the model is wearing from one page
  • Boohoo includes "People who view this item also like" – recommendation based on other visitors behaviour

Design solutions

Design solutions

Design solutions

The previous research helped us identify the elements in the PDP that needed to be addressed.

Add to Bag button
Add to Bag button
Add to Bag button

Insights 

  • Data analytics revealed that people buying multiple products are more often buying different sizes rather than multiples of the same size
  • During user testing, participants tried to select the quantity initially, incorrectly assuming this controlled the sizing

Solutions

  • Sizes displayed in a grid view gives clear visibility of what’s in stock
  • Removing the quantity selector simplifies the interaction
Add To Bag

Prototype (in Principle) for the ATB interaction

Prototype (in Principle) for the ATB interaction

Product images

Insights

  • Data analytics revealed users attempted to click on the image to initiate zoom functionality
  • Insights team noted users would primarily select the 1st and 3rd thumbnail
  • Test participants claimed they used the model photo for inspiration

Solutions

  • Allow people to select the primary image to zoom
  • Next image in carousel should be ‘back view’
  • Utilise a larger image/photography direction
Image gallery

Prototype (in Principle) for the Gallery interaction

Prototype (in Principle) for the Gallery interaction

Delivery info
Delivery info

Insights

  • During testing, customers would often miss the delivery “info bar” while looking for delivery information

  • Test participants revealed they would be more likely to purchase more items if it meant they would get a better delivery service

Solutions

  • Returns and delivery costs should be prioritised due to the tendency to shop based on these services

  • Creating a “smart” info bar which dynamically updates during the users’ shopping process will encourage a larger spend

RI_PDP_infobar_states
Final Design

Final Design

PDP Wireframe

Wireframe iteration for Desktop - we iterated a lot on the position of the Add to Wishlist icon, eventually position it next to the ATB button

The final design for Desktop - we were particularly happy with the results and we wanted to test it to start getting valuable insights. In the following months, we iterated our designs on elements like the product description, cross-sell and up-sell and wishlist.

The final design for Desktop - we were particularly happy with the results and we wanted to test it to start getting valuable insights. In the following months, we iterated our designs on elements like the product description, cross-sell and up-sell and wishlist.

PDP Bundle

Design variation for bundle items. The customer can buy the outfit on the same PDP.

Design variation for bundle items. The customer can buy the outfit on the same PDP.

PDP Mobile Screens

Mobile design. The elements on the page are optimised for better viewing on mobile. As we considered the price to be important information, we decided to prioritise it over the product title.

Mobile design. The elements on the page are optimised for better viewing on mobile. As we considered the price to be important information, we decided to prioritise it over the product title.

Conclusion

We ran an A/B test against the current version for approximately 3 weeks.

  • Redesigning the PDP with a cleaner layout significantly increased the number of  product pages  viewed on mobile by +2.16%
  • The number of returning visitors arriving at the bag increased by +1.23% on mobile
  • The number of visitors interacting with the swatches increased by +12.63% on mobile
  • Returning visitors on mobile were the best performing with a +2.07% uplit at purchase
  • Redesigning the PDP with a cleaner layout significantly increased ATB conversion on desktop by +3.25%
  • Engagement with the sizes significantly increased by +3.02% on desktop
  • The number of visitors engaging with the swatches significantly increased by +16.65% on desktop
  • 10.17% of visitors engaged with the new full page desktop zoom functionality
  • Tablet users were the best performing segment with a +4.67% uplift at ATB conversion

The information we collected from the test provided us with opportunities to investigate further:

The information we collected from the test provided us with opportunities to investigate further:

  • The number of visitors clicking on a Cross-sell item decreased by -70.37%, however, there was no impact on AOV
  • Moving the Cross-sell functionality down the page has reduced distraction by 70% as our primary and secondary metrics have increased
  • Only 0.23% of visitors in the variant clicked to add an item to wishlist
  • There was no overall impact on add to bag or purchase conversion on mobile

© Gianluca Cherubin - 2019