Pet Stop – Designing a Clear & Trustworthy E-Commerce Journey

sairajayne5
Aug 14
6 min read

This Pet Stop case study explores how I transformed a fictional pet shop’s scattered inventory into a clear, intuitive e-commerce experience. Through competitive analysis, card sorting, and user-centred navigation design, I created a shopping journey that’s both simple to use and rich with personality. The result is a prototype that balances streamlined product discovery with future-ready features for community engagement.

Content

Contributions
Project Background
Setting the Scene
Competitive Analysis
Understanding the Inventory
Card Sorting
Persona
Design Approach
Prototype
Next Steps

Contributions

I conducted competitive analysis, reviewed and clarified a large product inventory, carried out open and closed card sorts, interviewed users, created personas, and mapped the e-commerce journey through a user flow diagram. I designed a mid-fidelity clickable prototype, developed early visual styling, and began building a rudimentary design system to support future growth.

Project Background

This project was part of my General Assembly course, where the brief was to design an e-commerce experience for a fictional local pet store called Pet Stop. The shop was imagined as a friendly, community-focused business with a varied but limited inventory – everything from pet food to accessories.

The challenge was to make it effortless for customers to browse and find products, while weaving in a sense of trust and personality that reflected a local store. The journey needed to be as smooth as any major online retailer but tailored to Pet Stop’s smaller, curated range.

The deliverables were mid-fidelity wireframes showing a homepage, category page, product page, and checkout flow — with particular focus on information architecture.

Setting the Scene

Pet Stop’s physical store was popular locally, but customers often found it frustrating not knowing what was in stock. Staff spent a lot of time answering questions from people who were “just browsing,” or offering alternatives to items, which could have been handled by a well-structured online catalogue. The redesign aimed to fix this problem by creating a clear, intuitive navigation system, while also making the e-commerce journey simple, engaging and reassuring for users.

I wanted the site to feel welcoming and personal, but also stripped of the visual clutter often seen in pet store websites.

*Fig 1. This is a representation of a customer going to the store and not having the type of food that they wanted.*

Competitive Analysis

To understand the current landscape, I reviewed navigation structures and product discovery journeys on several pet-focused e-commerce sites, including Scampers, The Pet Shop, and Jolley’s. These websites often presented a lot of information up front, having 2 step navigations that worked as filters for shopping enabling users to easily find the products they wanted. Though, many of these navigations leaned heavily on promotional content and I felt it sometimes overshadowed the browsing experience and did not build trust effectively.

By contrast, larger retailers such as Next and John Lewis took a different approach. Their navigation menus followed the same 2 step navigations acting as filters, but they did not rely as heavily on promotional content within the navigation and instead relied on curated promotional content on the homepage. This cleaner style felt more suited to a business with limited stock such as Pet Stop, where overwhelming customers with promotions when not relevant to their animal (e.g. promoting large dog food to a user with just a small dog) added complexity and was often irrelevant to the customer.

From this research, I formed the assumption that Pet Stop’s navigation would benefit from having a “shop” section, followed by the list of animals, followed by the categories.

Understanding the Inventory

The project began with a supplied list of around 60 products. Many of the names were ambiguous (“Cricket block,” “battery air pump”), so I researched each one and found reference images. Creating a clearer and more visual inventory helped me to create obvious categories, such as “Dog Food”, but would also benefit me with a card sort to organise the more ambiguous products.

Card Sorting

Card sorting was the most important step in shaping Pet Stop’s navigation. It is a research method where participants are asked to organise items into groups, revealing how people naturally expect to find things. This makes it especially valuable when designing navigation for an e-commerce site, where clarity and trust are built on helping users find what they need quickly. I did this in 2 stages, an open card sort and a closed card sort. The open card sort would help to define the categories, and the closed sort would help to validate them.

For the open card sort, I created digital “post-it notes” in FigJam, each with a product name and image. Six participants were asked to group them however they thought made sense. They could create as many categories as they liked, and duplicate items if they belonged in multiple places.

Fig 2. An example of one participants closed card sort.

Key Insights from the Open Sort:

Most participants grouped products in two layers — first by animal, then by product type (e.g. Birds → Food).
Small animal accessories were often grouped together, rather than split by species.
Aquarium and terrarium products were sometimes grouped together, possibly due to their “specialist environments,” though I chose to keep them separate for clarity.

Using these results, I moved on to a closed card sort with four new participants. This time, the animal categories were fixed, and participants placed items within them. The results validated the categories specified, but also validated the names of the categories. E.g. Small Pets → Accessories

Persona – Phoebe

From the competitive analysis, interviews, and card sort results, I developed a persona called Phoebe.

Design Approach

Navigation I first experimented with having all of the animals always visible in the navigation, but felt it quickly cluttered the page and became questionable at smaller screen sizes. So I then went with “Shop”, then listed the animals within this area of the navigation. On hover the navigation then expanded into a second level of filters. When clicking on the animal, e.g. Dog, it would take you to the animals landing page. These landing pages contained a combination of the further filters for the animal e.g. dog food, a snippet of blogs and community beneath all of the categories, followed by all of the products related to the animal. This gave the Pet Stop a practical page that still had personality and helped to build trust with the customer.

FIg 4. My first draft of the navigation - featured what I felt was quite a cluttered navigation

Fig 5. Features a cleaner navigation that is easier to navigate

Community & Blog Integration Although blog pages weren’t built at this stage, I designed card components that could hold future content such as “What You Need to Bring Your Puppy Home” or “Best Enrichment Toys for Rabbits.” A dedicated “Community” tab in the navigation would eventually allow users to filter these by animal type. This created the foundation for Pet Stop to grow beyond retail into a trusted voice for pet owners.

Product Cards The product cards displayed an image, product name, and price, along with a simple star rating system to start building trust. They were designed with room for future features such as “Recommended Product” tags, but even at this stage they supported the clarity and transparency that Phoebe needed.

User Flow I mapped a happy-path journey for buying dog food, using a flow diagram. This showed how quickly the journey could become complex when accounting for stock availability, delivery, and account login. To maintain trust, I decided that sold-out items should remain visible but without an “Add to Basket” option. If users tried to add more than the available stock, an error would appear on the summary page.

Checkout The checkout experience supported both guest and signed-in users, though my prototype focused on the signed-in flow. I tried to break down the journey to simple steps so that if more or less steps are required the pages can be easily modified. These included, user sign in, delivery options, providing card details and shipping details. I also felt it was important to keep delivery and return information obvious at all time, and so left this at the top of the page in a prime location for the full checkout experience.

Prototype

The clickable mid-fidelity prototype brought together all the elements of the Pet Stop e-commerce journey. It began with a homepage that introduced the simplified animal-first navigation, allowing users to quickly select their pet type before diving into relevant categories. Category pages showcased product cards alongside space reserved for community content, reinforcing the friendly, trust-building tone of the brand.

The product detail page expanded on each item with images, clear descriptions, and a visible star rating system with the ability to expand this for more information. This layout kept the focus on transparency while leaving space for future enhancements such as recommended product tags.

The checkout flow followed the structure mapped in the user journey, by following this flow journey, what could have been quite a complex process was reduced to its happy path which was met with very little friction to purchase a can of dog food.