UK Electronics Retailer's Product Card Design Research

We have recently researched the fashion UK market in order to help optimize user experience in your mono- or multi-brand store.After that, we decided to go further.

We decided to research the electronics UK market and created a prototype of the optimal product page for the online store based on the behavioral patterns of customers. Below you will find the methodology, explanations, and a free prototype of the product page for the online stores to improve the conversions.

The Methodology Of The Research

Who is it for? This study as well as the free prototype is for electronics retailers of all sizes, who aim to improve usability and increase conversions. The best usability and interface practices identified during the research along with the UX/UI solutions for optimizing user experience is what you will find here.

Why did we do it? Having 13 years’ experience in UX/UI and CRO and enough expertise in the electronics segment of the Ukrainian eCommerce market, Turum-burum decided to conduct a research, learn the UK customers, identify definite behavioral patterns, and summarize our observations by creating a prototype of a product card.

How did we do it? The research was divided into several stages:

1. The first stage of the research involved the analysis of the UK electronics market and websites of different sizes.
We revealed the distinctive characteristic of the UK market: people mainly buy from large stores like Amazon or from big brands. Yet, we decided to look for niche brands to investigate, compare, and base on.

2. For the second phase, we selected the biggest niche players and conducted benchmarking.
‍

For the study, we chose online stores for benchmarking according to the following criteria:

• Niche leaders;
• Traffic;
• Brand awareness (based on organic results in the Google search engine).

3. As a result of stage two, we selected five online stores. Analyzing the design of their product cards, we:

• Identified the order of blocks and their priority;
• Revealed the most popular features;
• Determined the elements that are already present there and those that are not.

4. Based on this list, we created a comparison table where for each site and block:

• Left a comment hypothesis on why this block is or isn't available and whether it's worth using;
• Marked what elements are displayed on the first screen, what remains when you scroll, what is fixed, etc.;
• Defined a list of parameters, etc.

5. Our experts tested various user scripts to reproduce user journeys on different sites.

6. After that, we defined, prioritized, and placed the blocks of the product page so that they would help optimize conversions.

7. Based on the data obtained from the analysis of product cards design of niche leaders, we created a prototype of the optimal product card for clarity and perception of information.

8. In conclusion, you will find detailed explanations, practical recommendations, and working UX/UI solutions, but a free prototype of the product page ready to use on any website of electronics stores.

UK Product Card Design Specific Features Discovered

The UK market is quite conservative and, therefore, in terms of blocks, the product card design for the UK is more straightforward — not overloaded with information. The age of people who make decisions is high and buyers tend to focus more on the basic information about the product without any additional options.

In the UK online store, the product card design is a kind of storefront. Generally, we noticed that the product card provides only basic information, such as:

• Product photo, zoom, video review;
• Price;
• Add to Cart;
• Standard shipping information (if available);
• Main product features;
• Additional services;
• Promotion;
• A detailed description of the item;
• Detailed product features;
• Reviews;
• Return Policy;
• Other users also like;
• Related products;
• Certificates;
• Contacts.

Some information is not provided. So, for example, unlike Ukrainian eCommerce, the payment is not listed as it is likely to be PayPal, because it is one of the most popular payment systems in Britain, and 80% of users prefer this payment system.

Prototype of Optimal Product Card for Electronics Online Store

Based on our experience and data received during the research, we created a prototype. The prototype is the optimal product card for any British online electronics store.

This prototype of a product card is not detailed, yet it can be a basis for further customization according to a specific project:

• Shift priorities depending on the brand USP;
• Change colors;
• Replace the blocks, etc.

Obviously, each project has its unique traits and nuances that can't be completely satisfied by the prototype. However, if we take an average electronics online store in the UK, the product card prototype has the potential to sell.

Below you will find the detailed description of the prototype structure, page blocks, and explanations to each of them.

Blocks and Product Card Design Structure

Desktop

Buying Block: The First Screen

It contains such blocks as Product image, Price, Delivery, Key Features, Additional Services, Promotion, and Buy Together and Save:

• The product photo takes up more than half of the screen, providing users with a better view of the item. Also, the large picture captures attention and focuses on the product's appearance.
The image size of more than half is used in 3/5.The image size in half of the screen is used in the rest.

• Price is the first information the user wants to know about the product. That's why the block is in the first place, giving all the possible options for the purchase.
It's always used.

• The Delivery block immediately informs the user of the shipping details without proceeding to a special page or checkout. It can also inform about the offline stores in the city where they can buy it.
It is used in 2/5.

• The Key Features provide the most crucial parameters by which users choose a product. The block is closer to the beginning of the page next to the photo, helping the user to find the information on the first visit and match it with the product's image.
Such a block is used in 3/5.Additional Services, Promotion, Buy Together and Save blocks encourage extra items in the cart and/or nudge the user to buy faster. These blocks can also increase the average check because of the deals, which are cheaper than elsewhere or solve some tasks.Additional services are used in 3/5.Promotions in 2/5.Buy Together and Save block is used in 4/5.

Product Information

It is where you can demonstrate the product in real cases. Beautiful photos and captions can persuade the user to buy because they will see use cases and figure out the way to use it. According to the research, it is in use by all the online stores out of the benchmarking.

Specifications

Specifications briefly explain the product's properties and are also readable thanks to their table form. That’s why they are worth adding to the product card design because they are crucial for decision-making. They are used in 4/5.

Social Proof

Customer Reviews and Questions block is there for users, allowing them to find answers to their doubts or questions. The block is crucial when the user already gets some information about the product, but doesn't decide to buy it or not. Sometimes these play a decisive role in the purchase.
Reviews are always used.
Questions in 4/5.

Cross-selling

Cross-selling blocks include:

• People Also View;
• Accessories.

If the user doesn't decide to buy, s/he might be interested in other items: accessories and products that other users view. The user will move on through the site and probably make another purchase. It's crucial to offer relevant products so that the tools are effective.
Accessories are used in 2/5.
People Also View block is used in 3/5.

Fixed Buy button

Not only does it remind the user what product overviewed but how much it costs and allows the potential buyer to add the product to the basket wherever s/he is on the page without a need to return to the top. It’s better to use it for both desktop and mobile versions. Though it is effective, the Fixed Buy button is used only in 2 online stores out of 5 investigated.

Mobile

All the blocks used in the desktop version are also used in the mobile version as well. Yet, block priority in the mobile version differs a little bit. Based on our experience and considering a lack of page overview, some blocks are moved below and some collapsed.

Buying Block: Photo and Price

The very first screen is a large photo of the product. The photo is full-width throughout the screen to give the user a good overview of all the product details. This block is always used by all the online stores out of the benchmarking.

Delivery, Key Features, Promotion, Additional Services

After that Delivery, Key Features, Promotions and Additional services blocks are placed. To shorten the length of the page and emphasize the vital information, Delivery, Promotions, and Additional Services blocks are collapsed so that the user can drop or expand them when needed.

Though that improves the usability, it is used in 2/5.

Product Information, Specifications, Customer Reviews

Product Information, Specifications, and Customer Reviews blocks are collapsed so that the user decides what to view and without the need to scroll long in search of the necessary information. In such a way, we shorten the page length, providing all the necessary information for decision-making.

Main Product Page Elements to Improve Conversions

Though the page seems to look simple, the product card design is to include some elements to help the user to make the final decision or cut his/her journey.

So what elements and structure does the product card design need to have to convert?

Even though the prototype is very abstract, it does give an understanding of what design elements should be on the product page:

• Header;
• Breadcrumbs;
• Title;
• Header;
• Navigation;
• Large and high-quality product photos;
• Options;
• Buy button;
• Brief information about shipping, payment;
• consultancy block;
• Specifications;
• Exchanges and returns policy details;
• Additional services (to increase the average check);
• General characteristics;
• Cross-selling;
• Reviews and ratings;
• Related products;
• Detailed product description;
• Category cross-linking;
• Accessories;
• Previously viewed items block;
• Advantages.

Each element makes the customer closer to the purchase by providing key information about the product, simplifying the choice, and so on.

Key Findings for Product Card Design

Having studied the UK electronics market, we found out that:

• British consumers are more likely to buy in large stores such as Amazon or offline.
• Price plays a vital role for users.
• Most online stores are developed on Shopify or similar platforms, use standard tools and make the sites look lighter.
• At the same time, small and mid-sized online stores are much simpler and customized to specific needs and products.

That's why many online stores don't provide detailed content showing all the advantages and product features because, commonly, users visit, look at the product, read the basic information and either buy it or read additional information at the bottom of the page to make a decision.

However, if you want to optimize the buying process and increase conversion, it is worth considering user convenience, reducing the time to find the necessary information, offering options, etc.

Optimizing the product card design and taking user needs into account will help:

• Make the site more user-friendly;
• Decrease bounce and exit rates;
• Increase average order check;
• Improve conversion.

The very first step on the way is to conduct the UX audit to reveal the areas of growth. You can do that by yourself or by contacting the experts.