n11 Product Detail
With millions of active users, and thousands of transactions everyday, n11.com is one of the most popular shopping platforms in Turkey. After user research revealed that the product detail page had some UX problems for some of our personas, the team decided to conduct some optimization tests.
Company
n11, one of the leading eCommerce platforms in Turkey
Scope
Optimization for higher conversion rates
Team
1 UI designer, 1 UX designer,
1 UX Researcher, 1 product owner and development team
Timeline
March 2023 - April 2023
Background
Turkey is among the world’s most competitive markets in eCommerce industry. The top four players include Trendyol, the market leader and an Alibaba affiliate since 2018, Hepsiburada, active since 1998 and backed by one of the country’s largest conglomerates, the world’s largest shopping site Amazon’s local branch, and n11, recently acquired by Getir, a global fast delivery company also based in İstanbul.
With this fierce competition, the secret to convert visits into orders lies in the little details of user experience design. And the product detail page (PDP), the penultimate step where the customer makes the decision before adding a product to their cart to pay for it, is maybe the most important step in this process.
Design Approach
Although designing experiences for Turkish users comes with its own opportunities and challenges, consumer habits mostly follow global patterns. Two common online consumer personas “the Value Hunter” and “the Researcher” are among the most prominent ones in the market.
Value Hunters, as the name suggests, look for a bigger value for their money. They like bulk discount campaigns, flash sales, and really love to receive coupons. The ease of purchasing, and returning if needed, with a few clicks is the most important factor for them. They usually purchase lower-priced items, such as clothing, at a frequent rate.
Researchers, on the other hand, are less frequent buyers who purchase items with higher price tags, such as electronics. Unlike Value Hunter, they are not easy to convert and like to check different sites and compare not only prices but features and quality. So the ease of obtaining information about a product is important to them.
Moreover, as common with other developing countries, Turkish market is dominated by mobile users, who do their most, if not all, online shopping on their mobile devices, and they usually don’t even use personal computers in their daily lives. So when designing an shopping experience for our users, we always proceed with a mobile-first approach.
Upon entering the product detail page, the user first sees the product image carousel. Being able to see high resolution images that show different aspects of the product is important for all types of users, as visual information, compared to textual, is easier for people to digest quickly.
For example, reading that a fridge’s volume is 350 liters, or height is 186 cm doesn’t say much by itself to the user, compared to seeing a photo of it full of everyday items, which gives them a much concrete idea of the product’s size.
In order to ensure the product images are up to the standards, a new visual guideline for sellers who upload them was created, and how the backend handles image resizing was refactored, so that images would stay high quality without cropping or window-boxing.
On top right corner of the image frame, we have four buttons. In previous designs, the ordering of these buttons was favoring the cart and share buttons, and was inconsistent between iOS, Android and web screens. The research and click monitoring data showed that the most used buttons here were “Favorite” and “Share” for the Value Hunter, and “Add to List” for the Researcher, so they were reordered on all devices, and a new icon for “Add to List” resembling a bookmark was designed, as the previous one was noted as unclear by some users.
These buttons move to the header that appears on scroll, staying within reach throughout the whole page.
While the images are important for all types of users, textual information about the product is also fairly important, especially for the two personas we were focussing on. For the Value Hunter, by making all the information about the added value this product features quickly available, we wanted to help them decide quickly whether the product has good value for money. And as for the Researcher, the goal was to enable them reach all the product information they need, so that they can easily analyze and compare the products they are interested in.
First, with large green letters just under the image, we display “Free Delivery” information. While almost all products on the platform has free delivery at this point, the research shows that seeing this information is still a big driver for the buyers.
Underneath the product name, we have product’s review score, number of reviews, with a camera emoji noting there are some image reviews (which is also a big plus for the buyers), as well as the number of people who favorited this product, signaling it’s popularity.
Next, we have created a group of chips for pieces of product information, such as the product’s energy consumption, brand, type, height, volume etc., mainly focusing on the Researcher’s needs. The user can scroll horizontally for further information, and use the “Product Information” shortcut on the right to quickly reach detailed information with a single click.
Under the information chips, an added value section was designed, this time focusing on the Value Hunter. The research showed that while the product itself and its own intrinsic value compared to its price plays the most part in their purchase decisions, any added value, however it might be perceived by the buyer, is also a big factor. The section displays the one value for each type listed below, with a link to see all available one for that type.
The following are the types of value determined to be important for the Value Hunter, by user research:
Delivery: Options like same-day delivery, or next-day delivery, and if it’s still free, it’s fast. Fast and free delivery turned out to be the most important added value for the Value Hunter.
Payment Options: Available monthly payment plans, or loans for larger purchases, via platform’s financial partners. Also ability to use loyalty points collected from previous purchases to partially pay for the product.
Campaigns: Varied list of campaigns, such as “buy one, get one free,” or “1000 liras off for purchases exceeding 10.000 liras,” are listed here, in order to either convert visits to orders, or upsell for increased revenue.
Another value popular among the Value Hunters is coupons. They like them better than product-specific campaigns, as coupons are usually more flexible to use. On the new PDP designs, they are placed as the first module among many, just under the product options button, where they can see the color or size options for that product available.
As we scroll down the product detail page, the sections are not targeting the Value Hunter as much, because they usually make their decision of whether to proceed with a purchase or not by this point, maybe except for checking user reviews to validate their decisions. So the following sections are mostly for the Researcher, who wants to get the best product for the best available price.
Here, we first see the seller module. In this new design, the seller’s name and review score is accompanied with the icon regarding whether they are this brand’s official store (blue icon), or a verified retailer for this brand (white icon), or neither. Here they can also see the delivery options this seller is offering, and ask questions to the seller regarding the product.
Under the seller module, we find the list of other sellers for the same product, with comparable information regarding the sellers, as well as the price and delivery information of the same product from that particular seller. This makes it easier to compare the sellers and to weigh different options, like paying a little more but buying from brand’s official store vs buying from a regular store at a lower price.
One of the surprising outcomes of the user research regarding the user experience of product detail page was learning that the product reviews were not as important as we previously assumed for the users’ decision process. While they certainly did check the reviews for possible recurring problems with the product, it wasn’t as important as product information, or other values that were provided with the product.
It seems that ever growing popularity of online shopping created an inflation in (1) the number of products/seller, which leads to lots of products with few or no reviews, (2) the number of reviews for the most popular products, like an iPhone, which leads to lots of lower quality reviews that need to be sifted through, and mixed reviews with complaints about operational problems like delivery, rather than the product itself.
Of course, it’s not always possible to convert a visit to product detail page into a purchase. If the user is still not convinced about adding the product their cart, which can be done with the big green button on the footer at any point as they browse the page, then we try to redirect them either to another product by using recommendation algorithms that serves product lists like “similar to this product,” “stuff you might like,” “products purchased by other who checked this product” and “your latest visits,” or to the category and subcategory pages in reverse order, like “more fridges,” “more home appliance” and “more electronics” so we can try to convert them again, rather than losing the customer.
—
Overall, this optimization project yielded many small but effective improvements to the product detail page. Unfortunately, I’ve moved on to another company during the implementation, and currently don’t have access to the data collected for these changes. However, checking the live product today, I can see most of these changes are still in use, telling me that they showed increases in the key metrics of conversion.