Get in touch with us
We can help you identify your business goals and challenges and come up with a most efficient solution
We can help you identify your business goals and challenges and come up with a most efficient solution
To blog
Our best practices for a perfect product card design
Anna Baida
UX Designer
Eva Petritski
Content Manager
August 22, 2022
Although it is still easier to promote a product on a desktop rather than on a smartphone, mobile commerce is currently gaining momentum. For instance, in March 2019, Amazon saw 85% of users’ mobile activity coming through its app.
According to Statista, 64% of online purchases in the U.S. are made using a smartphone. And the overall number of mobile buyers is expected to grow from 167.8 in 2020 to some 187.5 million people by the year 2024.
With such a rapid boom of the m-commerce industry and the growing number of its users, businesses have to act ahead and come up with functional user-oriented mobile apps that will help accumulate their audiences in a new space.
The major challenge here lies in fitting all the required information on a small screen. With that in mind, we will share 11 tips on how to design a perfect product card for m-commerce mobile apps and illustrate them with some examples from our portfolio and other m-commerce applications. We have been applying these simple tips during our 10-year development experience, including work on product cards for Scentbird, Bookworm Town, and Citilink.
The name should reflect more than just the category of the product and its brand. A great product name will usually include a category, e.g. a shirt, a watch, a drill, its brand, style and fit, and some of the key features.
You can place the name of the product either above or below the image. The latter option is more often used for clothing and cosmetics stores, as it does not distract users from viewing the product photos.
A good product card should go beyond just a couple of shots and show the product from multiple angles ready to be viewed in a full-screen mode. Some companies go even further and give their users a complete 360-degree view of their products.
Don’t forget to include a zoom in option for your product photos—both with a double tap and a pinch with two fingers. The product photo itself must be in high resolution so that when scaling, it remains sharp. This is especially important for clothing and accessories, as users might need to have a closer look at the fittings or prints on the product.
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.
Don’t forget about the formatting: subheadings, paragraph breaks, lists—it will give your description a clearer structure and make it more readable. Advanced technical characteristics of the product can be put in tables—nice and neat.
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.
Think of adding some extra features. For example, in the Pettersson app, users can switch between various units of measurement: packages, pieces, square feet, etc. When you switch the parameter, the cost per unit changes with it automatically.
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.
Another useful feature to have is the option to sign up for restock. Add it to your product card so that users could follow products that are out of stock and get notified when they appear again.
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.
You can also make two different buttons—one for a quick purchase and the other for adding the item to the cart.
In the Scentbird perfume and cosmetics subscription app, customers rate fragrances according to several parameters, and the app displays an overall product rating and detailed reviews.
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.
While shopping in mobile apps, users are more keen to explore categories with similar items, so don’t miss out on this opportunity to promote more products.
There are several options on how to endorse upselling in the product card:
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.
Share this
By subscribing you agree with our Privacy Policy
©2024 HeyInnovations
Privacy policyFirst Central Tower, 360 Central Avenue, Suite 800 St. Petersburg, Florida 33701
