2 Hounds Design – Homepage

2 Hounds Design Homepage

First impressions. A store that sells the more-comfortable-than-a-collar-thingy for walking your dog. A Harness so it's called. Okay. What else.

2 Hounds Design Dog Collars

And collars too. Nice. I'm guessing designer dog collars are their primary product. Moving along.

2 Hounds Design - Bespoke imagery

Using bespoke imagery and design, they have create a positive first impression that translates to increased patience with site hiccups and fewer abandonments.

Reiteration product range

Reiterating the product range using visuals in the homepage, below the fold is a great way of helping visitors successfully infer the product range.

2 Hounds Design also sells dog leashes

An inherent problem with Woocommerce is that the store is hidden behind a Shop link on the main navigation

This does not not allow visitors to see the complete product range when they land on the home page.

Instead, the main navigation should include the first level of product categories. This way users can easily infer the diversity of the products carried at the store.

which brings up a burning question. Are the other menu items so important as to deserve a place in the main navigation?

I'm sure piquing the interest of potential wholesalers is not the primary goal of the website. Yet, the menu item sites there, distracting visitors from their shopping experience

Enter the Courtesy Navigation

It is where important links other than purchased-focussed ones can be placed. Though helpful, it can begin to feel cluttered if not used right.

Lo and Behold, we already have a courtesy navigation.

If the Wholesalers and News items are so important that they deserve a place in the header, they can go here.

Speaking of items in the courtesy navigation, what's this teeny-tiny under-emphasised icon?

That's the all important search field right? But where's the actual field?

Whenever users get stuck or have a specific product in mind, they adopt the search strategy.

The field must be immediately obvious to the user on the homepage, which typically requires placing it right and increasing its visual dominance.

Alright, time to see what Shop has to offer.

Oh! Dropdown menu.

Users will hugely benefit when menu items with a dropdown are indicated using a down arrow.

Without an arrow, they'll click on the menu item, completely missing out on the purpose of the dropdown.

and users who interacted with a dropdown menu's parent item not indicated with an arrow will begin to expect a dropdown on every other item as well.

Any way. Onward with the content of the dropdown.

Uh-oh! So going by this mega-menu, you can shop for Collars, Shop Now for a few more items and again shop collars of multiple widths!

The lack of curation of products in sub-categories again hinders the users' understanding of what the store has to offer.

A quick look at all the products the store offers shows how users can benefit from a well-curated categorisation and display of products.

And let's use our improved main navigation that includes top product categories.

A mockup of how effective categorisation can be for product discovery.

The product discovery benefits of including the top categories into the main navigation and curating sub-categories into useful groups are very clear.

It is detrimental to the users' product finding abilities if when what should be filters and implemented as categories and vice versa. More on this in a future category taxonomy teardown.

That's all with regards to the main navigation. Let's now look at the hows and whats of the carousel slider.

Now, from a UX perspective, carousels are considered long dead. That's because any slide other than the first one get a click of ~1%. In other words, slides other than the first one almost never get seen.

Yet, almost 32% of e-commerce sites still have carousels. But that's down from 52% in 2013.

That being said, let's look at how its implemented here at 2 Hounds Design.

The rotation does not pause on hover!!! This is the most basic implementation detail for a carousel.

When a user hovers over a slide, they are expressing an interest in what it says. It is important that they be given all the time they need.

The rotation can be resumed once they move the mouse cursor out of the slide.

This causes another problem when the user is interested in a particular slide and going to click on it.

Often the slide changes in the last milliseconds. This is annoying for users who notice it but even worse for ones who don't and are sent to a seemingly unrelated page.

Next, the rotation does not stop on clicking the controls.

When a user clicks on the controls, they are indicating that they understand how the carousel works and that they are interested in a particular slide.

When the carousel disregards this and keeps rotating, it can be very frustrating for the user.

The rotation must be permanently stopped until the next full page reload.

There are no next and previous buttons to navigate through the carousel.

The controls of the carousel need to be overly clear. Most users are not tech-savvy and would miss what seems obvious to us business owners or web developers.

Having just the dots is not as nearly helpful as dedicated next and previous buttons.

It's made worse by the usage of this scroll-down down arrow which can be easily mistaken for a carousel control.

A better alternative is using a Table of Contents style carousel.

I know, right? So much better.

This performs well because users not only get to know the total number of slides but also what they are about.

But the best way forward would be to drop the carousel altogether and just display the slides as a grid.

All slides get noticed and this is also a great way to showcase your top product categories.

The 2 Hounds Design store is the perfect candidate for having a product discovery wizard since pet parents have a clear requirement in mind (breed, weight, size etc.)

It is also important that the wizards are placed right on the homepage since most users decide on their product finding strategy when they land on the homepage.

Enter you dog's details and get a personalised collection.

Thanks for reading!

Wanna know when we launch new ones?

/ 87

You can use keyboard key.

/ 87

Want your favorite ecommerce store torn down? Let us know in the comments section below. If you found this teardown interesting, please share it with your development partner, web store owner friends and followers using these handy buttons.