In response to the global pandemic, more and more businesses are shifting their focus to e-commerce and online sales. Needless to say, the product card is one of the site's main elements that interact with the user. Its purpose is to sell products or services by appealing to the user and catching their eye in the right way. Therefore, good product card design is the key to succeeding in your online endeavors. 

In today's article, I'd like to review a product card based on the example of Best Buy, the largest consumer electronics store chain in the US. We'll talk through its pros and cons. Finally, I'll share my personal opinion regarding the possible improvements that could potentially lead to better design and seamless user experience.

• White background color. When there is a large amount of information, white is the only color that doesn't cloud the perception of data for the user;
• The cards don't use any wireframe structure;
•  A well-chosen sans serif font;
• There is a lowercase set in the main text. It's very nice that large companies come to a very strong understanding of typography and use lowercase settings in information blocks. It will always outperform the headset in terms of perception and reading speed. 

•    It's pretty much pointless to display elements that don't form an understanding of a particular block or subblock. In our case, we have separators, and you can always use distance to separate blocks. That's why it's so important to eliminate all the unnecessary elements within the development framework. Otherwise, it will only make the interface look "heavier" and confusing to the user;
•    Small font size impairs readability. Since the store audience is enormous and includes people from all walks of life, not everyone will have the time or the patience to scroll through the content;
•    We lose the mesh perception since images are fermented and have different widths (some are denser, while others are smaller);
•    No adaptation for mobile devices. Come on, guys, it's 2021. It's common sense to ensure that your online store is compatible with all mobile devices!  

I went through the pros and cons of Best Buy product cards' design. Well, is there a way to make things look and feel more authentic and flow organically to catch the eye of any store visitor? I have a few thoughts and would like to share them with you below. Ready? Here goes:

• Increase the container size. From 980px (which is morally obsolete) to 1320 px (this is one of the most relevant sizes at the moment). Divide the cards with some space, and this will allow us to create a responsive design as one of the options to apply the Bootstrap grid;
•  Increase the product card from 244px to 300px (which is 22% more);
• Remove dividers. They have no functional meaning, and we use space to separate the cards;
• Stabilize the cards. Since all the images on this site are clipped (without the background) and have the same height and different widths, we must stabilize the cards by adding a black layer with 1% transparency. It's the perfect visual aid demonstrating the symmetry and borders of our product card;
• Incorporate a discount field into our image. Not in the form of a saved price. It shows the converted percentage since the percentage always works more efficiently, regardless of the product price.  A discount of a certain cost will only work at a higher price tag;
• Apply corporate colors. Since the priority of the discount field is higher than that of the counter, the discount itself should be filled with corporate colors (blue), and the counter itself made secondary by highlighting its borders with the corporate color;
• Take care of discount placement. It's important to understand that the discount price and the old price are the elements that form the sale and must be placed side by side;
• Work on the price tag itself. Since the user perceives information from top to bottom and from left to right below the image, we place the price tag with increased size (from 25 px to 32 px) and put the numbers following the decimal point in a reduced size;
• Don't emphasize the old price. To increase the contrast between the old price and the new one, we decrease the size of the old price to lower the priority, and we display it in gray;
• Manage the comments. For comment elements, we remove the border from the asterisks and reduce the importance of comments using gray;
• Don't forget about CTAs. The most important thing in product cards is their "call to action" button, so we stretch it to the full length of the card and increase the width;
• Use spaces. Since we have abandoned dividers, the division of cards is carried out with the help of spaces;
• Apply skeletons. When loading new cards in the list, you can use skeletons to help the user understand that he is waiting for the cards to load and isn't just staring at a blank page.

Quality design has an enormous impact on the user's perception of the products or services that one is trying to promote. Timely changes and improvements can make a whole world of difference and boost online sales tenfold. 

By analyzing the elements of Best Buy's product cards, I tried to envision the perfect iteration that could potentially embellish the entire store and make it even more appealing in the customers' eyes. 

As a result of these changes, the company would get a modern sales card with the correct distribution of accents and space and an improved user experience that helps the visitors perceive the necessary info in all the right ways.