11 Tips on How to Design an Ideal Product Card for an M-Commerce App

In the product description, users want to see the detailed characteristics of the product, its application, and usage tips rather than lengthy and unnecessary advertising.

Structure your product description by the relevance of given information. The most important details should be at the beginning of the description so that users don’t lose their interest or miss out on some cool features your product can boast.

The best practice with prices is to specify the cost per one item and mention all the available discounts or special offers for bonus card owners.

Let’s take a look at some great examples of displaying costs. The Etsy app product card shows both full and discount prices. On top of that, they add information about free shipping, added taxes, the end of sale, and notify users if there is a limited quantity or high interest in the product.

Specify all the available colors, sizes, and other product modifications right in the product card. For clothing and footwear stores, add detailed size charts and tables with international size standards, or a personalized size recommendation system.

On their product cards, eBay, for example, allows users to choose size and color as well as the product quantity.

Provide relevant information about product availability and the quantity of available items. This way, users won’t be startled to discover that they’ve added an item that is out of stock, chosen more goods than are available in the store, or having decided to put off the purchase, came back the next day only to see that it is already sold out.

One way to prevent that is to indicate under each item if there is a limited quantity, or no product left at all. Look at Amazon, for example. They show the number of items in stock and keep their users from accidentally ordering more goods than possible.

Aim to give a very clear description of delivery and pickup on your product card. If this information is too confusing, users can leave the app without finishing the purchase. Also, don’t forget to notify them about the shipping cost or free shipping along with the delivery information.

For example, in the Lowe’s app, all available ways to receive the goods are indicated directly in the product card.

You want your app to show your clients that they have added a product or some goods to their cart. To do that, use the changes in the state of the buy button, notifications that show the number of added products, and quick transition to the cart.

Users might also want to purchase several products at a time, so make an option for that right on the product page. Place the total cost of the purchase on the same page, so that it doesn’t come off as a surprise at the checkout later.

Look at how the Farfetch app allows users to quickly buy or add items to their shopping cart.

Rating and reviews from other customers come in handy when you want to get some product info that goes beyond the product card, or hear an unbiased opinion from people who have already tested this item in order to make up your own mind about the purchase.

As to the reviews page, consider adding a sorting option that will allow users to choose between viewing a positive and a negative feedback.

Reviews that follow a logical structure are way easier to read and compose. That’s why it is a good idea to create a well-sectioned review form with separate fields for pros, cons, sizings, quality, shipping, and other important product characteristics.

The AliExpress application has two sections for user feedback, one with customer reviews and rating, and the other where users can ask questions about the product.

Adding a FAQ section to your product card is a great way of keeping users informed about the goods you are selling. This way, potential buyers can contact the seller directly, and get all the answers about the item they need.

In the review header, specify age, clothing size, occupation, city of residence, or any other authorized information that might help users relate themselves to the reviewer and get a more personalized recommendation.

While shopping, users often have to choose from several options, which can be quite a task. To make this process less muddling, display the compared product information coherently and in the same sequence.

If you need to compare and contrast technical characteristics of some products, try putting them in comparison tables that will be easy for users to read and navigate.

Amazon, for example, displays comparison tables and has a special page where users can juxtapose two or more goods to view their characteristics and pick the best option.

There are several options on how to endorse upselling in the product card:

• similar items,
• recently viewed,
• additional goods.

It’s pretty convenient to show additional goods for the items that might require some extra assets. Such prompts help users find the necessary additional products and remember to buy them alongside the main item. For example, if someone buys a chandelier, recommending them some suitable bulbs would be your logical next step. For fashion apps, consider adding the complete the look button, so that users could buy all the items that go with the chosen piece and top off their new look.

Time to sum up! Your product card should give a comprehensive overview of the product as well as provide users with a smooth and effortless shopping experience. In this guide, we tried to list some of the most essential and universal elements of an m-commerce product card design that will help you reach this goal.

We are hoping that you found this article useful and got some valuable insights on how to design an ideal product card. Got any additional tips and tricks to share? Feel free to send us a note so that we could include your advice on our checklist.