<p>Published on <a href="https://blog.prototypr.io/product-design-principles-in-a-single-card-2f6023419a87?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Mei </p>
<h4>Less is more, harmonize, prioritize and have fun</h4>
<p>Recently I worked on designing some cards and it was fun! Before scrolling down, here are some background information that can help you understand this article better.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*inOmqmCyk7KzYsk2MBRk0g.jpeg">items and series</p>
<p>Similar items are organized in one serie, usually 60–120 items per serie.Users come to search and discover items and then purchase them.Items have closing time, after when users can no longer purchase them.</p>
<h3>Less is more</h3>
<p><strong>Refine your product instead of adding more.</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Dm-4jS6S9-QghVPbTGmjQA.jpeg">before (left) and after (right)</p>
<p>An item card acts as an entry to the item detail page. The original design (on the left) has three ways to enter the item detail page: clicking the “view this item” CAT button, clicking the “more” button next to item info and clicking on the card itself. That is understandable if more buttons might lead to more conversions. However, will the result be bad if we just remove two buttons?</p>
<p>The answer is no. After removing the “more” button and the “view item” CAT button, the product looks fresh. If you ask about the business value, I would say, with the new design, item cards become short, and therefore, more items are displayed in a defined horizontal space. Then for users, the chance of finding items they like is higher.</p>
<h3>Harmonize UI</h3>
<p><strong>Create a unified, consistent user experience.</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FxGfqCbbXFgROSXLoIGGRw.jpeg">standard item card (right 1st) and standard serie card (right 2nd)</p>
<p>When I started inventorying all cards used in the product, I found that there was no standard. Same components on cards had different visual styles and more importantly, users get confused because an item card can look like a serie card and vice versa.</p>
<p>The problem solving started with identifying the difference between items and series: a item is a single item while a serie contains many items. And then standard is established that a item number tag and multiple images should be used on a serie card to differentiate it from an item card, and therefore, makes it clear for users. This case explains that working on design languages is not only unifying visuals, but also building up standards based on use cases.</p>
<h3>Prioritize use needs</h3>
<p><strong>Display the key information at the moment.</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CNtcSbIylBt58qedE0emkQ.jpeg">cards with prioritized information</p>
<p>Cards can contain multiple types of information, such as images, title text and buttons. However, no all information is required in some cases. Prioritize information according to what knowledge is important for users.</p>
<p>For example, when a item card is listed under a user’s favorite, the closing time of that item is the most crucial info. Only displaying the closing time and current price triggered users to click on the items that will close soon. In another case, when a item is listed under a user’s recently viewed, changed price information is important to users and that might attract users to purchase this item soon.</p>
<h3><strong>Bring fun with diverse layout</strong></h3>
<p><strong>Keep users interested while browsing.</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1LylE2yO3AYC0TaHahfTZQ.jpeg">boring layout(left) and diverse layout(right)</p>
<p>As human beings, we see things through patterns. At the same time, we do not want to get bored. Like the masonry layout used by many practices such as <a href="https://pinterest.com">Pinterest</a>, I aim to offer browsing experience with more fun by crafting the layout. Grid view, list view and carousel are often used together. And keep in mind that do not let users scroll long time in one layout.</p>
<h3>Please clap if you like this article ❤️ for a writer it means the world.</h3>
<p>And <a href="https://medium.com/@designmei">follow me on Medium</a> to see more UX stories 👩🏻‍🎨. If you are interested in my instagram, <a href="https://www.instagram.com/thatismeimei/">here it is</a>.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2f6023419a87" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/product-design-principles-in-a-single-card-2f6023419a87">Product Design Principles in a Single Card</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Product Design Principles in a Single Card

Less is more, harmonize, prioritize and have fun

Top Stories