Designed and developed by Red Badger, the team rather grandly pronounces the site as “one of the few truly responsive ecommerce sites currently live.” 

Again, a lofty claim, but there is some innovative technology at the heart of the redesign…

Technology

Facebook’s React is an open source Javascript library intended to help developers build large, fast and fluid applications that theoretically should result in an optimum experience across all devices. This is what’s being used for Fortnum & Mason’s new site.

Other benefits of using this ‘isomorphic’ Javascript include the ability to build single-page applications so that old smartphones that don’t support Javascript will still be served the same experience. 

It’s also faster than other solutions. When viewing responsive websites built in React on a mobile, it’s as close to a native app experience in terms of speed as possible.

ROI

Proving the worth of mobile optimisation beyond Google’s recent algorithm update, Fortnum & Mason has revealed some impressive numbers since the launch.

In the three weeks since launch, mobile visits to the site were up 77%, overall conversion has been up 15%, while the mobile conversion rate was up 57%. There has also been a reduction in calls to the customer service team by 18%.

Redesign

As you can see from these before and after screenshots, the aesthetic differences are fairly minor but certainly an improvement.

Before:

After:

In particular the top navigation is a lot less cluttered and fiddly to operate. The text is much clearer and the homepage is no longer dominated by a massive carousel.

Search is also dynamic and provides automatic suggestions as you top as well as a highly persuasive use of thumbnails.

Of course the major change is how the site has been optimised for mobile.

Navigation

The homepage looks particularly attractive here, and the navigation is clearly placed within easily accessible search and menu options.

The store number is directly accessible from the menu, and it’s click-to-call to make things easier.

Search is equally as dynamic and responsive as the desktop version, but without the thumbnail images., which is fair enough as they would be ridiculously small here.

Product pages

Search results provide large images with options to refine and sort.

The product page itself has a massive image, with clear pricing…

CTAs are subtle but obvious, product descriptions are legible…

And a full range of delivery options are available below, with clear pricing and free click and collect.

Fortnum & Mason has entered the multichannel world with its click and collect service. 

Unfortunately this doesn’t seem to extend to returns, which from what I can gather from its lengthy returns page, items can’t be returned to the store if they were bought online.

Checkout

When it comes to the checkout, the design is distraction free, save for the important message that this can’t be shipped to certain territories. Again the shipping price is clear.

Although I am a little surprised that there is no free shipping threshold.

I’m also disappointed about how it hides its guest checkout option. You wouldn’t know Fortnum & Mason had one if you got to this page.

However if you scroll down you will find this.

Guest checkout is a must for customer experience, particularly on mobile where speed and efficiency is top of the agenda for users.

Further into the checkout, text entry fields are large and have auto-fill enabled. 

Delivery options are also presented beautifully…

As is the calendar to nominate your chosen day of delivery.

In conclusion…

It is indeed a fluid, fast and impressive experience, particularly for mobile and certainly puts itself at the forefront of other retailers. 

However with a couple of multichannel niggles here and there it isn’t perfect, and certainly it isn’t unique in offering responsive ecommerce design.

It is proof though that if a 300 year-old luxury retailer can transform this well into the digital world, other retailers really have no excuse.