Luxury Website Design: The Ultimate Customer Journey at Harrods
Our Luxury Website Design series takes a look at the digital platforms of some of the biggest names in high-end retail. We aim to uncover how some of the most successful international luxury brands are showcasing their quality products and first-class services.
Throughout the series so far, we have uncovered surprisingly varied website styles and special features. As a luxury web design agency, we want to bring these insights to new brands trying to break into this competitive market. If you want more information on what your competitors are doing or need some inspiration, you’ve come to the right place.
KIJO is a web design agency with years of experience producing custom-built websites for premium brands based in London and the UK. If you see something that would work for your brand’s website but aren’t sure how to execute it, don’t hesitate to get in touch.
Harrods: From Humble Beginnings to Ultimate Grandeur
Harrods’ original Knightsbridge store first opened in 1849. What was a simple shop selling tea and groceries has grown to become one of the world’s most well-known luxury department stores. Both online and instore, Harrods is the go-to emporium for designer fashion labels, bespoke jewellery makers, decadent home furnishing brands and even artisanal food and wine producers.
The store itself is a focal point for any high-end shopper looking for their luxury retail fix. For decades, fashion aficionados have flocked there for the latest couture lines, iconic food hall and extraordinary window displays.
Guided Shopping Both Instore and Online: Special Features Rating 4.5/5
Ingenious Content Marketing Using Harrods Stories
Harrods’ Stories cover everything from expert styling tips to exquisite dinner party suggestions. Far more than just text, they cement Harrods’ reputation as a leading authority on how to live your most luxurious life. Updated weekly, the Stories are the perfect way for Harrods to link their website to the latest luxury trends.
We’ll analyse one of their latest stories, ‘The Best Coats of AW20’ to show you how this works in action. Firstly, Harrods can optimise the content of long-form articles to improve their search engines ranking for a specific item or trend. Users searching for coat trends are more likely to convert than casual browsers.
Once a user interested in coat trends opens the Story, the structure of the page is focused on converting them into a paying customer. Beyond the text, there are moving images and videos to keep the reader engaged and on the page for longer. Then, most importantly, there are links to purchase the exact coats described. An image of the product, accompanied by brand name and price, is integrated with the Story and embedded on the page. Readers can either link to the product page for further information or add it straight to their shopping bag.
The Harrods App: Impressive In-Store Navigation
You can use the Harrods app to shop on the go and explore their Stories, but it’s also the perfect digital companion for navigating the Knightsbridge store.
Harrods department store covers more than 1 million square feet and consists of a staggering 330 departments across 7 floors. Empowering all visitors to make the most of the in-store shopping experience is tricky. The app provides everyone with their own hand-held personal guide around the store. Shoppers can find exactly what they’re looking for in the Store Index and receive route instructions on how to get there from their current location. They can look for nearby ‘Experiences’ and even the closest toilets.
The app provides all the usual mobile eCommerce features, but the navigational tool delivers tailored luxury to every visitor. Using the app to provide a personal in-store shopping experience is a clever use of digital media for a brand whose biggest attraction is their physical department store.
Interconnected Content Keeps Users Engaged: User Experience Rating 5/5
The Harrods homepage provides visitors with a launching pad to every section of the site. There are links to products, stories, new store openings, restaurant discounts and more. The homepage provides an excellent overview of the brand, their work and what they sell. At the bottom, there is a call to action to become a Harrods reward member. A nice touch that rewards the user that has invested time on the site.
Navigating is as simple as rolling over the area you want to explore. The first section is completely dedicated to ‘Designers’, a clear way of cementing Harrods reputation as the world’s most luxurious department store. Each Designer has its own page. At the top of each Designer’s page are details of recent runways, new collections and top products. This display is frequently updated to bring the most relevant and latest on-trend news to the user.
When browsing, the filter bar automatically appears on the right-hand side, but you can choose to minimise it. As the panel minimises, the product images seamlessly enlarge. The transition between the two layouts is impressively smooth. The focus of the filters is very much on visual style rather than basic descriptions. You can filter by neckline, sleeve style, heel height, denim wash or even collar type.
The zoom feature is highly responsive to simple mouse movements, avoiding clunky clicking or a manual zoom bar. As you scroll down the product pages, further details, related stories and clothing collections appear, which keep the customer journey going. An Editor’s note accompanies every item, rather than a basic description. Surprisingly for such an elite department store, the tone of the copy is very approachable and chatty.
The amalgamation of all these small details creates a quality experience for every user. Related content is always seamlessly embedded to make sure the customer journey never ends.
Seamless Moving Elements: Visual Design Rating 5/5
Every page on the Harrods site has multiple layered elements. From the stunning wallpaper to product thumbnails, editorial images and videos, there’s always something sparking interest. Each element complements the next and works seamlessly as part of a cohesive whole.
Harrods gold and green brand colours are used consistently throughout the site, but not overbearingly so. The effect is familiar, warm and inviting. There are no stark colour contrasts on the site, even the text is a charcoal grey rather than completely black.
From the luxury websites we have analysed so far, there are two opposing design directions brands opt for. One is a cool colour palette and minimal aesthetic, with a strong emphasis on high fashion and the clinical simplicity of a black and white fashion show runway. The other is a warm colour palette, invoking luxury fabrics and golden light, with embellished, layered detailing. Both have a similar effect of appearing exclusive and expensive, but which way you go depends on your brand vision and identity.
One small limitation in the design is the image carousels. Similar to Nike’s website, you can only move the images one-by-one, by clicking the arrow. It’s a minute detail but with so many smooth transitions across Harrods’ site, this staccato movement doesn’t fit. A more advanced, responsive image reel would fit better.
A Lot to Squeeze onto a Smaller Screen: Mobile Optimisation Rating 3/5
The overlapping elements, which are so beautiful on a desktop view, don’t work as well on a mobile screen. Rather than editing the overlapping features to fit a smaller screen, they have simply been vertically stacked. This creates an unusually long homepage and requires a lot of scrolling from the user. The background images are also not configured to properly fit a smaller display; in some cases, it’s hard to make out what the images are. It would make sense to remove some of the redundant space and optimise elements to better fit a mobile screen.
Harrods have achieved this with the navigation. Smaller categories work better for a mobile view. Also, unlike the desktop view, filters remain off the page to maximise space. These are only small details, but make a huge difference to the user experience.
Effortlessly Linking Online with In-Store: Retail Integration Rating 5/5
Harrods’ department store is revered internationally. It makes sense that the website and app both include multiple references to in-store experiences. The site’s current focal feature is the opening of Harrods new beauty store in Essex. A call to ‘Step Inside’ links to a page all about the Skincare Station and Champagne Bar awaiting customers who visit.
The ‘Store’ has a dedicated pop-up section accessible anywhere on the site. There is also a ‘Plan Your Visit’ link on the homepage with all the details a visitor could need. The references to the emporium and images of the building throughout are a frequent reminder to the user of the grand store that is at the very core of Harrods’ identity.
Harrods: Always Delivering An Ongoing Customer Journey
The Harrods website perfectly combines valuable content and alluring visual design to keep customers engaged. This interconnected approach means users are always discovering something new. The customer journey never ends, but for all the right reasons. Minor individual elements, from smooth moving elements to unusual filter options, combine to deliver a well thought out customer journey. Add to this the in-store pocket guide provided by the app and the on-trend advice delivered weekly across all of their platforms, and Harrods digital offering is hard to beat.
Posted on by Chelsea Davies