Local pet stores vs online retail giants — closing the e-commerce gap

Meeting user needs in the community, without sacrificing convenience

Ciaran Utting
Bootcamp

--

Brick-and-mortar pet store Little Creatures want a new e-commerce website showcasing their products, while at the same time maintaining their ‘small shop’ appeal. Unlike online retailers such as Amazon, they stand apart by offering a highly-curated inventory, focusing on hand-picked quality over quantity.

This case study will take you through the identification of the client’s needs, and the process I took in creating their web-based solution.

Competitor analysis

To begin, I needed to get a sense of what exactly competitors were offering. A cursory search for local pet store websites revealed something that surprised me — they were largely basic, both in terms of design and features — if they even had a website at all. When compared to large online-only pet warehouse sites, this gulf of useability becomes even more apparent.

The Fish Bowl

Consider, for example, this website for a pet store in Fulham. An almost totally empty homescreen, a horizontal and vertical menu both displaying the exact same navigation, tiny text, not a single product on show, no calls to action, and so on… It may seem like an extreme example, but by no means was this picture uncommon.

According to recent studies, 75% of people will judge the credibility of a business on their website, and an incredible 94% of users’ first impressions are design related. With this in mind, a website such as the above simply isn’t fit for purpose.

Pet Planet

Compare that with one of the larger online pet retailers, and the difference is stark. More information available, a clearer layout, offers and calls to action. I need to find a way to make Little Creatures comparable to a site such as this, without it losing it’s communal brand personality.

Other client-requested site features are notably absent in other local store competitors sites, but again are mostly present in the national stores. Indirect competitors such as Amazon, and supermarket chains such as Sainsburys, also have these features:

User Interviews

For a deeper insight into the shopping habits of pet owners, I conducted several interviews, where the following common insights arose.

  • Buys pet food once per week alongside regular groceries as part of a routine. However, speciality items (toys/ accessories etc) are usually purchased online via Amazon. Users like the ease of searching & low cost.
  • They were unsure about local pet shops in their area, can get everything they need through other means, but could be persuaded to go to their local store if they knew about it. Supports the idea of community/local business.
  • Values convenience above all. Does not object to paying more if it offers better quality or amenity.

Site Navigation

It was important to discover how users interpret and categorise content for site arrangement. I had to do my own brief bit of research first as some of the inventory items I hadn’t even heard of myself… But once I was familiar with them, I began a card-sort with a group of users where they placed sticky notes of store inventory into their own ascribed catergories.

Once the results had been compiled, I was able to assemble a fitting navigational layout.

Little Creatures site map based on it’s sales inventory and user interpretation test

Persona

So now that we have a basic site map, we need someone to test it. From the earlier research findings, I created a persona that would enable me to validate any ideas about users and their needs. Their goal was summarised as follows:

Andreas needs a recurring way to buy pet food via Little Creature’s website, without sacrificing the convenience they find in the process of corporate competitors.

That is to say, how few clicks would it take for them to go from from search to purchase — and what might their stumbling blocks be in my design? I drew up a “happy path” for them to take through the process, with an emphasis on simplicity.

Design

I began by sketching out some ideas for the basic feel of the site, before turning them into wireframes. These were then tested and iterated as required.

Increasing fidelity wireframes, from Sketch to Mi-Fi

The tendency is obviously to focus on the things that didn’t work for the users, but I felt it was equally as important to keep positive feedback in mind so as not to overdesign or overlook something that already works well.

They liked:

  • Product Page — easy to navigate
  • Layout of website — understood it without text or icons (matched with mental model)
  • Flow — they were able to click through and complete purchasing task in few clicks

That said, there were of course several negative sticking points for users:

They struggled with:

  • ‘Overlay’ checkout concept — found it confusing
  • The placement of some secondary buttons, such as adding reviews or alternative delivery addresses
  • ‘Loyalty Point’ layout — another pain point for the shopping basket page
The checkout page was quantitatively the least learnable and satisfying for users, and underwent the most revision.

Final takeaways

Up to this point I feel like the project has been a success. The feedback for the medium-fidelity site was positive, with users consistently able to navigate and complete tasks with no intervention.

There are still a few small adjustments to be made before the move to full on colour hi-fi — but overall the site is coming together. Hopefully before long, Little Creatures will be leading the charge on beautiful and practical community store sites for pet owners.

--

--