Pet Food E-commerce Landing
The design excels in its clean, minimalistic layout with clear typography and ample white space that enhances readability and user focus. However, improvements in visual contrast and more prominent call-to-actions could further boost engagement and accessibility.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
4
Color & Contrast3
Content Readability & Clarity4
Visual Consistency, Imagery & Media3
Navigation & Structure3
Conversion & Actions1
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
1Critical
4Major
18Moderate
8Minor
Low Contrast of Light Text Over Image in Category Cards
Critical
Color & Contrast
The Problem
The white or very light text labels 'Perros' and 'Gatos' over the partially darkened images show low contrast, risking failure of WCAG AA Large text and likely lower levels.
Why it Matters
Users with visual impairments may find these labels nearly unreadable, harming navigation and content identification.
How to Fix
Add a stronger semi-transparent dark overlay behind the text or use a bolder font or text shadow to increase contrast.
Issue Highlights
Icons in feature cards lack descriptive labels
Major
Visual Consistency, Imagery & Media
The Problem
The feature cards under '¿Por qué elegirnos?' and 'Encuentra el alimento ideal según su necesidad.' include icons without explicit textual labels, making it less clear what each icon represents at a glance.
Why it Matters
Users may misinterpret or overlook the meaning of icons, increasing cognitive load and reducing clear communication of benefits.
How to Fix
Add concise, visible text labels or tooltips for each icon to clarify their meanings.
Issue Highlights
Primary CTA 'Explorar catálogo' uses generic action label
Major
Conversion & Actions
The Problem
The main call-to-action button 'Explorar catálogo' is somewhat generic and could be more specific to guide users directly to shopping or product discovery, enhancing clarity and actionability.
Why it Matters
Vague CTAs can confuse users or reduce their motivation to click, leading to lower conversion rates.
How to Fix
Use a more specific and action-oriented CTA, such as 'Ver productos para perros y gatos' or 'Comprar alimentos premium ahora', which makes the user's next step clearer.
Issue Highlights
Hero section lacks a clear call-to-action emphasis
Major
Strategic Design
The Problem
The hero section has two similar-visual-weight buttons ('Explorar catálogo' and 'Descubrir Autoship') without a strong visual hierarchy or distinct styling to draw primary attention.
Why it Matters
Users may be uncertain about where to focus first or which action to take, reducing the efficiency of initial engagement and potential conversions.
How to Fix
Visually differentiate the primary call-to-action with a stronger color, size, or style and make the secondary action more subtle. Consider emphasizing the main goal clearly.
Issue Highlights
Small tap targets in nutritional need selection buttons
Major
Accessibility & Input Ergonomics
The Problem
The nutritional need selection buttons (8 small boxes with icons and labels) appear to be less than 44x44 pixels and close together, requiring precise taps.
Why it Matters
Small targets and tight spacing make it difficult for users with limited dexterity or those using touch devices to accurately select options.
How to Fix
Increase the size of each nutritional need button to at least 44x44 pixels with more padding between them to prevent accidental taps.
Issue Highlights
Low Contrast of Small Gray Text 'NUTRICION PREMIUM EN LIMA'
Moderate
Color & Contrast
The Problem
The small gray text 'NUTRICION PREMIUM EN LIMA' at the top left appears to be light gray on a white background, resulting in low contrast likely below WCAG AA standards for small text.
Why it Matters
Users with mild visual impairments or in bright environments may have difficulty reading this introductory text.
How to Fix
Increase the contrast by darkening the gray color or using a darker shade that meets at least 4.5:1 contrast ratio for small text.
Issue Highlights
Inconsistent horizontal alignment of section titles
Moderate
Visual Consistency, Imagery & Media
The Problem
Section titles such as '¿Por qué elegirnos?', 'Encuentra el alimento ideal según su necesidad.', and others are not uniformly aligned horizontally, causing a visually inconsistent flow down the page.
Why it Matters
Misalignment can distract users and reduce perceived professionalism, making content harder to scan.
How to Fix
Ensure all section titles use a consistent horizontal margin or grid alignment across sections.
Issue Highlights
Category cards lack clear clickable affordance
Moderate
Strategic Design
The Problem
The 'Perros' and 'Gatos' category cards use images and text but do not show clear visual affordances such as buttons or hover states to indicate they can be clicked.
Why it Matters
Users may not immediately understand that these categories are interactive elements, possibly missing key navigation paths.
How to Fix
Add explicit clickable indicators like button shadows, hover states, or icons, and ensure the entire card area is clickable to meet common web interaction conventions.
Issue Highlights
Low Contrast of Three Small Card Descriptions
Moderate
Color & Contrast
The Problem
The small descriptive text under the headings in the three white cards below '¿Por qué elegirnos?' is light gray on a white background, making it difficult to read with insufficient contrast.
Why it Matters
Users may struggle to understand important service details if the descriptions are hard to read due to low contrast.
How to Fix
Darken the text color or increase the font weight to improve contrast and readability.
Issue Highlights
Lack of strong visual hierarchy in '¿Por qué elegimos?' section
Moderate
Content Readability & Clarity
The Problem
The section heading '¿Por qué elegimos?' is not visually distinct enough from the supporting text 'Productos con ingredientes trazables...' below it. Both have similar font size and weight differences are subtle.
Why it Matters
Without clear hierarchy, users may struggle to quickly identify section titles versus explanatory text, which slows comprehension.
How to Fix
Increase the font size and/or weight of the section heading and reduce the size or change the style of the supporting paragraph to better differentiate them.
Issue Highlights
Inconsistent card shadow and border radius styles in product selections
Moderate
Visual Consistency, Imagery & Media
The Problem
Product cards under 'Los más elegidos' display inconsistent shadow softness and border radius rounding compared to category cards above, causing visual disharmony.
Why it Matters
Inconsistent styling among cards may confuse users about their relationship or importance and degrade the overall aesthetic quality.
How to Fix
Apply uniform border radius and shadow styles to all cards within similar contexts to maintain style consistency.
Issue Highlights
No active state highlighting current page in navigation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The navigation bar does not visually indicate which main menu item is currently active or selected, so users can't easily tell their location in the site hierarchy.
Why it Matters
Without clear orientation, users may become confused about where they are on the site, leading to disorientation and reduced confidence.
How to Fix
Add a clearly visible active state style (such as underline, bold, or color change) to the menu item for the current page.
Issue Highlights
Category cards too close together
Moderate
Accessibility & Input Ergonomics
The Problem
The two large category cards for 'Perros' and 'Gatos' are placed side by side with minimal spacing, making adjacent taps prone to errors.
Why it Matters
When clickable items are too close, users may mistakenly tap the wrong category, leading to frustration and slower navigation.
How to Fix
Increase horizontal spacing between these category cards to provide clear separation and reduce accidental taps.
Issue Highlights
Two separate primary action buttons in hero section
Moderate
Efficiency & Cognitive Load
The Problem
The hero section offers two prominent calls to action: 'Explorar catálogo' and 'Descubrir Autoship', presenting the user with two competing choices simultaneously.
Why it Matters
Simultaneous primary action options increase cognitive load and may cause hesitation or confusion about the preferred path.
How to Fix
Prioritize one primary action and make the secondary option less visually dominant or contextually revealed after initial interaction.
Issue Highlights
Unclear primary call to action after product viewing
Moderate
Flow & States Completeness
The Problem
While there are buttons for 'Explorar catálogo' and 'Descubrir Autoship', it is unclear what the immediate next step is after reviewing the main page or product section, especially since product cards have no direct call to action like 'Add to Cart' visible.
Why it Matters
Users may be uncertain how to proceed with a purchase or exploration, which could cause hesitation or abandonment.
How to Fix
Add clear actionable buttons on product cards such as 'Agregar al carrito' or 'Más detalles', and consider repeat or sticky CTA buttons to guide users to continue shopping or checkout.
Issue Highlights
Secondary CTA 'Descubrir Autoship' uses vague action label
Moderate
Conversion & Actions
The Problem
The button labeled 'Descubrir Autoship' does not clearly convey what happens after clicking, lacking a strong value proposition or direct action verb.
Why it Matters
Weak secondary CTAs reduce engagement and might confuse users about the benefit or next step.
How to Fix
Clarify the action and benefit, e.g. 'Conocer beneficios de Autoship' or 'Configurar entrega automática'.
Issue Highlights
Low Contrast of Small Descriptive Text in Specification Section
Moderate
Color & Contrast
The Problem
The smaller descriptive text under 'Encuentra el alimento ideal según su necesidad.' is light gray on white and likely fails WCAG AA contrast.
Why it Matters
This secondary explanatory text is important for user understanding but may be hard to read for users with low vision.
How to Fix
Use a darker gray or black for this text or add a subtle background to improve text visibility.
Issue Highlights
Body text in subtitle below main headline appears too small
Moderate
Content Readability & Clarity
The Problem
The subtitle text 'Alimento de grado veterinario para perros y gatos...' under the main headline appears to be in a smaller font size and lighter weight, which may reduce readability especially on smaller screens or for users with vision impairments.
Why it Matters
Smaller body text can make it difficult for users to quickly read and understand key information, leading to frustration or missed messages.
How to Fix
Increase the font size of the subtitle to at least a readable body size (around 16px or equivalent), and ensure sufficient color contrast with the background.
Issue Highlights
Primary navigation bar has small clickable targets spaced closely
Moderate
Navigation & Structure
The Problem
The main navigation links (Inicio, Tienda, Categorías, Autoship) in the top center are small, text-only, and spaced tightly, making them less distinguishable and potentially harder to click accurately.
Why it Matters
Users may struggle to quickly find and select primary navigation options, reducing ease of site exploration and affecting overall user experience.
How to Fix
Increase spacing between navigation items and consider adding clear hover and focus states to improve visibility of active or hovered items.
Issue Highlights
No visible search or filtering options in product categories section
Moderate
Navigation & Structure
The Problem
The 'Categorías' and product listing section do not show any visible search box or filter controls, relying only on broad category clicks.
Why it Matters
Users looking for specific pet food products or detailed filtering may struggle to quickly find relevant items, reducing engagement and increasing frustration.
How to Fix
Add a clear search bar and filtering options near the product categories to allow users to narrow down large selections efficiently.
Issue Highlights
Multiple segmented selections for pet food preferences
Moderate
Efficiency & Cognitive Load
The Problem
Users must choose from multiple segmented options divided by nutritional needs, pet categories, and curated products, requiring several decision points before completing a purchase.
Why it Matters
The multiple layers of selections can increase mental effort and time to find and select the ideal product, potentially discouraging quick buying decisions.
How to Fix
Consolidate the selection steps into fewer, more intuitive filters or use progressive disclosure to show only relevant options as users make initial choices.
Issue Highlights
Multiple buttons and interactive elements densely clustered in hero section
Moderate
Navigation & Structure
The Problem
The hero area contains two main buttons ('Explorar catálogo' and 'Descubrir Autoship'), plus small text links below, and icons near the image, creating a crowded interactive space.
Why it Matters
Users may feel overwhelmed or unsure which element to interact with first, increasing cognitive load and potentially causing clicks on unintended targets.
How to Fix
Space out clickable elements more and reduce the number of simultaneous interactive targets visible in the hero to create a clearer visual hierarchy.
Issue Highlights
Small product card action icons may require precise taps
Moderate
Accessibility & Input Ergonomics
The Problem
The product cards in the 'Los más elegidos' section show small action icons (like badges or buttons) that appear under 44x44 pixels and are in groups.
Why it Matters
Small icon targets increase the difficulty of user interaction, especially on mobile devices or for those with motor impairments.
How to Fix
Enlarge the action icons and space them appropriately to comply with recommended touch target sizes and spacing.
Issue Highlights
Misaligned buttons in main hero call-to-actions
Minor
Visual Consistency, Imagery & Media
The Problem
The 'Explorar catálogo' and 'Descubrir Autoship' buttons in the hero section are not vertically aligned properly, with subtle vertical offset between them.
Why it Matters
Misaligned buttons can disrupt visual harmony and may reduce user's ability to quickly identify clickable actions.
How to Fix
Adjust vertical alignment so both buttons share the same baseline or vertical center line.
Issue Highlights
Similar visual style for nutritional categories buttons
Minor
Content Readability & Clarity
The Problem
Categories like 'Digestión sensible', 'Control de peso', 'Cachorros / Gatito', etc., appear as uniform buttons without a clear hierarchy, making it harder to distinguish primary choices or importance.
Why it Matters
Flat visual hierarchy can cause users to have difficulty quickly navigating or prioritizing among options.
How to Fix
Consider using size, color, or typographic contrast to establish hierarchy or grouping among categories.
Issue Highlights
Lack of visible breadcrumb or navigation context
Minor
Orientation Missing (Environment/Role/Location)
The Problem
There is no breadcrumb or explicit text to indicate to users exactly where they currently are in the site flow or product hierarchy beyond the main nav and page heading.
Why it Matters
Users exploring deeper content may lose context of their position within the site structure, impacting their ability to navigate efficiently.
How to Fix
Add a breadcrumb trail or clearer section headers that explicitly reveal the user's current location in relation to higher-level sections.
Issue Highlights
Product listing CTA button 'Suscribite y ahorra 7%' is not visually distinct
Minor
Conversion & Actions
The Problem
The product cards have call-to-actions 'Suscribite y ahorra 7%' that appear as small links or text rather than prominent buttons, reducing clickability and prominence.
Why it Matters
If CTAs are not visually distinct, users may miss the opportunity to subscribe or save, reducing conversion.
How to Fix
Make these CTAs visually distinct as buttons with consistent styling and sufficient size and color contrast.
Issue Highlights
Generic imagery lacks emotional warmth
Minor
Tone, Friendliness & Delight
The Problem
The images of the dog and cat are clear but somewhat neutral and static, lacking expressive warmth or engagement that could build a stronger emotional connection to the premium pet nutrition promise.
Why it Matters
Visual tone influences trust and emotional engagement, especially for pet owners seeking premium care for their pets.
How to Fix
Incorporate images that show a more lively or affectionate interaction to align warmly with the message of 'nutrition for who you love most'.
Issue Highlights
Overabundance of non-clickable categories and badges
Minor
Efficiency & Cognitive Load
The Problem
The interface contains multiple section headers, badges, and small category tags (e.g., 'Más vendido', 'Premium', 'Nuevo') which add visual noise without clear actionable benefit.
Why it Matters
Too many non-interactive visual elements can distract from key actions, slowing user focus and increasing perceived complexity.
How to Fix
Remove or reduce non-essential labels and badges that do not facilitate immediate actions or decisions.
Issue Highlights
No guidance in specialty need selection area if no options are chosen
Minor
Flow & States Completeness
The Problem
The specialty needs section has clickable options but does not show any prompt or guidance on what to do if no option is chosen or if results are empty.
Why it Matters
Users may be unsure whether to select an option or how it affects their shopping, leading to confusion or indecision.
How to Fix
Add instructional text or a default recommended product message for when no specialty options are selected.
Issue Highlights
Information hierarchy in '¿Por qué elegirnos?' section is weak
Minor
Strategic Design
The Problem
The three benefits are presented in equal styling with small icons and similar text size, offering no standout points or segmented visual hierarchy.
Why it Matters
Users may skim without retaining or valuing these differentiators, which could reduce trust or perceived brand strength.
How to Fix
Use contrast, spacing or icon size changes to draw attention to the most important benefits or create a reading flow hierarchy.
Issue Highlights