PRODUCT CARRS
OPTIMIZATION
[ LEAD PROJECT ]
[ UX/UI DESIGN ]
[ 2021 ]
Background
A product card is a visual container that holds a single or related group of product information. Initially, MWG Retailer Group, with two leading websites, Thegioididong.com and Dienmayxanh.com, had no unified pattern or logic in the product cards used across the system.
By 2020, the websites faced challenges with information architecture - the product cards displayed inconsistencies between domains and accumulated over the years, leading to design and tech debt. It badly affected our team's execution speed and morale. More importantly, it likely caused user confusion and potentially impacted revenue.
This project aims to establish a systemic design approach, including clear UX guidelines for the product team and developers. This will ensure product cards create a consistent and meaningful user experience.
Process
Audit current situation
Define what is a good product card
Ideate & Iterate
Designs & Development
Audit
Lack of consistency
Some components were not available on some platforms
Component features were not aligned across platforms
➔ No source of truth: There was no clarity on where to look when making decisions
The UI distract from scanning information
There are much colors: red, blue, orange, yellow; especially the strong red repeatedly on labels led the users hard to scan the essential information such as room square, product image, price
Evaluate about definite of “Giảm sốc” (shocked discount). Every product was labeled as giảm sốc in result of no product is discount, it giảm sức nặng of sale up
Too much information
Re-think about the "zoom in" concept. MWG successfully applied this concept for a product line that required the user to compare many specifics, especially if the products looked similar. Months by month, it's getting abused.
Good “Zoom in”
Does it need “zoom in” concept?
Discovery
Normally, usage data plays a big role in identifying problems. For this case study, I relied on other discovery methods, including desk research, consumer feedbacks, competitor research.
Here are few key highlights:
Product Details = Good
The difference between these two screenshots is obvious: the TV photos are no help in deciding between the products. A guy in a canoe vs. a football player? What, because I watch more football than watersports, I'll buy the TV showing a football player?
This is a good example of why copying the biggest sites' designs is not always good. Because Amazon hawks a monstrously wide product range, they use a standardized gallery layout that sort of works for many different category pages, without being optimized for any individual category.
In contrast, Pottery Barn is optimized for its narrower range of products, so its category pages have more detailed photos.
Source: NNGroup
Information-Carrying Image = Good
Through thousands in NNGroup studies, users indeed pay attention to information-carrying images that show content that's relevant to the task at hand. And users ignore purely decorative images that don't add real content to the page. So much fluff — of which there's too much already on the web.
How an effective product card looks like?
Helpful differentiating information for each product listing should include, at a minimum:
Concise names that contain important and meaningful product characteristics
Photos large enough to identify a known item and show differences between items
Indication of other available colors, styles, or options
Price (while this latest research from NNGroup focused on B2C e-commerce sites, our earlier studies show that lack of prices is a huge usability problem on B2B sites)
Users also appreciate the extra information that goes above and beyond basic requirements, allowing them to gain further knowledge about an item before committing to a new page load.
Additional product information that can be helpful to users includes:
Customer ratings
Icons or similar indications to mark items as popular, new, on sale, and so on
Availability information (in stock, or available in a nearby physical store; sizes that are available if applicable)
Link to a quick-view tool to view a brief product description and other details without loading a new page
Iterate & Polish
In the context that lots of products look similar, our goal is to help users scan product information: Quick - Easy (Readable) - Effective (essential information enough to interact).
Highlighted Optimization
Thumbnails: Enhance visual clarity by including key product features directly on the thumbnail. This will provide users with a quick overview of the product without requiring additional clicks.
Product Names: Simplify product names for better display within limited spaces. Establish a naming convention that highlights essential features. For example, for washing machines, use a format like "[Brand] [Key Feature 1] [Key Feature 2] [Shortened Model Name]" instead of original name "Máy giặt lồng ngang AQD-AH1000G.PS"
Tooltips: Provide detailed information through tooltips or zoom-in features, which should only appear when users narrow down their search criteria and seek more in-depth details.
Comparison Functionality: Further emphasize the importance of tooltips and zoom-in features by highlighting their value within the product comparison function. This will enable users to make informed decisions based on detailed product information.
Product card anatomy
Pink: required — Blue: Optional, depending on the context
Impact
Future-proof parity
All product cards across 100+ pages in 2+ platform are now unified and future-proof for feature development
Efficient dev process
Efficient feature dev process for product teams and faster time to market.
And my happiest moment in this project is a developer said he appreciated my effort, it has helped a lot in their work, saving time and enhancing productivity ❤️
Coherent user experience
Users now have a coherent product experience across pages and platforms
THANKS FOR
STOPPING BY!
HAVAN.MAR@GMAIL.COM