Reviewing B&Q’s Latest £60m Responsive Website

|

What can you buy with £60m these days?

That’s the amount of cash that Real Madrid paid for James Rodriguez, the face value that Michael Gove wanted to spend on a new yacht for the Queen, and the exact sum that B&Q has seemingly invested in its new website. It’s clear that the home and garden retail company didn’t want to lose its position by its rival, Selfridges, which recently invested £40m to revamp its website.

Later on, B&Q’s director Michael Durbridge said that the new site would be launched with an upgrade to the company’s newest back-end systems. This would allow the website and in-store ordering systems to run off the same database, with the user interface customised for each channel. B&Q would then have taken a huge step towards forming a single customer view.

So, just how good is this new £60m responsive site? Here is the review:

1. Homepage

The new version does not differ in such a dramatic way compared to the old version, still B&Q has made a few alterations to the colour scheme, which has made the search tool more significant.

Old Homepage

bnq-old-homepage

Both versions of the site make use of a carousel, which may solve internal arguments about whose products deserve price of place, yet many experts state that it doesn’t add much to the UX.

New Homepage

bnq-new-homepage

The biggest change has probably been in the design of B&Q’s mega menus:

Old mega menu

bnq-old-megamenuThe new navigation (see below) focuses on types of rooms and products rather than departments. This probably makes more sense in terms of the user journey. The list of rooms is present within each of the four dropdown menus, but the rest of the navigation options differ in each one.

New mega menu

bnq-new-megamenu

On mobile the site is less appealing. It retains the carousel and the range of product images beneath, which means you get a big, unexplained image of two Crown Paint containers:

bnq-mobile-view

The huge range of products means navigation was never going to be a simple task on mobile, but commendably the menus are still relatively easy to navigate within the hamburger menu.

2. Search Tool

A decent site search tool is very important for the user experience. B&Q’s site search is prominently positioned, but there are a few bugs that need to be ironed out.

Firstly, the predictive search feature is a bit slow. During a site test, the suggested search terms and products only appeared a second or two after tester stopped typing.

Another issue is with its accuracy. When trying to search for “smoke alarm”, these are the less-than-useful results:

bnq-search-tool

That example aside, the search tool generally works quite well and the fact that the suggested results include specific products as well as search terms adds more positive points.

3. Search Results Page

The search results pages are neatly placed so it’s very easy to browse through the different options. Each product listing includes a star rating and availability details, while users can also compare up to four items side-by-side.

 bnq-search-result-page

Looking at the product filters, I like that ‘availability’ (home delivery or in-store) is included in the broad range of options.

B&Q also returns articles in its search results, so in this example shoppers can learn more about which type of kitchen tap they need, and how to fit a new sink.

bnq-search-result-page-2

4. Hub Pages

A big thumb up goes to B&Q’s hub pages, which used a tiled layout to present links to different products and departments. For example, if you choose to shop ‘Bedrooms’ you are directed to this page which features yet another carousel as well as a range of subcategories for different bedroom products.

bnq-hub-pages

Though it is assumed that few people would navigate to these hub pages, they are useful from an SEO perspective.

5. Product Pages

For a £60m website, the product pages will become the main highlight. However, that doesn’t seem to be the case. For this kitchen tap there is only one single photo, albeit a very nice photo.

The product page really doesn’t give shoppers a decent view of the product they’re about to buy. It would be useful to see an image of the tap in a kitchen so you can get a better idea of the scale.

bnq-product-pages

On the other hand, B&Q has also gone big on content within its product pages. The ‘Help & Advice’ tab includes a video series on installing a new kitchen sink, how-to guides, a buying guide and inspiration for new design ideas.

 bnq-help-and-advice-tool

Click & Collect has been given centre stage on the new site with its own CTA alongside one for ‘home delivery’. If you choose to use click & collect the first stage is to select your local store before heading to the checkout. It’s worth noting the attempt to upsell related items before users get to the shopping basket.

bnq-related-products

When using a mobile the product pages look okay, but larger CTAs are better. Sadly, some problems happens when we try to get the videos to work properly.

 bnq-video-sections-mobile

6. Shopping Basket and Checkout

The shopping basket ticks all the best practice boxes with a detailed product summary, security reassurances, and upfront delivery costs (it’s free). Unfortunately, it hits the skids by failing to offer a guest checkout. Forcing people to register an account is a common cause of basket abandonment, yet B&Q has decided to hit customers with it on the first page of the checkout. The reason for this is likely to be that B&Q wants to have a unique identifier for customers across online and offline channels.

Durbridge previously stated that the company was trialling Wi-Fi in-store that used the same login as the website.

 bnq-registration-page

Once the login is out of the way the checkout is quick and simple, and again ticks many boxes for best practice.

It uses a progress bar, persistent order summary, postcode lookup tool, and the checkout is enclosed. Also, text fields are kept to a minimum and surrounded by plenty of white space.

 bnq-payment-page

Again, the checkout looks good on a mobile screen and the checkout makes use of a numerical keypad where relevant.

bnq-checkout-page-mobile

Conclusion

B&Q’s new site is an integral part of its wider multichannel strategy. It’s for this reason that in-store functionality (e.g. click & collect, stock checker) is given such edge among others, which also explains why customers are forced to register an account.

Overall, the site is a decent first stab at building a new responsive site and presumably B&Q will roll out upgrades over time.

Whether or not it justifies the £60m, we can’t say more. The sum might be a part of PR spin, and partly down to the cost of integrating the site in-store and adding B&Q’s massive product range to a new database.