Feed My Paws
Crafting a fun and visually engaging shopping experience for pet owners
Feed My Paws offers a unique selection of homemade, nutritious treats for a variety of pets, from dogs to small animals. However, the original site suffered from a cluttered navigation menu and low-resolution visuals, resulting in a less than ideal shopping experience.
In this project, I redesigned the site to create a more user-friendly and visually engaging space. I began by interviewing pet owners to understand their pain points and preferences when shopping for pet products. Additionally, I conducted an exercise where they sorted a list of pet treats to uncover their mental model for product categories. This insight led to a significant simplification of the information architecture, making it easier for shoppers to find the treats they need.
With no prior design experience, I initially played it safe by following conventional layouts. As I grew more skilled with design tools, I progressively refined the interface and embraced a more daring approach. The final design features bold visuals, dynamic elements, and large text, creating a distinctive and enjoyable experience that stands out from typical pet product sites and reflects the fun and excitement pets get from their treats.
Revitalising Feed My Paws: A Bold New Look
TL;DR
Scope: E-commerce Website Redesign
Duration: Three Weeks
Tools: Figma, Adobe Photoshop, Adobe Illustrator
Skills: UX Research, Visual Identity, Information Architecture, UX Writing, Prototyping, Usability Testing
Feed My Paws offers a wide array of homemade, nutritious treats catering to a diverse range of pets, including dogs, cats, rabbits, guinea pigs, hamsters, and chinchillas. Their unique focus on small animals sets them apart from competitors who primarily cater to dogs and cats. However, this resulted in an overloaded product navigation menu, making it difficult for shoppers to find treats.
Additionally, the site's original design featured outdated visuals such as low-resolution media, diminishing its visual appeal. This set the stage for a much-needed redesign to transform the site into a user-friendly, visually appealing space that pet owners could enjoy shopping on as much as their pets would enjoy the treats.
Elevating the shopping experience at feed my paws
About
Surveying the Market
Feed My Paws: Global navigation menu appears overcrowded with options. The splash screen is composed of low resolution pet images with a text overlay that is difficult to read.
Irvins: Clean navigation menu complemented by bold visuals and vibrant colors, creating an engaging and intuitive shopping experience for users.
Feed My Paws: The product names are fun, but the photos are slightly inconsistent in appearance. There is also no 'Add to Cart' button, requiring users to take an extra step to click into the product.
Creatureland: Clear and bright product photos complemented by easy-to-use filters. Hovering over an item reveals an alternate product photo and a '+' button to add items to cart, streamlining the shopping experience for users.
I began by exploring the e-commerce industry and other pet product websites. By comparing key factors such as visual appeal, navigational ease, and product categorisation, I identified critical areas for improvement to create a more streamlined and visually engaging shopping experience.
(Alas, during my market analysis, what started as mere window shopping quickly turned into actual shopping as I ended up picking a few treats and toys for my pup!)
Feed My Paws: The 'About Us' page lacks layout alignment, features inconsistent colors, and appears messy.
Gentle Pet Store: Clean and inviting layout with high readability, enhanced by cute graphics that captures the brand's friendly and caring ethos.
Shoppers' Desires
To uncover insights into pet owners’ online shopping habits, I interviewed 12 pet owners with a focus on the following key research objectives:
To understand pet owners' needs, preferences, and pain points pertaining to purchasing treats, cakes, and supplements for their pets online.
To gather feedback on their current experiences shopping for pet products online.
To explore their expectations for website organisation, product presentation, and the availability of information.
Q: How do you shop for pet products online?
Key insights from my chat with pet owners
Q: What features of your online shopping experience do you particularly like or dislike?
Q: What information do you seek when purchasing pet treats or food?
Interestingly, the interviews included no male participants. When asked why their partners do not purchase treats, some female interviewees reported that their partners consider pet treats non-essential, focusing instead on necessities like pet food and, curiously, toys.
Fetching Insights into Shopper Personas
The valuable insights I gathered from interviewing pet owners enabled me to identify two primary shopper groups with their own key objectives: ensuring ingredient transparency for detail-oriented pet owners and reducing the number of clicks needed to complete a purchase, thereby enhancing both user trust and convenience.
Problem
Problem
Sarah needs a more streamlined and organised shopping experience to efficiently find and purchase products without the frustration of messy navigation and cluttered layouts.
Irene needs access to transparent, clear ingredient information to ensure she is purchasing high-quality and suitable treats for her dog.
Solution
Solution
Create a more intuitive shopping flow and include fun visuals to keep Sarah engaged and minimise her shopping frustrations.
Provide detailed pet product descriptions and clear information about the ingredients used to Irene, assuring her that the pet treats are made from high-quality, natural ingredients.
Speedy Shopper Sarah
Ingredient Inspector Irene
The Redesign Process
Card Sorting of the products
Firstly, I conducted a virtual card sorting session with three pet owners to determine the optimal grouping for Feed My Paws's diverse range of treats, which cater to various pet types and treat categories. This technique helped me understand which pet treat categories should stay, be relocated, or be combined based on the pet owners' mental models for finding treats online. This exercise was crucial in shaping the organisation of the product menu within the global navigation.
Overhauling the site's information architecture
Next, I reorganised the global navigation menu to streamline the categorisation of their extensive range of pet treat products, along with the shop's information and online resources for pet owners. Although I focused primarily on dog treat products in this concept project, the navigation and product pages were planned with the other pet types in mind, ensuring a holistic approach. The information architecture was significantly simplified, thereby enhancing usability and improving access.
Re-creating the brand's identity
Lastly, I leveraged Feed My Paws’ distinctive yellow and black brand colours, drawing inspiration from Irvins, a well-known salted egg snack brand. These colours were used to convey a playful warning about the treats’ irresistible addictiveness. The new logo features playful elements, incorporating a dog, cat, rabbit, and hamster embedded within the "Feed My Paws" text. This design highlights the brand's commitment to various pets while creating a cheerful and engaging identity.
Revising the website's hierarchy and reducing overlapping categories to make content more discoverable
Infusing fun elements into the design system
the Shopping Journey
I visualised the shopping journey by creating a user flow that maps key touchpoints, illustrating how pet owners navigate the shopping experience.
Ideas Baking in the Sketchbook
Sketches of early mockups
From Draft to Craft
Before
After
Before
After
Home Screen
Product Listing
This project marked my first foray into UI design, challenging my abilities and pushing my boundaries. With no prior design background, I began cautiously, initially mirroring the conventional layouts typical of existing pet product shopping sites. However, as I became more proficient with the design tools and processes, I iteratively refined the user interface, each version gradually evolving into a unique expression of my vision.
The significant turning point came when I dared to depart from the conventional path. In my final iteration, I adopted bold visuals, moving elements and large text, aiming to create a fun and engaging experience that distinguished itself from standard designs.
First version of the prototype
putting it to the test with pet owners
Confusion regarding mini treat packs
During the card sorting phase, participants initially viewed mini treat packs as a distinct category. However, usability testing revealed a different mental model, as some participants had difficulty locating the mini treat packs. They suggested grouping them into the corresponding larger pack product pages rather than listing them as a standalone category in the global navigation menu for easier discovery.
Minor UI Changes
All participants enjoyed the dynamic design elements on the Feed My Paws website. The moving text on the home screen and the hover effects on product listings were standout features, highly praised for their playful touch. Although two users noted that the font size in some sections was somewhat large, affecting readability, they appreciated how the bold visuals and moving elements captured attention and distinguished the site from competitors. In response, the font size was slightly reduced to enhance readability.
Usability testing was carried out with five users and garnered overwhelmingly positive feedback. All users successfully completed their tasks, achieving a median System Usability Scale (SUS) score of 87.5.
Feedback on the site's navigation and organisation was uniformly positive, with users praising the seamless shopping experience for its ease of browsing products, adding items to the cart, and proceeding through checkout, indicating that the site's structure effectively supports user interactions and enhances the shopping experience.
Afterthoughts 💬
This conceptual redesign of the Feed My Paws website was a delightful passion project for me. It gave me the opportunity to connect with other pet lovers through social media for user interviews, helping me build new friendships along the way. I developed two complete versions of the prototype, both warmly received by pet owners for their engaging visuals and friendly vibes. My primary challenge was my initial lack of UI knowledge; nevertheless, I experienced substantial growth through this project, learning to push the boundaries of design while enjoying the process.