Project Overview

KARE is an e-commerce website for modern pet care products, offering natural foods, treats, toys, and accessories focused on pet health, peace, and joy. The design uses a clean, light minimalist theme (white background with black/gray text, vibrant pet product photos) to create a fresh, caring, and pet-centric shopping experience. The layout follows a single-page scroll structure optimized for desktop and mobile: fixed header navigation, hero banner with tagline and CTAs, "What makes us different" feature cards, "What pets truly need" need cards, mid-page CTA banner, best sellers product grid, newsletter subscribe form, and multi-column footer. As a solo designer, I developed this in Figma over [X weeks], prioritizing emotional connection through pet-focused imagery, educational content via card grids, product transparency with prices, and responsive elements to make shopping for pet care feel simple, trustworthy, and delightful for pet owners.

Problem Statement

Many pet care websites have cluttered layouts with too many product categories, impersonal or overly salesy messaging that ignores pet owner concerns like nutrition and wellness, lack of educational content to explain brand differences, hidden pet needs explanations, complicated navigation with poor mobile support, and subscription forms that feel intrusive. Pet owners, emotionally invested in their animals' happiness, experience frustration with unclear product benefits, doubt in natural claims without proof, no visual inspiration for pet needs (health/peace/joy), and difficulty finding support (shipping, returns), leading to high bounce rates and abandoned carts. This design solves these by starting with an empathetic hero for immediate connection, organizing unique selling points and pet needs in scannable card grids, highlighting a mid-page CTA for curated collections, featuring a prominent best sellers grid with prices, providing a simple single-field newsletter form, and using a structured footer with categorized links for easy access to essential info.

Objectives

• Develop a light, minimalist theme that conveys care through white space, vibrant pet photos, and balanced typography.

• Create a fixed header with essential navigation (logo, Shop, All Products, Foods, More dropdown, search bar) for persistent access.

• Design a hero banner with compelling tagline ("Modern pet care made simple"), descriptive subtext on quality, and clear CTAs ("Shop", "Learn") to drive actions.

• Organize unique selling points in a "What makes us different" card grid with 3 items (Natural ingredients, Ordering effortless, Guidance from experts) including photos and "Learn >" links.

• Highlight pet needs in a "What pets truly need" card grid with 3 items (Health, Peace, Joy) including headlines, subtexts, photos, and "Browse >" links.

• Include a mid-page CTA banner with large pet photo, headline ("Ready to begin?"), subtext on curated collection, and "Find Out" button for engagement.

• Showcase products in a best sellers grid with photos, names, prices, and variety (natural foods, treats, toys).

• Implement a simple newsletter subscribe form with headline, subtext, email input, and "Subscribe" button to capture leads.

• Design a multi-column footer with categorized links (Customer, Company, Legal, Social, Support) for comprehensive support.

• Ensure mobile-first responsiveness with stacked cards, centered text, and collapsible footers.

• Balance e-commerce functionality (product grid, shop CTAs) with educational elements (difference/needs cards) to increase conversions.

Design Process

1. Research & Discovery Phase

• Conducted user interviews and surveys with 15–20 pet owners (new pet parents, multi-pet households) to identify core pain points: fear of unsafe ingredients, doubt in product quality, overwhelm from too many options, need for balanced nutrition/comfort/joy, and desire for expert guidance.

• Analyzed 10–12 competitor sites (e.g., Chewy, Petco, BarkBox, The Farmer's Dog, Ollie) → common issues: cluttered grids, aggressive upselling, lack of storytelling, cold or overly clinical aesthetics.

• Defined key user goals: feel confident buying natural products, understand brand values, visualize pet benefits (health/peace/joy), decide quickly without guilt.

• Created empathy maps and user personas (new pet parent Alex, experienced owner Jordan, gift buyer Taylor) to guide every decision.

• Established success metrics: high time-on-site, low bounce rate, clear CTA clicks, newsletter sign-ups, emotional trust (via cards/story).

2. Ideation & Information Architecture

• Defined core user flows: Landing → Hero → Browse difference/needs cards → CTA banner → Best sellers grid → Subscribe → Footer support.

• Created low-fidelity sitemap: Home as single-page scroll (hero + cards + CTA + grid + newsletter + footer).

• Sketched 3–4 layout variations: focused on white space, large hero pet photo, card-first difference/needs sections, mid-page CTA for conversion, grid for products.

• Prioritized hierarchy: Hero (emotional hook), Difference/Needs cards (trust + education), CTA banner (mid-scroll push), Best Sellers (conversion engine), Newsletter (lead capture), Footer (support net).

• Chose light theme early → white bg for freshness, vibrant pet photo tones for energy, no dark mode (daytime pet shopping dominant).

3. Wireframing & Low-Fidelity Design

• Built wireframes in Figma: fixed header, hero full-width photo + centered text + CTAs, 3-column card grids for difference/needs (stacking on mobile), mid-page CTA banner with photo, 4-column best sellers grid, simple newsletter form, 5-column footer.

• Tested internal flows: scroll speed, CTA visibility, mobile stacking (grid to 2-column then 1).

• Iterated on spacing: increased white space around cards/headings for breathing room.

• Added annotations: "price upfront for trust", "pet photos for emotional connection", "card grid for education".