Fortnum & Mason
Updating the luxury British store, whilst creating custom product pages and a multi-address checkout.
Role
UX/UI
YEAR
2020
Fortnum & Mason
Updating the luxury British store, whilst creating custom product pages and a multi-address checkout.
Role
UX/UI
YEAR
2020
Context
Famous around the world for luxury hampers, Tea, gifts and exceptional service.
Fortnum & Mason have been around since 1707 and have a rich history with inventing the first scotch egg, introducing the mighty baked bean to Britain for the first time.
Context
Famous around the world for luxury hampers, Tea, gifts and exceptional service.
Fortnum & Mason have been around since 1707 and have a rich history with inventing the first scotch egg, introducing the mighty baked bean to Britain for the first time.
Context
Famous around the world for luxury hampers, Tea, gifts and exceptional service.
Fortnum & Mason have been around since 1707 and have a rich history with inventing the first scotch egg, introducing the mighty baked bean to Britain for the first time.
The Challenge
To redesign the website by refining the ‘brilliant basics’ of e-commerce.
Fortnum & Mason had gone through a rebranding and their website was not reflecting their high end status and attention to detail compared to their in-store service.
Main goals:
• Provide better information for visitors to their flagship stores.
• Align their new branding to the new e-commerce platform.
• Provide a frictionless shopping experience online specifically in the areas of Hampers & Tea.
• Offer new solutions for multi-address checkout.
• Design module components to allow for ease of flexibility, updating and creating pages for stores, events and news.
The Challenge
To redesign the website by refining the ‘brilliant basics’ of e-commerce.
Fortnum & Mason had gone through a rebranding and their website was not reflecting their high end status and attention to detail compared to their in-store service.
Main goals:
• Provide better information for visitors to their flagship stores.
• Align their new branding to the new e-commerce platform.
• Provide a frictionless shopping experience online specifically in the areas of Hampers & Tea.
• Offer new solutions for multi-address checkout.
• Design module components to allow for ease of flexibility, updating and creating pages for stores, events and news.
The Challenge
To redesign the website by refining the ‘brilliant basics’ of e-commerce.
Fortnum & Mason had gone through a rebranding and their website was not reflecting their high end status and attention to detail compared to their in-store service.
Main goals:
• Provide better information for visitors to their flagship stores.
• Align their new branding to the new e-commerce platform.
• Provide a frictionless shopping experience online specifically in the areas of Hampers & Tea.
• Offer new solutions for multi-address checkout.
• Design module components to allow for ease of flexibility, updating and creating pages for stores, events and news.
My Role
Collaborate within the team of 3 designers and external agency.
I worked on a range of pages for the online store such as the product detail pages, Product List Pages, Events, Stores, Account Pages, Checkout & menu.
My Tasks:
• Specifically look at the journey for buying hampers and Tea and improve the experience.
• Collaborate In-house and with the external rebranding agency to align designs for digital.
• Ideate and usability test on solutions for multi checkout and split shipment within the checkout stage.
Services
UX/UI
Prototyping
Wireframing
Design Systems
Team
3 UX/UI Designer
1 Creative Lead
1 Project Managers
My Role
Collaborate within the team of 3 designers and external agency.
I worked on a range of pages for the online store such as the product detail pages, Product List Pages, Events, Stores, Account Pages, Checkout & menu.
My Tasks:
• Specifically look at the journey for buying hampers and Tea and improve the experience.
• Collaborate In-house and with the external rebranding agency to align designs for digital.
• Ideate and usability test on solutions for multi checkout and split shipment within the checkout stage.
Services
UX/UI
Prototyping
Wireframing
Design Systems
Team
3 UX/UI Designer
1 Creative Lead
1 Project Managers
My Role
Collaborate within the team of 3 designers and external agency.
I worked on a range of pages for the online store such as the product detail pages, Product List Pages, Events, Stores, Account Pages, Checkout & menu.
My Tasks:
• Specifically look at the journey for buying hampers and Tea and improve the experience.
• Collaborate In-house and with the external rebranding agency to align designs for digital.
• Ideate and usability test on solutions for multi checkout and split shipment within the checkout stage.
Services
UX/UI
Prototyping
Wireframing
Design Systems
Team
3 UX/UI Designer
1 Creative Lead
1 Project Managers
Tea Product Page
Customers can now explore a tea format of their choice with additional helpful advice on perfect pairings and how to brew.
Large imagery was used on all product pages and utilised the full width on mobile to showcase the beautifully designed Fortnum & Mason packaging.
I designed an experience so users could easily discover the loose leaf and tea bag range by easily switching where they can now compare price & information without leaving the page.
Customers can now view tasting notes and how to make the perfect brew. They also now have the option for a perfect pairing with their Tea of choice whether that be a loose leaf strainer to help with the making of their Tea or F&M's famous biscuits to enjoy along with their purchase.
Creating this additional information & advice aligns with the exceptional service of the in-store experience where the customer is happy & confident with their final purchase.
Tea Product Page
Customers can now explore a tea format of their choice with additional helpful advice on perfect pairings and how to brew.
Large imagery was used on all product pages and utilised the full width on mobile to showcase the beautifully designed Fortnum & Mason packaging.
I designed an experience so users could easily discover the loose leaf and tea bag range by easily switching where they can now compare price & information without leaving the page.
Customers can now view tasting notes and how to make the perfect brew. They also now have the option for a perfect pairing with their Tea of choice whether that be a loose leaf strainer to help with the making of their Tea or F&M's famous biscuits to enjoy along with their purchase.
Creating this additional information & advice aligns with the exceptional service of the in-store experience where the customer is happy & confident with their final purchase.
Tea Product Page
Customers can now explore a tea format of their choice with additional helpful advice on perfect pairings and how to brew.
Large imagery was used on all product pages and utilised the full width on mobile to showcase the beautifully designed Fortnum & Mason packaging.
I designed an experience so users could easily discover the loose leaf and tea bag range by easily switching where they can now compare price & information without leaving the page.
Customers can now view tasting notes and how to make the perfect brew. They also now have the option for a perfect pairing with their Tea of choice whether that be a loose leaf strainer to help with the making of their Tea or F&M's famous biscuits to enjoy along with their purchase.
Creating this additional information & advice aligns with the exceptional service of the in-store experience where the customer is happy & confident with their final purchase.
Hamper Product page
Hamper products and information now easily viewable along with hamper upgrades.
Fortnum & Mason's famous Hampers were also given a different treatment where the customer has the option to view all contents in the hamper and view detailed descriptions on each item without leaving the page.
An option to be able to enjoy a little more was also designed to be close to the main CTA button and within the fold of the page to entice customers to explore additional hampers within their purchase range.
Hamper Product page
Hamper products and information now easily viewable along with hamper upgrades.
Fortnum & Mason's famous Hampers were also given a different treatment where the customer has the option to view all contents in the hamper and view detailed descriptions on each item without leaving the page.
An option to be able to enjoy a little more was also designed to be close to the main CTA button and within the fold of the page to entice customers to explore additional hampers within their purchase range.
Hamper Product page
Hamper products and information now easily viewable along with hamper upgrades.
Fortnum & Mason's famous Hampers were also given a different treatment where the customer has the option to view all contents in the hamper and view detailed descriptions on each item without leaving the page.
An option to be able to enjoy a little more was also designed to be close to the main CTA button and within the fold of the page to entice customers to explore additional hampers within their purchase range.
Biscuits Product page
Creating a perfect pairing for tea and biscuits allows for a seamless purchasing experience.
The perfect pairing was designed to be able to add both items easily straight to your bag accompanied with a short description as to why they're a match made in heaven.
Biscuits Product page
Creating a perfect pairing for tea and biscuits allows for a seamless purchasing experience.
The perfect pairing was designed to be able to add both items easily straight to your bag accompanied with a short description as to why they're a match made in heaven.
Biscuits Product page
Creating a perfect pairing for tea and biscuits allows for a seamless purchasing experience.
The perfect pairing was designed to be able to add both items easily straight to your bag accompanied with a short description as to why they're a match made in heaven.
Personalisation
Customers can instantly view their personalised item as they type.
I worked on prototyping personalised products, such as custom labels for champagne bottles for customers to be able to add a personalised message to offer as a gift.
When the customer starts typing, their message automatically appears on the label in the product image. It was important that the fields of input for the message was in close proximity to the product image so the customer gets instant feedback on how it would look.
With this in mind I focused on a mobile-first approach to designing this functionality as there was limited screen space to work with and I had to make sure the customer can view their updates whilst typing.
Personalisation
Customers can instantly view their personalised item as they type.
I worked on prototyping personalised products, such as custom labels for champagne bottles for customers to be able to add a personalised message to offer as a gift.
When the customer starts typing, their message automatically appears on the label in the product image. It was important that the fields of input for the message was in close proximity to the product image so the customer gets instant feedback on how it would look.
With this in mind I focused on a mobile-first approach to designing this functionality as there was limited screen space to work with and I had to make sure the customer can view their updates whilst typing.
Personalisation
Customers can instantly view their personalised item as they type.
I worked on prototyping personalised products, such as custom labels for champagne bottles for customers to be able to add a personalised message to offer as a gift.
When the customer starts typing, their message automatically appears on the label in the product image. It was important that the fields of input for the message was in close proximity to the product image so the customer gets instant feedback on how it would look.
With this in mind I focused on a mobile-first approach to designing this functionality as there was limited screen space to work with and I had to make sure the customer can view their updates whilst typing.
Results
Fortnum & Mason's digital innovations and record growth.
Customers can now shop in multiple currencies (GBP, Euro, USD, HKD, CAD) and pay using expanded options like Google Pay.
Features such as seamless order management, wish lists, and multi-address checkouts make gifting and reordering more convenient.
These innovations have fuelled a 300% year-on-year online sales increase*, with e-commerce now contributing 45% of total revenue*.
>
300%
Last 10 days YOY*
>
45%
Online is now Over 45% of total business revenue*
£1m
Topped first 1m in September*
*Results were in the month of October 2020
Results
Fortnum & Mason's digital innovations and record growth.
Customers can now shop in multiple currencies (GBP, Euro, USD, HKD, CAD) and pay using expanded options like Google Pay.
Features such as seamless order management, wish lists, and multi-address checkouts make gifting and reordering more convenient.
These innovations have fuelled a 300% year-on-year online sales increase*, with e-commerce now contributing 45% of total revenue*.
>
300%
Last 10 days YOY*
>
45%
Online is now Over 45% of total business revenue*
£1m
Topped first 1m in September*
*Results were in the month of October 2020
Results
Fortnum & Mason's digital innovations and record growth.
Customers can now shop in multiple currencies (GBP, Euro, USD, HKD, CAD) and pay using expanded options like Google Pay.
Features such as seamless order management, wish lists, and multi-address checkouts make gifting and reordering more convenient.
These innovations have fuelled a 300% year-on-year online sales increase*, with e-commerce now contributing 45% of total revenue*.
>
300%
Last 10 days YOY*
>
45%
Online is now Over 45% of total business revenue*
£1m
Topped first 1m in September*
*Results were in the month of October 2020
