Fortnum & Mason

The F&M hamper, the instantly recognisable, iconic symbol, stands for heritage often embodied by eccentric English personality. Filled with delicious treats from their famous food halls, it is treasured all over the world.

FM-Hamper-Homepage-Mobile-1440-810@x2

Role:
Digital design
Winning pitch design

Credits:
VCCP Bernadette
F&M Online Retail Team

Introduction

Since its inception in 1707, the illustrious house of Fortnum & Mason on Piccadilly, London, has been a beacon of craftsmanship, authenticity, and originality. Throughout its remarkable 300-year history, Fortnum & Mason has assumed the distinguished role of being the custodian of the hamper tradition. Seamlessly blending the elements of urban and rural life, as well as the finest offerings in food and drink, this iconic institution takes immense pride in its legacy of fashioning "perfect parcels of joy.”

Objective

To create a new Help Me Choose hamper selection tool to help customers find the perfect hamper gift. To mirror the ease of the user journey of wandering through the store's aisles, explore and be inspired. To showcase extravagant wicker baskets and improve the hamper landing page, making it more engaging and personable. To create an effortless experience that resonates with existing and new audiences. All with the incentive to drive hamper sales within a refined luxurious experience.

02-FM-720-405@x2
FM-Hamper-Hompage-Occasions-Desktop-1440-810-2@x2
01-FM-1440-810@x2
01-Fortnum-Mason-Hampers-V2-Desktop@x1

The challenge

One of the most challenging aspects of the project was to refresh the online experience while remaining true to the brand heritage and to convey the hallmarks of a premium brand. The brief was to ‘evolve and lead the way to modernise the British brand and make it appealing to customers across the globe’.

04-FM-960-540@x2
FM-Home-Categories-Desktop-1440-810@x2
03-FM-540-960@x2
FM-Hamper-Homepage-Social-Desktop-1440-810@x2

The solution

The hampers’ landing page was designed to categorise entry points into hamper products by occasions, specialities, or themes, housed in different modules providing visual intrigue and discoverability. To add further depth to the hamper landing page, hamper stories were introduced to aid hamper immersion and emotive storytelling. By combining aesthetics, functionality, and personalisation, we elevated the digital journey and provided added value to the client.

FM-Hamper-Gift-Finder-Card-Tablet-1440-810-2@x2
01-Hamper-Gift-Finder-V2-Occasion-Desktop@x1
05-FM-540-540@x2
FM-HGF-Budget-Diet-1440-810@x2

Numbers & metrics

26%

Hamper sale increase post website redesign

120k

Hampers shipped (annual)

300+

Year old company

£175.5m

Company's turnover (annual)

04-Hamper-Gift-Finder-V2-Likes-Desktop@x1
07-FM-540-605@x2
06-FM-540-810@x2

Simplifying

A minimal approach was taken to streamline the Help Me Choose hamper selection tool, providing a simple set of step-by-step walkthrough questions and interactions, guiding visitors and resulting in a curated list of recommended hampers for the customer. The audience can choose to apply filters such as occasion, budget, and preferences.

05-Hamper-Gift-Finder-V2-Budget-Desktop@x1
FM-HGF-Loading-Tablet-1440-810@x2
08-FM-960-540@x2-1
FM-HGF-Results-Tablet-1440-810@x2
09-FM-540-810@x2
07-Hamper-Gift-Finder-Results-V2-Desktop@x1-4
011-FM-540-540@x2
010-FM-960-540@x2

Design principles

Each module was designed with scalability in mind. UI elements, colour palette, and typography echo the elegance and charm of the brand. The timeless signature Eau de Nile (water of the Nile green) brand colour was used in accordance with plenty of white space to stand out on screen and to ignite the audience. Intentional clean lines and generous spacing orchestrating the rhythm of the design are applied and allow the product photography to resonate the brand's excellence and create an authentic experience.

FM-Hamper-Homepage-HGF-Mobile-1440-810@x2
FM-HGF-Likes-Mobile-1440-810-2@x2
FM-HGF-Budget-Mobile-1440-810-1@x2
FM-390-844-Mobile-01@x2
FM-390-844-Mobile-02@x2
FM-390-844-Mobile-03@x2
FM-390-844-Mobile-04@x2
FM-390-844-Mobile-013@x2
FM-390-844-Mobile-06@x2-1
FM-390-844-Mobile-09@x2
FM-390-844-Mobile-012@x2
FM-390-844-Mobile-07@x2
FM-390-844-Mobile-08@x2

Next

AvivaPlus-TV-Advert-6