Petworld E-Commerce Redesign - Forward Agency

Petworld project banner showcasing different parts of the website.

This project focused on evolving Petworld’s digital presence.

Petworld, an Irish pet supply retailer, sought to modernize its online store to better reflect its brand while improving user experience and functionality. The existing site was outdated in terms of design and lacked the playful, engaging aesthetic of competitors. Our role was to create a more dynamic, visually appealing, and user-friendly e-commerce platform while ensuring brand recognition and continuity.

KEY RESULTS

  • Delivered a cohesive brand concept and style guide that refreshed the look while maintaining continuity for loyal customers.
  • Successfully transitioned from outdated Gaelic football-inspired colors to a modern blue/green palette with yellow accents, ensuring recognizability.
  • Created a Figma prototype for the homepage that adhered to Shopify theme constraints while incorporating custom CSS to enhance visual appeal and functionality.
  • Achieved a visually engaging design with category cards, colorful banners, and dynamic product cards, improving user navigation and interaction.
  • Improved the site's visual hierarchy with pastel tones for secondary elements and optimized the color mix to reduce harshness while maintaining contrast.
  • Replaced outdated iconography with paws and line art, resonating with Petworld's pet-centric identity.
  • Enhanced the existing logo’s legibility and integration into the new design without a full redesign, aligning with brand evolution goals.
  • Simplified product categorization with Shop by Pet sections, utilizing animated images and engaging color contrasts.
  • Met tight timelines while delivering a design aligned with client feedback, fostering trust and collaboration.
  • Iterative design approach led to a consensus on color schemes, icons, and imagery, ensuring client buy-in at every stage.
  • Developed custom CSS within Shopify’s theme customizer, ensuring future updates could be implemented without extensive code rewrites.
  • Differentiated Petworld from competitors (e.g., Zooplus, Petstop) by focusing on fun, approachable visuals and enhanced UX features inspired by top-performing stores like the BigCommerce demo.
  • Balanced client preferences for brand evolution with the need for continuity, resulting in a site that feels “shiny and new” while staying familiar to existing customers.
  • Designed for speed and simplicity, reducing dependency on plugins while keeping the interface light, fast, and user-friendly.

Our biggest challenge as a team was ensuring all stakeholders were aligned on objectives and timelines, and making realistic compromises knowing this would be our first approach to this tool and there would be future iterations.

CHALLENGE

CONTEXT

Petworld aimed to transition from its old website to a Shopify platform, leveraging this opportunity to refresh its design while maintaining brand recognition for existing customers. The openness of the client allowed creative freedom but also demanded strategic alignment to avoid alienating loyal customers.

PROBLEM

The old design was visually unappealing and lacked functionality, while the new site needed to balance brand evolution with consistency. A heavy logo, outdated colors, and stark visuals were key challenges.

GOAL
  • Modernize Petworld’s digital identity.
  • Ensure a playful, pet-centric design that aligns with their brand.
  • Retain existing customers through strategic continuity.
SOLUTION

A phased design evolution prioritizing:

  • A vibrant, balanced color palette.
  • Playful and dynamic visuals (category icons, banners, and product cards).
  • Simplified navigation and a mobile-first approach.

We clarified the platform’s core purpose, target audience, and key goals to ensure a user-centered design strategy.

BRIEFING HIGHLIGHTS
  • Prioritize continuity with subtle evolutionary changes.
  • Use the Shopify platform and minimize custom code for scalability.
  • Develop a quick brand guide, including colors, typography, and visual elements.
  • Propose a design prototype focusing on banners, category icons, and homepage elements.
KEY CHALLENGES
  • Modernizing without alienating existing customers.
  • Achieving brand distinction in a competitive market.
  • Working within Shopify theme limitations while delivering a unique look.

During this process we analyzed competitors, focusing on their strengths and weaknesses, and concluded on a design direction focusing on vibrant banners with line drawings and animal-focused imagery, and a balanced mix of bold and pastel colors to maintain a friendly aesthetic.

SIMILAR PLATFORMS

website screenshot of a competitor in Ireland

Zooplus

A leading European pet supply retailer offering food, accessories, and care products for a variety of pets.

Key Features:

  • Comprehensive navigation with a "Shop by Pet" structure (e.g., Dogs, Cats, Small Pets).
  • Subscription services for recurring orders like food and essentials.
  • Regular discounts and loyalty programs for customer retention.

Visuals & UX:

  • Utilizes a clean, professional interface with limited use of vibrant colors, focusing on functionality over flair.
  • Category pages are text-heavy, which may limit visual engagement.
website screenshot of a competitor in Ireland

Petstop

An Irish pet retailer known for its physical stores and online presence, catering primarily to local markets.

Key Features:

  • Product bundles and offers specific to local pet care trends.
  • In-store services like grooming advertised prominently online.

Visuals & UX:

  • Vibrant and approachable design with bright colors to attract attention.
  • UX is focused on local convenience rather than extensive eCommerce features.
website screenshot of a competitor in Ireland

Chewy

A US-based platform specializing in pet products with a strong focus on customer service.

Key Features:

  • Subscription services and auto-ship options for essential items.
  • Personalized customer service, including handwritten notes and direct support.
  • Extensive customer reviews and recommendations on product pages.

Visuals & UX:

  • Simple and user-friendly, with a focus on bright, pet-friendly colors like blue and yellow.
  • Homepages showcase a mix of seasonal promotions, new products, and trending items.
website screenshot of a competitor in Ireland

Pets at Home

UK-based retailer with both online and in-store shopping options, offering a mix of products and services like grooming and veterinary care.

Key Features:

  • Online booking for grooming and veterinary appointments.
  • Loyalty rewards through the VIP Club program.

Visuals & UX:

  • Heavy use of green tones for a natural, pet-friendly aesthetic.
  • Visual hierarchy emphasizes services and memberships over product browsing.

We created high-fidelity prototypes in Figma for the Homepage, and went through 6 rounds of revisions with the agency and Petworld stakeholders. We focused on:

  • Header & Navigation: Clean white header with dropdowns for simplicity.
  • Hero Banner: Vibrant visuals combining blue, orange, and purple accents with pet imagery.
  • Category Icons: Circular icons with colorful backdrops and animal illustrations.
  • Product Cards: Hover effects to display product details and color options.

WIREFRAMES

VERSION 1

We designed an initial concept meant to be as bold as it could, with vibrant colours and a palette that would possibly reduced and polished, and plenty of variations for illustrations.

VERSIONS 2 TO 6

FEEDBACK

  • Experimented with a green color theme for the banner sourced from PetCity, ensuring it aligned with the overall brand style. Simplified the top banner by removing unnecessary visual noise, such as paw prints and other icons, and reduced its height for a cleaner, more focused visual hierarchy. Propose a new background color for the category circles that complemented the overall design theme.
  • Transitioned to a black color for the main heading (H1) to create a stronger visual impact. Used a black version of the logo across the site to maintain consistency and enhance readability, and xplored a version without dog elements to make it more versatile for broader audiences. Simplified the color palette by focusing primarily on the existing shades of blue and green.
  • Aligned the bold colors of the hero banner with the softer, pastel tones used throughout the rest of the design for a more cohesive look. Incorporated shades of grey for the category cards. Illustrated additional animals to represent the various categories, ensuring they aligned with the existing style.
  • Featured a hero banner that prominently showcased a curated collection of items currently on sale, ensuring an engaging first impression for users. Ensured all text displayed over dark background colors were styled in white to maintain excellent readability and visual contrast.
  • Removed heart icons from the interface to create a cleaner and more streamlined design.
  • Incorporated bones, paws, and other thematic elements into illustrations for consistency and charm. Explored a version of category cards using the provided icons. Restored the logo colors to match the original design, ensuring brand consistency.

FINAL VERSION

FEEDBACK

  • We changed the icons back to illustrations to create a more visually engaging and cohesive design.
  • Increased the size of category titles to improve readability and emphasize the hierarchy of information.

COLOR PALETTE

USE OF COLOR

DO´S & DON´TS

TYPOGRAPHY

ISOLOGO

BUTTONS

CATEGORY TILES

ILLUSTRATIONS

BANNER SLIDERS

HERO PROMO BANNER

OTHER PAGES BANNERS

SMALL PROMO BANNERS

CATEGORY CARD BANNERS

OLD WEBSITE

NEW WEBSITE