top of page

PRODUCT PAGE

MADE.COM

UX Research

Product detail pages are surely one of the most important parts of any e-commerce website. My first research project at MADE.COM focused on studying how to improve the product detail page (PDP hereafter). This was the first time MADE.COM took a user-centred approach to analyse the current PDP, and understand how to prioritise content and information.

 

OPPORTUNITY

MADE.COM grew massively in the past 3 years and expanded its catalog introducing numerous new products and categories. The introduction of new products led to the need for prioritising content and information on PDPs and redesign the page, keeping every PDP  consistent towards different categories. The opportunity was to take a user-centred approach to improve the browsing experience and understand what information/content should be more prominent. 

​

The scope is to offer a better experience to the users, and reduce the number of returns.

​

​

PREPARATION

After a kick-off meeting with the major stakeholders (from the Brand team, Content team, SEO and Digital Experience team) and the product owner, I defined a research plan to manage timing, resources, and budget.

 

The plan was split between Phase 1 (Discover and Define) and Phase 2 (Design and Deliver). My main responsibilities were to gather insights from Phase 1, support the UI designer during Phase 2, test the prototypes and deliver the research/design report.

  Discover

THE SCOPE OF A PDP

The PDP is the place where users can find all the details about a product they might want to buy, and it is a vital step in the decision-making process.

​

According to Baymards Institute, the elements of a PDP are:

  • Images

  • Layout

  • Image gallery UI

  • Video and 360 view

  • The “buy” section

  • Shipping, returns, and gifting

  • Product variations

  • Product description

  • Specification sheet

  • User reviews

  • Auxiliary content

  • Cross-sells

  • Cross-navigation

ASSUMPTION MATRIX

During the kick-off meeting, I asked the participants to write some assumptions about the current PDP, and then we mapped them. This helped me to understand what to investigate first, and what kind of questions to come out with. 

Screen Shot 2019-10-08 at 05.35.29.png

PROBLEM STATEMENT 

1. We need a way to display the right description and type of information and make it easy to access, especially for larger/expensive products.

 

2. We want our PDP to be the space where our users can visualise the item and be able to imagine it in their own context.

HYPOTHESIS

1. We believe that changing the content prioritisation and visual element will help the users to decide what product to buy and will reduce the number of returns. 

Screen Shot 2019-10-08 at 06.09.02.png

CURRENT PDP ANALYSIS

I tested the current PDP with 8 users, all MADE.COM customers. I wanted to identify what the pain points are and understand how can we improve the page according to usability testing. I noticed that most of the users struggled to find information on the page. Also, the page seemed not being as engaging as it should be.

Screen Shot 2019-10-08 at 06.24.23.png

TOP OF THE PAGE

1. Product title, product description, price, and CTA cover the picture and they are not readable.

​

2. The layout made users moving the mouse around the screen to spot information. Elements don't seem grouped.

Screen Shot 2019-10-08 at 06.24.35.png
Screen Shot 2019-10-08 at 06.24.46.png

BODY

1. Users stated that it is an unnecessary repetition having the same pictures as the ones into the carousel. â€‹

​

2. The video should be higher because will help users visualise a larger piece of furniture, such as a sofa.

​

3. None of the users have read the description's copy. The page should be as much visual-driven as possible.

​

4. Dimensions are too further down the page. Users expected to have it near the top of the page.

​

Screen Shot 2019-10-08 at 06.24.57.png

BOTTOM

1. "Proud owners" was one of the most engaging and inspiring elements because users can see how other customers styled the product.

​

2. "Recently viewed" wasn't considered as useful as "Customers also viewed" which is perceived as a suggestion 

COMPETITOR ANALYSIS

I checked a few competitors to see what features, tools and information they offer on the PDP, how they display it and what they prioritise.

 

Here there are a few examples: 

IKEA wrapped all the information into a easy-to-scan menu.

SWOON and LOAF added extra features (such as buying guides) to help the user in the decision-making process.

​

Screen Shot 2019-10-08 at 09.46.55.png

HEATMAPS

I ran a set of heatmaps using Hotjar, picking PDPs from different categories to identify mouse-moving and page-scrolling.

Screen Shot 2019-10-08 at 09.55.25.png
Screen Shot 2019-10-08 at 09.55.43.png

When moving the pointer, users stay mainly on top of the page. It is interesting that the second major interaction is on the "Dimensions & Details" section, which means users make the effort to scroll down below the product description.

SURVEYS

After having dig into the current perspectives, I build two surveys (a quick live poll and a longer questionnaire) to send to our users and customers.

​

The first survey was a quick poll launched on targeted PDPs on the website and a sample of users. The aim was to find out what was the most useful information and if something was missing on the page.

​

Screen Shot 2019-10-08 at 10.18.53.png
Screen Shot 2019-10-08 at 10.19.07.png

The longer survey focused​ on learning more about behaviours, needs, and motivations. I targeted users who purchased a large item in the past 3 months on our database, and I collected 110 responses. The aim was to get insights about content prioritisation and user needs.

​

The major insights were:

  • 88% of users want to see suggestions for similar products they might like. This help them to keep browsing without going back to the listing page.

  • 75% of users take inspiration by lifestyle pictures, videos or by how other people styled their homes.

  • 59% of users prefer to have buying guides, or other features about assembly and care instructions.

About user behaviours: "When I buy a product..."

Screen Shot 2019-10-08 at 09.56.36.png

USER INTERVIEWS

User interviews gave me the qualitative insights I needed. I interviewed a wide range of customers from all over the UK, and I was able to emphasise with their struggles and needs. The questions I made during the interviews let me explored the following topics:

​

  • Do users tend to scan the product page or do they browse it carefully?

  • What inspired them?

  • What make them feel confident to proceed with adding an item to the basket?

  • How would they go for finding out more details about a product?

  • Not seeing the product live, does affect the experience?

​

​

Screen Shot 2019-10-08 at 10.54.50.png

  Define

USER GROUPS

The findings and insights gathered from the user interviews and surveys led me to the conclusion of defining three main user groups: 

​​

Screen Shot 2019-10-08 at 10.55.08.png

1. THE BRAND LOVER 

They tend to browse randomly, rarely on purpose. They are affected by a "clean design", they tend to be more impulsive adding to the basket (which lead to return the item or cancel the order). The age range is very broad, mainly women.

​

NEEDS: Clean design, photos, room-sets, and inspirational content. They are driven by pictures and "Proud Owners".

​

DOWNSIDE: They might miss important info, they lose focus easily. Price-concerned. Affected by others' opinions.​

2. THE “I LIKE YOU BUT...”

Design-oriented. A balanced individual between ambition and lifestyle. They have different types of job from creative to analytics. They aren't price-concerned when they find what they want.

​

NEEDS: 360 is their most used tool. Once they found the piece they want to buy, they need to find all the info quickly.

 

DOWNSIDE: they don’t buy Collections or “Buy the Look”. If they have a bad experience with the brand, they are not likely to come back.

FEATURE PRIORITARISATION

MoSCoW of the features stakeholders were keen to implement or keep:

​​

Screen Shot 2019-10-08 at 10.36.27.png

  Conclusion

WHAT DID WE LEARN?

1. Both user groups scroll down the page when they are on a product page but they want to have the most important info on top of the page (f.i., Dimensions & Details)

​

2. Users feel extremely engaged with photos and visualisation tools on top of the page. The second part of the page is where they expect to have concrete information and less engaging content.

​

3. Users don’t understand the product details we give them, but measurements are clear.

 

4. User group 1 tends to buy without enough info. User group 2 doesn’t follow the same behaviours. We have to design one solution accommodating both user groups.

NEXT STEPS

The research sprint lasted for 2 weeks, and I managed enough qualitative and quantitative data for delivering suggestions on how to boost the PDPs, and what should be the next steps to take.

​

My suggestions were:

  • Videos are as important as pictures, we should bring it on top of the page

  • Implement a 360 tool and a Configurator tool, especially for larger products

  • Dimensions & Details should be positioned higher on the page

  • Delivery information should be more prominent

  • Most of the users don’t read the product description, and pictures are repeated (see the carousel). Proud Owners pictures should be used as brand reinforcement, and create fewer studio pictures.

​

​

This is an example of the new PDP, and you can see it live here!​

Screen Shot 2019-10-08 at 13.40.32.png

Thank you for reading!

bottom of page