Product Card : a micro case study.
Getting thousands of visits would be useless if what visitors find does not convince them. A thousand visitors that make a purchase are worth more than a million that do not. A paragraph I stumbled upon once when I was reading about the techniques used to boost eCommerce Apps and Websites.
It shouldn’t be a secret that the most important aspect of an App or a Website selling goods is it’s way of product display.
Challenges
By default, a product comes with information that are vital for a potential buyer, which might include Price,Name of the product and many more depending on the App or Website itself.
The more information about the product the buyer gets, the higher the chances of him buying it.
And what can be a better way of displaying these information other than a small card showing off the product.
The more the information the harder it is to balance the design keeping the product highlighted. and not losing it’s value over information that can start to look irrelevant.
Looking at many cards I’ve seen this problem grows more and more in Apps and Websites recently.
In the Project that I’ve been working on, the product card had more than eleven pieces of information that are vital for the exposure of the product. When optimizing these elements we still got out of ten information that must be included in the product card.
One of the major problems as well is how much of the page the product card represent. In my case the product card represented more than 90% of the home page, having the same card repeating over and over again with the infinite scroll.
So to break it down to points we ended up with
- Ten elements.
- Iteration.
- Visual hierarchy.
Those were the important problems we’ve based our solutions upon.
Solution
To figure our card out we had to first categorize our elements depending on the importance.
We had the product picture as our main focus, and gave it the higher rank of importance.
So it needs to be Visible and Focused.
Than we had to figure which of the remaining elements comes next in the rank.
After having our elements set, we started the sketching of the product card figuring out the best way to keep hierarchy and maintain a non boring and crowded feel when the card was iterated.
The key for the visual not to be boring was to deceive the user’s eyes into thinking there is more space than there actually was.
Playing on the white space was the ultimate solution for the card to not look crowded when iterated. Instead of the user comparing space between actual cards. Eyes tend to compare the red space between the product’s pictures.
The green space should have been the space that the user look at if it were not for the slight red space used to first highlight the product’s picture, than to keep the layout properly distributed in a way that gives the user the feel that the design is actually liberated.
Conclusion
There is no ideal product card that works perfectly with all Apps or Websites as it is vital to know exactly what is the main goal of the card itself.
I hope this micro case study helped or inspired you to create more awesome things.
