Condé Nast

Improve product visibility on commerce articles

Scope of work

Prototype User testing Scaling for multiple brands

Design tokens

Problem Statement

We have many commerce articles with over 50 products listing, making it quite tedious for users to scroll to the section they’re looking for.

To get around the problem, editors have been manually adding jump links at the top of their articles but the process is time consuming.

There is an existing product summary table but it’s only available on specific page type and editors are not able to choose the products to go on the table.

We know from existing data that click-through rate is 20% higher on pages with Product Summary Grid and that the volume of clicks on the products follows a sequential order.

So we want to create a new version of the product summary table that will be available for all page types and editors will be able to handpick a smaller number of products to feature. Whilst the Table of Content can be auto-populated, saving editors time.

User Testing

We conducted user testings on two article types: multiple product type (e.g., summer trend collection consisting of shoes, bags and dresses) and single product type (e.g., summer dresses).   We chose unmoderated self-guided user testing as the task is quite straightforward and it’s more cost effective to set up.

Our findings revealed that users overall prefer a Table of Content at the start of multiple product type articles but found it less relevant in single product type articles. Whereas Product Summary Grid was more beneficial on single product type articles especially where products were labelled “Best Overall” or “Best for ...”.  

Having the price and retailer listed is also mentioned as beneficial from the participants.

“...[this dress] from Mango. It's only $80. So I might go ahead and actually click on this [link].”

Variant 1
Multiple product type article with Table of Content and Product Summary Grid

Variant 2
Single product type article with just Product Summary Grid

We also tested some future enhancement possibilities to see if they are ideas worth implementing. Theses include:

link out to product listing page to see more relevant products
sticky table of content vs ‘Back to top’ button
in-article product image with editor-created video and in-real-life images
Apart from the multiple product images with video within the article, none of the other additional features we have tested proved to be worth pursuing so we have removed them from the future job scope whilst we made design tweaks to the multiple images and video to improve the visibility.

Product Summary Grid -> Product Listing Page (PLP)
Is there any appetite from users to explore other products in similar category? This will help the business to increase traffic to our PLPs where we see the highest conversions

Sticky table of content
Would users find it useful to have a sticky table of content that persistently on the article page?

Design Rollout

Once the initial design has been finalised, I set off to identify existing Typography design and Reference tokens from our Design System that we can use effectively across all commerce brands.