Luxury Website Design: The Royal Treatment for All at Fortnum & Mason
In this series, we uncover luxury web design tips and review the websites of the most renowned retail brands, assessing the impact of their strategy and style choices. Bespoke products at high prices need to be presented via top-quality online experiences and eCommerce platforms. The website of any luxury brand not only needs to convey the brand itself but also provide excellent customer service and information.
We began by exploring Gucci’s site to uncover luxury web design tips. Since then, we have reviewed the websites of Selfridges, Givenchy, Burberry and more. This week, we discover what the website of the prestigious department store, Fortnum & Mason, has to offer.
At KIJO, we work with high-end brands across London and the UK to produce visually stunning websites that engage, inform and inspire elite audiences to become loyal customers. We are a team of design and development experts committed to realising your brand’s online potential. To discuss what would work best for your business, get in touch.
Three Centuries of Exquisite Lifestyle Goods at Fortnum & Mason
In 1707, one of Queen Anne’s footmen, William Fortnum, had the enterprising idea to sell her leftover candle wax from a Piccadilly storefront. The products quickly gained popularity. Mr Fortnum seized the opportunity, partnered with his landlord, Hugh Mason, and Fortnum & Mason was born.
Three-hundred years later, Fortnum & Mason is one of the most luxurious purveyors of extraordinary food and experiences in the world. Their hampers, which were originally created to provide portable sustenance to travellers leaving London, are now internationally renowned. Long at the forefront of gastronomical invention and keen to develop an easily transportable snack, Mr Fortnum and his staff invented the Scotch egg. The store was also the first to supply Heinz baked beans to the British public. Their most recent accolade is the invention of Ruby Chocolate.
Far beyond being just a department store, Fortnum & Mason sells a lifestyle. Today, they have six stores throughout the world. They produce honey from their beehives on the London store roofs and have multiple in-store restaurants and wine-bars. They deliver seasonal and afternoon tea hampers to all corners of the globe.
Their website was redeveloped in August 2020. We take a detailed look to find some of the best luxury web design tips.
Fusing Old and New Shopping Methods: Special Features Rating 5/5
Online Christmas Brochure and Accompanying Website Features
Designing out-of-store experiences that replicate in-store browsing is a never-ending challenge for the retail sector. Fortnum & Mason’s Christmas brochure provides a little in-store magic that every customer can take home with them. This year’s brochure is packed full of cooking tips, detailed features on product creation and of course, the items themselves. Except, this year, the Fortnum & Mason creative team has gone one step beyond the paper edition and made their Christmas Brochure a digital experience. This is easy to do using Issuu.com, creating simple content with a big impact.
Sometimes there’s nothing better than flicking through a Christmas brochure in front of the fire. But, even the staunchest traditionalist may well prefer Fortnum & Mason’s digital counterpart. Its seamless integration with the website takes all of the hassles out of Christmas shopping. Dozens of links are embedded within the brochure file. A single click takes you straight to the product page where you can purchase an item in seconds. Even detailed feature pages are linked to the accompanying website page and products. It’s a brilliant way for customers to uncover website content that they otherwise may have missed. Customers can easily complete purchases that with a traditional paper brochure would have taken far longer.
Thoughtful Product Breakdown: User Experience Rating 4.5/5
The first two features on Fortnum & Mason’s website homepage are seasonal items and their world-famous hampers. The seasonal pages break down further into useful and manageable sections. On the Christmas page, this includes: ‘Deck the Halls’ for all your decoration needs, ‘Season’s Feastings’ for edible treats and festive tipples, and ‘Glorious Gifts’ to find the perfect present. Fortnum & Mason sell a huge range of products. Dividing their products down into logical categories that are easy to navigate is hugely important to the customer journey.
The click and drag content carousels that appear throughout the site are intuitive but can be difficult to use. It is easy for the user to swipe through and find what they need, but, without an arrow to click it’s not immediately clear how they function. Given Fortnum & Mason’s more mature customer base, this could be a problem. Each image is accompanied by a short description that is witty, friendly and full of character. The thought and care that has gone into detailing every item sets Fortnum & Mason apart from high-street vendors with brief descriptions.
The product pages are full of more beautiful images and accompanying copy. The ‘Perfect Pairing’ feature showcases another product that would partner perfectly. It’s a great way to incorporate link sales into online shopping and is once again evidence that Fortnum & Mason sell a lifestyle, rather than a collection of products.
Striking Photography: Visual Design Rating 4.5/5
The Fortnum and Mason website’s visual design is refreshingly different compared to the other sites we have analysed. It has a white background, with black text and teal accents throughout. Frequent use of italicised font creates a more traditional, opulent look that is a nod to the brand’s 300-year history. The result is clean and homely, a stark comparison to dark, dramatic designs of couture fashion websites we have looked at.
On the homepage, several large carousels display the various hampers for sale, product lines and in-store features. Whilst the large font size and eloquent descriptions are clear and bold, text uniform in length and a smaller font would create a more polished look.
In between the different carousels are larger images showcasing luxury experiences both instore and online. The photography across the site is bursting with colour and adds visual interest to every page. Using photography to change the colour palette of a page is a great way to easily update your website’s look through content, rather than revamping the whole page each time.
The navigation panes make excellent use of white space. Items are spread out so that nothing appears overcrowded. Each pane also includes an image with a ‘Shop Now’ call to action button that links to the latest product pages.
Photographs of each product have been carefully constructed. There are plentiful images of hampers throughout, a consistent reminder of the brand’s most well-known and best-loved product. Individual products have also received the same attention. Rather than plain images of products on a white background, they are displayed amongst a china tea set or within a Christmas table setting. This effect is far more striking, and the extravagant settings pictured invoke luxury and opulence.
A Visual Treat and On-the-go Shopping Aid: Mobile Optimisation Rating 5/5
Images are essential to depict the grandeur and quality of Fortnum & Mason’s product and every photograph has been formatted to perfectly fit a smaller screen. The large text is a little much on the desktop view but makes for a pleasant reading experience on a hand-held device.
Pictures are also included in the mobile-view navigation menus, an impressive feat expertly executed. It creates a far more interesting user experience and retains the detail seen on the desktop view without compromising space or functionality.
No detail is spared, instead, it is simply expertly reconfigured to fit a smaller screen. The customer journey is made even easier via mobile as links to call and book services and get store directions makes shopping on the move a breeze.
The Perfect In-store Advocate: Retail Integration Rating 4.5/5
There are many calls to action to try out in-store services on the homepage. The Birthday Afternoon tea and restaurants feature prominently, giving gravitas to in-person experiences offered. Throughout the website, the stores are frequently highlighted, but the information provided goes far beyond basic opening hours. Each of their six stores has a dedicated website page with details of unique in-store features and even floor maps. With quick links to book, get directions and view health and safety protocols, each restaurant, experience and store page makes the customer experience smoother.
The level of detail provided through engaging descriptions, incredible photography and links to menus sell every experience. The images of the restaurant and stores are immersive and transport you to each location. By the time you’ve finished reading a page, you want to be there experiencing it for yourself.
Experience the Fortnum & Mason Lifestyle
Perusing Fortnum & Mason’s website is an experience in itself and is packed with luxury web design tips. The designers consistently link individual items to perfect partner products, seasonal events and family occasions. In this way, the brand becomes each customer’s trusted companion for producing an exquisite event with no detail or expense spared. The friendly register and light-hearted descriptions peppered throughout the site create a consistent brand voice that is approachable and informative. The visual impact of the clear layout, stunning photography and online brochure, is a feast for the eyes.
If you want your site to evoke a feeling of indulgence, sell an experience or elevate each product, then Fortnum & Mason’s website provides a wealth of luxury web design tips and ideas.
Posted on by Chelsea Davies