Luxury Website Design: Jaguar vs Mercedes-Benz
British luxury car manufacturer, Jaguar, and German automotive giant, Mercedes-Benz, both appeal to similarly upmarket consumers. They offer top quality everyday vehicles as well as sports cars and coupés for those who want to up the horse-power. With a combined age of almost two centuries, both brands have cemented their reputation over several decades. However, even businesses of this stature need a contemporary online offering. Delivering the best luxury website features is essential to provide an impressive user experience high-end consumers expect.
In this article, we assess the performance of both brand’s websites. We highlight the best luxury website features, along with the worst, to decide which brand will come out on top. We set about ranking each site’s performance across several key factors, before deciding on an overall winner.
Table of Contents
First Impressions: Which Homepage Impresses?
Special Features: Multi-step Form as Custom Car Configurator
User Experience: Who Offers the Smoothest Navigation?
Visual Design: Which Overall Design is the Most Appealing?
Overall Best Luxury Website
Bringing any of the elements featured in this article to your own web design is possible with the right strategy and expertise. We are a luxury website design agency that has worked with brands across London and the UK to create unique digital platforms. If you would like to discuss anything that catches your eye, drop the KIJO team a message and we can get to work on making it happen.
Jaguar and Mercedes-Benz at a Glance
Jaguar
The luxury vehicle arm of British car manufacturing powerhouse, Jaguar Land Rover, Jaguar has been making luxury sports cars, executive saloons and SUVs for the past 80 years. With engineering centres in Coventry and Warwickshire and assembly plants throughout the West Midlands, Jaguar is a proudly British manufacturer. Generally costing between £30,000 and £70,000, Jaguar’s target audience is affluent professionals who want a luxurious passenger vehicle.
Mercedes-Benz
The origins of the Mercedes-Benz brand go back to the dawn of the automotive era itself. In 1886, Karl Benz invented the world’s first car. For over 100 years, Mercedes-Benz has stayed at the forefront of automotive innovation with developments in sustainability and ‘smart’ cars. Their everyday vehicles generally have a similar price point to Jaguar, but a luxury coupé will cost over £150,000. Mercedes-Benz similarly aims at wealthy professionals, who may want an occasional splurge on a less practical vehicle.
First Impressions: Which Homepage Impresses?
An image carousel filling the full width of the screen dominates Jaguar’s homepage. This is a better choice than a smaller feature surrounded by white space. Full-width creates a far more immersive experience for the user. User controls are clear and intuitive: you can pause the carousel and skip through yourself or let it automatically play. Although a small detail, this level of user control provides a customised experience from the outset.
The Mercedes-Benz website also has a content carousel as the focal point of their homepage, advertising their hybrid models and click and collect services. However, the carousel controls are not as advanced as Jaguar’s, and not visible when laid over a white image.
Jaguar’s website has clear intentions. As you scroll down the focus is very much on purchasing. There are multiple calls to action including to ‘Build and order online’ and ‘Order from stock online’. At the bottom of the page, models are presented as you would expect on a full product page. Jaguar seems less concerned about storytelling and more focused on making the customer journey clear and easy.
The Mercedes-Benz homepage is similarly practical with no overarching brand narrative. Aside from the image carousel, the only feature on the homepage is a navigation panel showcasing their car models. It is a technically perfect feature, allowing users to see a wide array of vehicles without a page refresh or further navigation. However, it doesn’t deliver the visual impact users expect from a luxury brand homepage.
Most Effective Homepage: Jaguar
Jaguar only just scraped a victory here. While both sites have all the practicalities covered, neither provides strong storytelling. Busy customers may appreciate being shown car models quickly, but if you’re looking to spend the better part of £100,000 on a vehicle, you want a little more luxury sales patter. Jaguar at least provides more links to ‘Find Out More’ about wider brand developments.
Special Features: Multi-step Form as Custom Car Configurator
Both Jaguar and Mercedes-Benz have car configurator tools on their websites, where customers can create a bespoke vehicle using multistep forms.
Jaguar’s form takes the user through numbered steps starting with ‘Models’ before moving through ‘Engines’, ‘Specification Packs’ and ‘Next Steps’.
The transitions between the panels are seamless and don’t require the page to reload. Similarly, when you change any visible elements the car preview image also automatically updates.
By lining the options up vertically, Jaguar web designers make it easy for users to compare even the minutest details. When choosing design elements such as colours and interior, Jaguar has maximised screen real estate with a brilliant layout that lets the user see everything at once. Carefully constructing the layout in this way delivers the easiest and most efficient user experience.
Mercedes-Benz’s car configurator adds unnecessary clicks to the customer journey. Once you have decided on your custom features, you have to navigate to the next section using the ‘Go to’ button. The layout also requires the user to scroll more, as it doesn’t all neatly fit the page.
While the options for interior features are incredibly detailed, they are text-heavy. The designers could have made far better use of graphics or comparison grids here to make this a less tedious experience for the user.
Most Effective Special Features: Jaguar
Mercedes-Benz’ multistep custom car building form is not as smooth or intuitive as Jaguar’s offering. Clicks rather than smooth transitions and poor page layout make for a tiresome customer journey. Jaguar instead serves up every element with little user effort, a hallmark of luxury customer service.
User Experience: Who Offers the Smoothest Navigation?
Jaguar’s homepage navigation bar appears simple at first, with a minimalistic black and white design. However, upon further inspection, it is a highly impressive website feature. Depending on the selection, it presents users with full-page drop-down menus and images, lists, or navigates to a specific page. It’s remarkably easy to flick through models without loading a single new page and the level of detailed information provided is impressive. Once again, Jaguar’s impeccable delivery requires minimal effort from the customer.
The Mercedes-Benz web designers divide navigation across two areas. Across the top, there are standard drop-down menus. On the right, is a selection of blue and white buttons where you can book a test drive, start a live chat or check out the latest offers. Users can quickly navigate to a service however the design is reminiscent of social media buttons that people often skim over – not ideal for a navigation bar.
The main navigation panels are simple drop-down menus, but again, they create additional work for the user. Despite the ample screen space available, customers have to scroll through the list to find what they are looking for. Many of the menu selections open up new windows. It isn’t clear why users are so frequently navigated away from the main website, but a browser crammed full of tabs is a confusing experience for customers and hardly the streamlined service expected from a luxury website.
Most Effective User Experience: Jaguar
Designed intelligently, navigation panels can be one of the best luxury website features, as demonstrated on Jaguar’s website. As far as possible, users are provided with what they are looking for within the navigation panel itself and only redirected to new pages for advanced features. The navigation on the Mercedes-Benz website is convoluted and splintered. Simply serving up pages full of useful information won’t make for an impressive website. Understanding and shaping your site’s structure around the customer journey is critical for a luxury website.
Visual Design: Which Overall Design is the Most Appealing?
The visual design of Jaguar’s website is consistent and stylishly minimalist. Across all pages, calls to action are set within burgundy and white buttons. Backgrounds are white or pale grey, and the text is black. Overall, it’s a cohesive, spacious design that is easy on any user’s eye. The site is peppered with interactive images where the user can ‘click to interact’ and explore car features from any angle.
Mercedes-Benz’s visual design is a little more varied. While most of the website uses a white background with black text and blue buttons, the product pages have a striking black background with white text. The dark design makes the product pages look glamorous and the images stand out. As you scroll, the pages are full of information, videos and close-up photography that make for a far more striking visual impact than the rest of the site. Cars can also be viewed from 360-degrees, in two different light settings.
Most Effective Visual Design: Jaguar AND Mercedes-Benz
It’s difficult to choose between the two when comparing visual design as Jaguar and Mercedes-Benz both offer something completely different. Jaguar’s site-wide design is well-thought-out and every element ties together. The Mercedes-Benz website isn’t as cohesive. However, the design of the product pages is more striking than Jaguar’s more subdued colour palette.
Overall Best Luxury Website: Jaguar
The Mercedes-Benz website is surprisingly messy for a brand of such stature. Jaguar, on the other hand, delivers a smooth experience for every customer and incorporates even the smaller page elements into their broader visual design.
What this website comparison has made clear, is that with an intelligent layout and advanced design, navigation panels and multi-step forms can be two of the best luxury website features. Submitting information and navigating around a website is a given for any customer. Elevating the customer’s experience by transforming a usually unremarkable process into an interactive, sophisticated feature is what sets luxury brands online platforms above the rest.
If you want to incorporate similar features on your website, simply contact us today and we can get to work on making it happen. For more inspiration, browse our latest projects for insider information on how we have developed apps or redesigned the websites of internationally renowned brands.
Posted on by Chelsea Davies