Bark 'n Fetch
E-commerce platform dedicated to providing high-quality pet products.
Background
The Bark n Fetch project tackles decision fatigue in the $136 billion pet industry by simplifying e-commerce through user-centered design. By focusing on user-centered design, the project aims to simplify the shopping experience through personalized recommendations and clear product information, creating a seamless and enjoyable shopping experience.

Heading

Project Type

Timeline

Tools

1. MOTIVATION
problem
Users struggle navigating online pet product sites.
Pet stores often overwhelm customers with too many products and information, making it hard to find what they need. This leads to frustration, high bounce rates, and low retention. Bark n Fetch aimed to solve this by offering a streamlined, user-friendly experience to help pet owners easily find and buy the right products, driving both sales and customer loyalty.
solution
Design Bark 'n Fetch site for better product discovery to purchase.
Bark n Fetch addressed common pet store challenges by streamlining the shopping experience through:
View Final Prototype
2. UNDERSTAND
User interviews
Uncovering User Pain Points
I conducted interviews with 6 pet owners to understand their pain points, needs, and behavior when shopping for pet products online. Key findings included:
competetive analysis
Current apps lack targeting.
I analyzed four competing pet e-commerce platforms, focusing on their navigation, search functionality, and overall user experience. This helped identify gaps in Bark n Fetch’s site, such as a lack of filters and clear product categories.
PetSmart
Pro
  • Well-branded with clear sections for services.
  • Detailed categories with a wide range of filters.
  • Mobile app with features like grooming bookings.
Con
  • Website can feel cluttered and overwhelming.
  • Too many categories.
  • Slow navigation at times.
Chewy
Pro
  • Easy-to-navigate.
  • Clean, minimalist design.
  • Intuitive navigation with search filters.
Con
  • Lack of detailed subcategories for niche products.
  • Minor inconsistencies in navigation between mobile app and desktop site.
Hollywood Feed
Pro
  • Visually appealing, boutique feel.
  • Simple navigation.
  • Consistent mobile with the desktop site.
Con
  • Smaller product range compared to Chewy and PetSmart.
  • Limited online presence.
  • Fewer interactive design elements.
The Foggy Dog
Pro
  • Clean, modern aesthetic with high-quality images that are visually engaging.
  • Intuitive menu structure.
  • Responsive design across devices.
Con
  • Limited features for personalized recommendations.
  • Lacks advanced filtering options.
  • Brand inconsistency with typography and color usage across pages.
3. IDENTIFY & SYNTHESIZE
Key takeaways
Design opportunities
User feedback revealed two main challenges: difficulties navigating the site to find specific products, often leading to frustration, and a desire for more personalized experiences, with pet owners seeking tailored recommendations based on their pets’ unique needs. These insights informed critical design decisions aimed at creating a more intuitive, customized shopping journey for pet owners.
personas
Identifying the target user.
From interviews and analysis, I found that pet owners in their mid-20s to 30s with disposable income are passionate about providing high-quality products for their pets. The personas highlight how this group values both convenience and unique, tailored products, driving demand for a premium shopping experience.
How might we?
4. IDEATION
Feature set
What to include?
Based on user feedback, the feature set was designed to prioritize key solutions that improve the shopping experience. This included enhanced navigation, personalized product recommendations, simplified filtering options, and a streamlined checkout process. Each feature directly addressed pain points identified in testing, ensuring a user-friendly and efficient shopping journey for pet owners.
Sitemap
Identifying the structure.
I structured the site’s information architecture, creating a clear and intuitive flow. The new site map improved discoverability of products and featured key sections like "Shop by Pet," "New Arrivals," and "Customer Favorites."
task flow
Mapping out the interactions.
Recognizing the challenges dog owners face in finding and purchasing toys, I designed a detailed user flow to streamline their shopping experience. This included mapping out the journey to ensure easy navigation and quick access to product details and checkout. By prioritizing a user-friendly flow, the platform caters to pet owners' needs for convenience and simplicity.
content map
Prioritizing key homepage features.
Before wireframing, I organized a content map for the homepage to decide which site features should take priority as the first thing users see. This approach helped me visualize essential elements on the main pages and offered valuable guidance for designing the layout.
5. EXECUTION
wireframes
Getting started
Mid-fi wireframes to establish the layout and key interactions. This stage helped validate the content structure and ensure the main touchpoints were easily accessible.
Homepage
Sub nav
Product Listing Page 1 & 2
Product Display Page & Mini Cart
Design System + Style Guide
Visual Design
Creating a brand that exudes a community and inclusive feel.
I designed Bark 'n Fetch's interface to capture the lively, welcoming spirit of pet ownership. The blue and yellow palette adds vibrancy and usability, while thicker strokes and rounded edges create a warm, approachable shopping experience.
6. TESTING & ITERATION
user test
Tasks were completed with little to no delay or confusion.
I recruited 5 participants to provide feedback on the design and identify improvement opportunities by completing tasks based on the task flow.
User Test Goals:
What could be better
Final MVP Design
Visual Design
Creating a brand that exudes a bold and daring ambiance
Emphasizing boldness, I aimed to elevate the app’s mood to reflect the adventurous spirit of rock climbing. The design resonated with the dynamic energy of the outdoors, highlighted by vibrant colors. Thicker strokes and rounded edges conveyed approachability and informality.
View Final Prototype
7. FINAL MVP

Homepage

Thewas designed to offer quick access to dog toys through prominent category links and a clean, streamlined layout.

Product Listing Page L1

Here, users are introduced to a visually engaging page with high-quality images of featured toys and easy navigation to subcategories.

Product Listing Page L2

This design prioritizes a large header image and simplified filtering options, allowing users to focus on relevant products without distractions.

Product Display Page

Theemphasizes clear product details, user reviews, and a straightforward "Add to Cart" button, making the purchasing process smooth and intuitive.

8. REFLECTIONS
Reflections
What I learned..
By focusing on user needs and aligning with business goals, I was able to deliver a streamlined, engaging, and efficient e-commerce experience for Bark n Fetch which was proven in the user tests. This project emphasized the importance of empathy in design and reinforced the value of iterative testing and research.