Most pet supplies websites look like a well-stocked shelf: beds, leads, toys and bowls, dozens of products per category. It works, but it is rarely charming. What makes people stop and buy is usually the moment they think, "this would be perfect for my dog."
This breakdown looks at FLOOF DAYS from the Foundax case library, a fictional and playful pet supplies store with three everyday favourites: a cloud donut bed, a walking harness set and a carrot play set. Its approach is to let three dogs lead the way: Naigai the Bichon, Pudding the golden retriever and Mochi the Shiba, each bringing one kind of day and one favourite product.
Why pet supplies websites are hard
- Shelf-style categories lack feeling. The range is complete, but nothing feels like it was made for your dog.
- Size is the easiest thing to get wrong. A bed that is too small or a harness that is too tight is a common reason for returns.
- Breed is not size. Two Shibas can differ a lot in build and habits.
- Cute turns cheap quickly. Too many cartoon touches and the brand loses its quality feel.
So the design goal for FLOOF DAYS is: build closeness through three dogs with personalities, recommend products through their everyday lives, and be clear about sizing.
The idea: three floofs, three very good days
Each dog has a personality. Naigai is the cuddle cloud who loves a soft corner. Pudding is the outdoor pal whose tail moves as soon as someone says "walk". Mochi has a mind of her own and likes choosing her own toys. Each dog has one favourite product and one moment: sleeping, going out or playing. Visitors do not need to browse categories. They only need to find the dog most like their own.
Visual language: cream backgrounds and line-drawn doodles
The page uses warm cream and butter yellow, and each dog has a theme colour: lilac for Naigai, mint for Pudding and warm apricot for Mochi. Hand-drawn dog doodles decorate buttons and section corners, keeping the cuteness in the details instead of covering the page.
- Cream
#FFFDF5Page background - Butter yellow
#F9EFB3First screen, navigation and stickers - Lilac
#E9E1F3Theme colour for Naigai and the cloud bed - Mint
#D7E7B2Theme colour for Pudding and the harness set - Deep olive
#383B2CHeadings, body text and line doodles
| Use | Typeface | Why |
|---|---|---|
| Display headings | Rounded faces such as Arial Rounded MT Bold | A round, bold face feels friendly and suits lines like "Good days come with tail wags" |
| Body and interface | Avenir Next, PingFang | Clean and readable, so sizes and prices stay clear |
Four signature moments
Group photo
Good days come with tail wags
The first screen is a photo of all three dogs with name tags and a "100% dog approved" sticker, so visitors smile at first glance.
Meet them
Three floofs, three very good days
Choosing Naigai, Pudding or Mochi switches the photo, personality, happiness list and favourite product together, and the theme colour changes with it.
Browse
Their favourites, thoughtfully picked
Products can be filtered by everyday moments such as nap time, out we go and play time, instead of by product type.
Measure
A good fit for your best friend
A separate guide explains how to measure for a bed, a harness and toys, and reminds visitors that breed is only inspiration.
The six-act storyboard
01
Opening: Good days come with tail wags
On butter yellow, the Bichon, golden retriever and Shiba sit side by side, and name tags and a sticker set the brand's warmth straight away.
02
Naigai: Today's big plan, be a little cloud
With Naigai selected, a lilac card shows her curled up in the cloud bed, her happiness list and her favourite product.
03
Pudding: Happiness is one more lap
Switching to Pudding turns the card mint green, and the walking harness set on grass becomes the hero.
04
Mochi: Little head, very big ideas
Switching to Mochi turns the card warm apricot, with the carrot toy and ceramic bowl as the favourites.
05
Shop: Their favourites, thoughtfully picked
The three products sit on their theme colours, can be filtered by everyday moment, and show colour, size and price on each card.
06
Guide: A good fit for your best friend
A separate guide page: measure lying length for a bed, chest girth for a harness, and consider build and play style for toys.
Sizing matters more than cuteness
Size is what pet owners most often get wrong, so FLOOF DAYS repeats the reminder in two places. Under the dog cards, it says that breed is inspiration and that choices should follow the dog's measurements and habits. The guide page gives concrete methods, such as wrapping a soft tape behind the front legs around the widest part of the chest, and states that the harness adjusts from 65 to 85 cm.
The photos help with scale too. A dog in the same frame as a product shows proportions better than a product on its own. Baymard Institute found that 42% of users try to judge a product's overall size from its images, so photos with a dog for reference are valuable, though measurements should still decide. The Foundax team made the dog and product images with image generation tools.
From love to order
All three products are real products in Foundax, with colours and sizes stored as product variants, leading to native product pages, the bag, checkout and orders. The dog selector uses real buttons with a selected state, so screen readers announce which dog is chosen, matching W3C WCAG 2.2 requirements for operable controls. To learn more, visit Foundax features.
A checklist you can reuse
- Tie products together with a few characters so visitors find "the one most like mine".
- Give each character one everyday moment and one hero product.
- Filter by moments such as sleeping, going out and playing instead of product type.
- Put sizing reminders next to the choice and add a separate measuring guide.
- Keep cuteness in the details, such as doodles, stickers and theme colours, rather than everywhere.
- Show characters with the products to help visitors judge scale.
FAQ
With only a few products, does a character-led story work?
Very well. Characters give every product a use. Three products with three dogs are far more inviting than a sparse shelf.
How can a pet supplies website reduce size-related returns?
State sizes and adjustment ranges beside each product, explain how to measure, and remind owners that breed is only a guide. FLOOF DAYS adds a dedicated guide page for this.
Is FLOOF DAYS a real brand?
No. FLOOF DAYS is a fictional brand created by the Foundax team. Shopping and orders in the case are a demo. Nothing is charged or shipped.
Can I start my own website from this design?
Yes. On the FLOOF DAYS case page, choose "Start with this template". After signing up, a website is created from this case, ready for your own products and brand content. For design methods across industries, see the brand website design guide.