Primary CTA Prominence Score: 7
CTA Density: just right
Thumb Reachability Score: 6
Visual Hierarchy Effectiveness: Good. Black 'Add to Bag' button is clear. No competing CTAs on the product card.
Unique CTA Strategies: Very clean, uniform approach. The black button is a consistent, high-contrast action target on every product.
Primary CTA Prominence Score: 9
CTA Density: just right
Thumb Reachability Score: 7
Visual Hierarchy Effectiveness: Excellent. The bright, colorful 'Add' buttons are impossible to miss and create an energetic feel. The cart icon adds clarity.
Unique CTA Strategies: Using different button colors for different products is unique and visually stimulating. The 'Add' copy is direct and implies a fast, frictionless action.
Primary CTA Prominence Score: 8
CTA Density: just right
Thumb Reachability Score: 6
Visual Hierarchy Effectiveness: Excellent. The green 'ADD TO BAG' is the clear primary action. The grey 'SOLD OUT' is a perfect disabled state. Secondary 'SAVE' is a subtle text link.
Unique CTA Strategies: Effective use of product badges ('NEW', 'BESTSELLER', 'EDITOR'S PICK') near the CTA to add social proof and urgency.
Primary CTA Prominence Score: 6
CTA Density: just right
Thumb Reachability Score: 5
Visual Hierarchy Effectiveness: Good for its minimalist goal. The '+' icon is subtle but consistently placed. The color swatches for shade selection are the most prominent interactive element.
Unique CTA Strategies: A 'Quick Add' focused model. Clicking the '+' likely adds the default shade or opens a quick view, minimizing clicks for users who know what they want. It prioritizes browsing shades over an immediate 'Add to Cart' button.
Primary CTA Prominence Score: 6
CTA Density: just right
Thumb Reachability Score: 6
Visual Hierarchy Effectiveness: Clear. The outline 'ADD TO CART' button fits the minimalist aesthetic while still being identifiable as the primary action on each card.
Unique CTA Strategies: Use of ghost/outline buttons on the PLP is a distinct design choice that communicates a high-end, considered brand identity. The 'VIEW ALL' CTA for the steps is clear navigation.
Primary CTA Prominence Score: 7
CTA Density: just right
Thumb Reachability Score: 6
Visual Hierarchy Effectiveness: Good. The solid black 'Add to Cart' is prominent. The 'Sold Out' state is clear.
Unique CTA Strategies: The screenshot suggests a hover/tap state where the product image darkens and the button may appear or change, focusing the user's attention on a single product at a time.
Primary CTA Prominence Score: 7
CTA Density: just right
Thumb Reachability Score: 7
Visual Hierarchy Effectiveness: Very effective. The variant selector (size dropdown) is placed directly above the 'Add to Cart' button, creating a logical flow. The secondary wishlist (heart icon) is perfectly placed and subtle.
Unique CTA Strategies: Integrating the size/variant selector directly into the PLP card is a major conversion optimization win. It reduces the need for a page load or quick view modal, streamlining the purchase process significantly.
Primary CTA Prominence Score: 8
CTA Density: just right
Thumb Reachability Score: 7
Visual Hierarchy Effectiveness: Excellent. Clear primary CTA ('Add to bag' in blue) and smart handling of variants with the 'Choose shade' button. The greyed-out 'Notify me' is also clear.
Unique CTA Strategies: The adaptive CTA ('Add to bag' vs. 'Choose shade') is a best-in-class example of guiding the user and preventing errors. The shade swatches below the button provide context for the choice.
Primary CTA Prominence Score: 5
CTA Density: just right
Thumb Reachability Score: 6
Visual Hierarchy Effectiveness: Subtle, in line with a luxury brand. The 'QUICK SHOP' outline button is secondary to the product image and name, encouraging consideration over impulse buys.
Unique CTA Strategies: A 'Quick Shop' first approach. The brand assumes the user wants more information before adding to cart, so the primary PLP interaction is to open a detailed modal, not to add to cart directly.
Primary CTA Prominence Score: 8
CTA Density: just right
Thumb Reachability Score: 7
Visual Hierarchy Effectiveness: Very strong. The blue 'ADD TO BAG' button has excellent contrast. The different states ('NOTIFY ME', 'CHOOSE SHADE') are clear and use different visual treatments (outline vs. filled).
Unique CTA Strategies: Excellent state management on their CTAs. Also, combining price with the CTA for bundles ('ADD TO BAG $112') provides immediate value confirmation.
Primary CTA Prominence Score: 6
CTA Density: just right
Thumb Reachability Score: 6
Visual Hierarchy Effectiveness: Good. The green outline 'Add to Cart' is the primary action. The secondary 'Save' link is subtle but available.
Unique CTA Strategies: The CTA includes the price ('Add to Cart - $38'), which reinforces value at the point of action. Clear 'Sold Out' text replaces the button.
Primary CTA Prominence Score: 9
CTA Density: just right
Thumb Reachability Score: 7
Visual Hierarchy Effectiveness: Excellent. The large, dark grey, pill-shaped 'ADD TO BAG' button is extremely prominent and has great visual weight against the light background. It's the undeniable primary action.
Unique CTA Strategies: The button's size and color make it a focal point. Social proof (star rating and review count) is placed directly above the CTA, encouraging the click.
Primary CTA Prominence Score: 8
CTA Density: just right
Thumb Reachability Score: 7
Visual Hierarchy Effectiveness: Excellent. Very similar to Glossier's effective model. The soft pink 'ADD TO BAG' button uses brand color well. 'CHOOSE SHADE' CTA for multi-variant products is a great user-guided approach.
Unique CTA Strategies: Adaptive CTA copy based on product type is a standout feature. Clear 'OUT OF STOCK' disabled state maintains a good user experience.
Primary CTA Prominence Score: 7
CTA Density: just right
Thumb Reachability Score: 8
Visual Hierarchy Effectiveness: Good, but this is not a standard PLP. It's a curated page. The CTAs 'SHOP THE SHADE' and 'SHOP THE SUMMER BUNDLE' are very clear and action-oriented.
Unique CTA Strategies: This page uses highly specific, descriptive CTAs that relate to the content block they are in, rather than a generic 'Add to Cart' for a grid item.
Primary CTA Prominence Score: 3
CTA Density: too few
Thumb Reachability Score: 4
Visual Hierarchy Effectiveness: Weak for e-commerce conversion, but strong for branding. There are no traditional button CTAs. Actions are embedded in large text ('shop').
Unique CTA Strategies: A 'content-first' or editorial approach. This PLP feels more like a magazine layout. It prioritizes brand aesthetic and storytelling over direct-response conversion, using text links with arrows as the only call to action.
Description: The most effective primary CTAs ('Add to Bag/Cart') are solid-filled buttons with high contrast against the background. They are instantly recognizable and draw the user's eye. (e.g., Loops Beauty, Hero Cosmetics, Osea Malibu).
Effectiveness: Maximizes visibility and click-through rate for the most important action on the page.
Description: For products with multiple options (shades, sizes), the CTA should change from 'Add to Bag' to 'Choose Shade' or 'Select Option'. This prevents user frustration and reduces friction. (e.g., Glossier, Rare Beauty, The Ordinary).
Effectiveness: Guides the user, prevents errors, and streamlines the process of adding complex products to the cart directly from the PLP.
Description: Unavailable products should have a clearly disabled CTA, often grayed out, with text like 'Sold Out'. Providing a 'Notify Me' option is a best-in-class feature to retain customer interest. (e.g., Summer Fridays, Osea Malibu).
Effectiveness: Manages customer expectations, prevents dead clicks, and provides a lead capture opportunity for future sales.
Description: Secondary actions like 'Wishlist' or 'Save' should be visually distinct and less prominent than the primary CTA, often as a small icon or text link. (e.g., The Ordinary, Crown Affair).
Effectiveness: Provides useful functionality without distracting from the main goal of adding items to the cart.
Description: Placing the primary CTA at the bottom of every product card creates a predictable, easily scannable layout for users. (Observed across almost all brands).
Effectiveness: Improves usability and allows users to quickly compare products and take action without having to search for the button.
Brand Analyzed: loopsbeauty_com.png
Recommendations:
Button Styles:
Color Psychology: {'black_and_monochrome': 'Used by brands like Necessaire, The Ordinary, and Sofie Pavitt to convey a sense of modernism, simplicity, and luxury. High contrast against white/light backgrounds makes it very clear.', 'brand_color_accent': 'Used by brands like Osea (green), Glossier (blue), and Rare Beauty (pink) to reinforce brand identity and make CTAs pop. The color becomes synonymous with action.', 'vibrant_multi_color': "Hero Cosmetics uses a different bright color for each product's 'Add' button, creating a playful, energetic, and visually engaging grid.", 'neutral_subdued': 'Loops Beauty (dark grey) and Rare Beauty (soft pink) use colors that are prominent but not jarring, maintaining a sophisticated and calm aesthetic.'}
Shape And Size: {'pill_shape': 'Fully rounded ends. Conveys a friendly, modern, and softer feel. Used by Glossier, Rare Beauty, Hero Cosmetics, Loops Beauty.', 'rounded_rectangle': 'Slightly rounded corners. A standard, safe choice that feels modern but structured. Used by most other brands.', 'relative_size': 'CTAs are generally full-width within their container (e.g., product card column), making them large and easy to tap on mobile. They are visually balanced with the product name and price.'}
State Handling: {'disabled_state': "Consistently handled by graying out the button and/or changing the text. Osea Malibu shows a greyed-out 'SOLD OUT' button. Rare Beauty shows a disabled, lighter pink button with 'OUT OF STOCK'.", 'multi_step_ctas': "For products with variants, the primary CTA text changes to 'Choose Shade' or 'Select an Option'. This prevents user error and guides them through the selection process before adding to cart. Glossier and Rare Beauty are prime examples.", 'loading_and_success': "No loading states (e.g., spinners) or success feedback (e.g., checkmark, 'Added!') are visible in the static screenshots, but these are crucial micro-interactions for a good user experience."}
Primary CTA Location: Almost universally placed at the bottom of the product card, below the product name, price, and sometimes reviews. This follows the natural Z-pattern or F-pattern of scanning, with the final action at the end of the information sequence.
Thumb Reachability: The placement at the bottom of product cards puts the CTAs for the first few rows of products outside the easiest thumb-reach zone (which is lower-middle of the screen). However, as a user scrolls, subsequent rows of CTAs move into this prime tappable area.
Visual Hierarchy: Primary CTAs are given the most visual weight via solid fills and high-contrast colors. Secondary CTAs like 'Save' or 'Wishlist' are typically smaller icons placed in a corner (e.g., top right of the image) or as a text link, clearly signaling a lower-priority action.
Sticky Elements: Filter and Sort functionalities are often placed in a sticky header that remains visible on scroll. This is a best practice as it allows users to refine their view at any point without having to scroll back to the top. Examples: Hero Cosmetics, Glossier, The Ordinary.
Add To Cart:
Variant Selection:
Quick Shop:
Out Of Stock:
Bundle Purchase:
Informational: