Mình đã học được gì khi mang thiết kế ra cửa hàng?

Làm sao để không bị “xoay như chong chóng” khi làm với nhiều bên?

Đài Loan, mì udon và chuyện học ngôn ngữ

Làm gì khi bạn phải tự học mọi thứ?

Làm sao để mọi người trong team hiểu được thiết kế, tránh bỏ sót case – và dev không cần hỏi lại?

Làm sao để tranh luận mà không trở nên cảm tính?

Experimenting with AI-Powered Vibe Coding: How Claude 3.7 + Cursor helped me build a dynamic portfolio

🔒Smart search revamp for a E-commerce platform

🔒Optimizing product cards: a user-centric approach to boosting engagement and sales

This project enhances product cards with better design and functionality to improve user experience and increase conversions

Every day, millions of people browse e-commerce platforms in search of products that meet their needs. But among hundreds of options, what makes them stop, consider, and make a purchase decision?

On our platform, product cards serve as the first point of interaction between customers and products. However, the old designs did not provide a seamless experience. Product images were too small to attract attention, information was cluttered and difficult to scan, and the lack of direct action buttons forced users to take additional steps.

This led us to ask an important question: 

How can we redesign product cards to help users make decisions more easily, thereby increasing engagement and driving sales?

The mission of this project was to transform product cards into a more powerful tool—intuitive, easy to navigate, and genuinely persuasive. We aimed to help users feel more confident in their purchase decisions while delivering outstanding business results through design improvements based on real user needs.

Through interviews and usability tests, I identified the following issues:

Small product images made it difficult for users to quickly assess products.

Too much information caused confusion and cognitive overload.

The lack of an "Add to cart" button forced users to take extra steps.

Promotional offers and discounts were not prominently displayed, reducing their appeal.

I studied platforms like Shopee, Lazada, Tiki, PharmEasy, Nahdionline, Apollo Pharmacy, and others to identify best practices and uncover design gaps.

, while on mobile, this number ranges from 

: One local pharmacy platform displays only 

, even though it uses vertical card layout.

: Platforms like PharmEasy and Walgreens use 

, which inherently limit the number of products shown per row due to their wider format.

Insight: Despite using vertical cards, one Vietnamese pharmacy platform shows fewer products per screen. This may indicate overly detailed cards or unoptimized padding/layout.

In contrast, international platforms prioritize full product details within a compact space, leading to smaller images.

Observation: Vietnamese e-commerce platforms emphasize large product visuals, potentially to drive faster scanning and engagement.

Large, high-quality product images improved visibility (Shopee, Lazada).

Promotional badges like “Best seller” and “Discount” captured attention.

Direct features such as the "Add to cart" button facilitated an easier shopping experience.

Cluttered designs overloaded users with information, causing fatigue (e.g., Nhà thuốc An Khang).

Inconsistent display of promotions reduced their impact (e.g., PharmEasy).

Users prioritize clarity and simplicity in design.

Prominently displaying promotions on product cards increases engagement.

Reducing steps to add items to the cart enhances conversion rates.

3. Design process: From problem to solution

I framed the challenge: How can we create product cards that balance clarity, interactivity, and promotional effectiveness?

Enlarging product images for better clarity.

Restructuring information to emphasize pricing and promotions.

Adding interactive features like "Add to cart" and unit selection.

Implementing dynamic promotional badges to highlight discounts and low-stock alerts.

Images occupying up to 50% of the card area.

Expandable sections for secondary information.

Real-time promotional badges for better visibility.

I conducted A/B testing to assess the effectiveness of the new design. While specific figures remain confidential, data revealed significant increases in user engagement and cart additions.

Larger product images enhanced visibility and appeal.

Promotional badges like "20% off" and "Limited stock" drew instant attention.

Key details such as product name, price, and discounts were prioritized.

Secondary information was moved to expandable sections for a cleaner layout.

The "Add to cart" button enabled instant item addition.

Unit selection allowed users to choose between bulk or single-unit purchases directly from the card.

High-contrast colors improved readability.

All interactive elements were designed to be mobile-friendly.

While specific numbers remain confidential, user feedback and analytics showed:

Increased engagement as users spent more time exploring product cards.

Smoother shopping actions due to the direct Add-to-cart function.

Improved clarity with larger images and a structured promotional display.

Iterative design is key, with early testing refining the experience before launch.

Simplicity wins, as a decluttered design significantly improves usability.

Competitor insights drive innovation, providing a foundation for effective solutions.

This project reinforced a fundamental truth: User experience is everything. By redesigning product cards with a focus on clarity, interactivity, and promotions, we transformed a friction-filled shopping journey into a seamless experience. While exact figures remain confidential, positive user feedback validated our approach, setting the stage for even more innovations in e-commerce design.

This is a simplified breakdown of our research—Clear, concise, and easy to understand.