site/pages/our-work/case-study/fortnum-and-mason/index.js
// @flow
import React from 'react';
import classnames from 'classnames/bind';
import Social from '../../../../components/social';
import styles from './style.css';
import metaImage from './meta-image.jpg';
import headerImageLarge from './images/header-large.jpg';
import headerImageMedium from './images/header-medium.jpg';
import headerImageSmall from './images/header-small.jpg';
import devicesImage from './images/devices.png';
import tabletRestaurantImage from './images/tablet-restaurant.png';
import tabletCheckoutImage from './images/tablet-checkout.png';
import WhatToReadNext from '../shared/what-to-read-next';
import Video from '../shared/video';
import ChecklistContactUs from '../../../../slices/checklist-contact-us-slice';
import Card from '../../../../components/card';
import ListBox from '../../../../components/list-box';
import Quote from '../../../../components/quote';
import ContactBox from '../../../../components/contact-box';
import Picture from '../../../../components/picture';
import ScrollTracker from '../../../../components/scroll-tracker';
declare var YT: Object;
const cx = classnames.bind(styles);
const social = {
title: 'Fortnum & Mason’s website increases revenue and conversion rates | Red Badger',
description: 'Multiple award winning site increases conversion, sales and mobile visits.',
metaImage,
altText: 'Fortnum & Mason website on desktop, tablet and mobile devices',
url: 'https://red-badger.com/our-work/case-study/fortnum-and-mason',
};
const CaseStudyFortnumAndMason = () => {
return (
<ScrollTracker>
<div className={styles.caseStudy}>
<Social {...social} />
<div className={styles.header}>
<Picture
className={styles.header__image}
largeSrc={headerImageLarge}
mediumSrc={headerImageMedium}
smallSrc={headerImageSmall}
alt="Fortnum and Mason logo embellished by gold scrolls"
/>
</div>
<div className={styles.content}>
<div className={styles.content__wrapper}>
<div className={styles.content__mainTitleWrapper}>
<h1 className={styles.content__mainTitle}>
Fortnum & Mason’s new, elegant website increases revenue and conversion rates
</h1>
</div>
<h2 className={styles.content__title}>
<span className={styles.content__redTitle}>Let's make things better.</span>
Scaling the site, decreasing drop-outs and bringing the in-store experience, online
</h2>
<p className={styles.content__paragraph}>
When you think of Fortnum & Mason, the iconic eau de nil colour, the beautiful store
layout, amazing customer service and the incredibly high quality of products, springs
to mind. This unrivalled reputation, held over 300 years, has always been led by the
store experience. But with more and more shoppers heading online to make purchases
from over 130 different countries, Fortnum’s realised their digital experience didn’t
match the service delivered by the physical stores, and something needed to change,
quickly.
</p>
<div className={styles.content__float}>
<img
src={tabletRestaurantImage}
className={styles.tabletImage}
alt="A tablet showing Fortnum & Mason tea website"
/>
</div>
<p className={styles.content__paragraph}>
The old site had an inconsistent design, was inflexible, difficult to update and the
underlying technology was nearing the end of its life. The out-dated technology meant
that high levels of customers were dropping out at certain stages in the buying
process. For example, the presentation of delivery options was confusing and if one
element of a customer’s order was unavailable, it could result in the entire order not
going out for delivery.
</p>
<p className={styles.content__paragraph}>
In addition, this site needed to solve the above problems as well as handle complex
orders and delivery to more than 130 countries. A scalable, highly flexible new site
was needed, and very quickly to avoid more lost revenue.
</p>
<img
src={devicesImage}
className={styles.devicesImage}
alt="Fortnum & Mason website on desktop, tablet and mobile devices"
/>
<h2 className={styles.content__title}>
<span className={styles.content__redTitle}>
{'Do the right thing. Do the thing right.'}
</span>
Embracing organisational change and implementing cutting-edge technology
</h2>
<p className={styles.content__paragraph}>
We began with a two-day hackathon to produce a minimum viable product (MVP) to
demonstrate our thinking for the new website; a ‘show not tell’ approach.
</p>
<ContactBox />
<p className={styles.content__paragraph}>
Working in a collaborative, Lean way with Fortnum & Mason, our talented design team
and knowledgeable tech team, incorporated a progressive selection of open source
technology including Spree Commerce, Wombat and Facebook’s React.
</p>
<p className={styles.content__paragraph}>
We also designed, implemented and managed the Cloud-based architecture upon which the
new platform runs. This design allows for a continuous delivery model, meaning that
tiny incremental changes are constantly tested and released to production multiple
times a day (instead of a few times a year), helping to bid farewell to the age of big
bang releases.
</p>
<div className={styles.content__float}>
<Quote
text="Since the site went live it has had incredible results in increased revenues and conversion rates."
author={{
name: 'Zia Zareem-Slade',
title: 'Customer Experience Director, Fortnum & Mason',
}}
/>
</div>
<p className={styles.content__paragraph}>
The process and technology had the customer at the heart of the project but the key to
the success was engaging Fortnum’s customers to help drive the direction of the design
and development of the site by allowing them to provide feedback directly to the team.
Throughout the project, our design team ran guerrilla testing in the flagship store in
Piccadilly to get customer feedback on the look and feel of the site. The in-store
historian was also brought into the project to ensure the new design was as aligned to
the brand’s heritage as possible.
</p>
<p className={styles.content__paragraph}>
Once launched, the beta site ran in parallel to the old site to avoid disruption and a
number of Fortnum’s customers were gradually switched over to the new site over a
two-month period. New site visitors were able to provide feedback to enable further
customer-centric amends and builds.
</p>
<p className={styles.content__paragraph}>
These changes meant that when the full go-live launch took place the site already had
features and processes in place that made sense to the user, not just the business.
This approach also meant that overall the project has achieved a complete re-platform
and design from concept through to delivery, in just eight months and for under £1.3
milllion.
</p>
<h2 className={styles.content__title}>
<span className={styles.content__redTitle}>Creating lasting change.</span>
Increasing conversion, sales and mobile visits and winning multiple awards
</h2>
<div
className={cx(
styles.content__float,
styles['content__float--left'],
styles['content__float--content-hack'],
)}
>
<img
src={tabletCheckoutImage}
className={styles.tabletImage}
alt="A tablet showing Fortnum & Mason delivery site"
/>
</div>
<p className={styles.content__paragraph}>
The new Badger-created site was one of the only fully responsive retail sites that was
live at the time, which ensures that the customer experience is equally superlative no
matter what device is used. The site is also built to be scalable and flexible enough
to support the company’s future ambitions and peaks of online traffic, such as
Christmas.
</p>
<p className={styles.content__paragraph}>
As well as being beautiful to look at with a consistent design and the famous eau de
nil colour prominent throughout, the new site is fast, slick and easy to navigate -
and truly responsive, delivering optimal layouts across every view port.
</p>
<p className={styles.content__paragraph}>
The site reinforces the brand experience that Fortnum & Mason customers expect and
since it went fully live it has delivered incredible sales uplift (38% over the
Christmas 2015 period) and dramatically increased conversion.
</p>
<p className={styles.content__paragraph}>
The results in the first few weeks were striking:
</p>
<Card className={styles.listBoxContainer}>
<ListBox
className={styles.listBox}
items={[
{
label: 'Improved conversion in the first week of release ',
value: '+14%',
},
{
label: ' Increase in average order value in the first week of release',
value: '+5%',
},
{
label: 'Total sales achieving growth year on year',
value: '+52%',
},
{
label: 'Increase in mobile visits up year on year',
value: '+77%',
},
]}
itemClassName={styles.listBox__item}
/>
</Card>
<p className={styles.content__paragraph}>
The drop-out rate at the delivery options stage was previously 18.8% and has now been
reduced to 12.9% (based figures from 17–25th February 2014 vs 2015.)
</p>
<p className={styles.content__paragraph}>Other key stats year on year*:</p>
<Card className={styles.listBoxContainer}>
<ListBox
className={styles.listBox}
items={[
{
label: 'Mobile Conversion rate ',
value: '+57%',
},
{
label: 'Tablet visits',
value: '+30%',
},
{
label: 'Tablet Conversion',
value: '+28%',
},
{
label: 'New customers conversion',
value: '+15%',
},
{
label: 'Reduction in calls to the Customer Service team',
value: '-18%',
},
]}
itemClassName={styles.listBox__item}
/>
</Card>
<p className={styles.content__paragraph}>
* Statistics are based on launch week to 8th March and same date range last year.
</p>
<p className={styles.content__paragraph}>
With the site now being much easier to navigate there has been an increase in sales of
specific items, for example a 78% increase in grocery sales.
</p>
<p className={styles.content__paragraph}>
Further to this, fortnumandmason.com won a BIMA Award for ‘Best Web Design & Build’
and an eCommerce Award for ‘Best eCommerce New Design or Re-Design (Under 1 Year)’ in
2015. The project was also nominated for the UK Digital Experience Awards in the
Retail sector award and as ‘Best Use of Website to Build Your Brand’. It was also
nominated at the Retail Week Tech and Ecommerce Awards in the ‘Best Customer
Experience’ category.
</p>
<Video
name="F&M video"
elementId="fm-case-study-video"
videoId="eBE3J9XZO20"
containerCss={styles.videoContainer}
/>
</div>
</div>
<WhatToReadNext currentPage="fortnumAndMason" linkKeys={['fMTeaCaseStudy']} />
<ChecklistContactUs />
</div>
</ScrollTracker>
);
};
export default CaseStudyFortnumAndMason;