Recreating the luxury retail experience on an ecommerce site is a particularly difficult task and one that many high-end retailers have struggled with.
Effective web design is supposed to be about creating a simple, convenient user experience, but luxury brands apparently find it hard to resist the temptation to design convoluted sites that value glossy imagery over user experience.
In fact we've previously highlighted 17 luxury brands with poor web UX, as well as looking at why luxury brands need to focus on user experience and SEO.
Therefore when Mulberry recently launched a new site my expectation was that it would be another unusable but great-looking ecommerce store.
So it was heartening to hear that developers Poke had been briefed to focus on delivering comprehensive product information, useful imagery and a short, user-friendly checkout process. The site also had to use responsive design to ensure it works across all mobile devices.
I tried to buy a handbag on the site to see whether the new site had achieved its aims...
Homepage
The homepage uses a fairly simple design with a carousel offering access to different collections and product ranges.
Each screen uses similar grey calls-to-action that fit well with the overall colour scheme but don't exactly grab your attention. Similarly the colour chosen for the search tool is a bit meek and is easy to miss.
On the plus side though, it's not difficult to work out where you need to go to start shopping.
Product Listings
The product listing page uses a simple grid layout which makes it simple to navigate but also allows the page to smoothly scale for smaller screens.
The use of white space gives the page a clean look and creates an excellent showcase for the different products.
However there are a few minor usability issues when using the site on a mobile screen, mainly due to the fact that 'hover over' options are activated when you try to scroll down the screen.
For example, on the desktop site if you hover the cursor over the filter options then it shows you the various categories you can select.
When viewing the site on a mobile device these same filter options react automatically as you scroll down the screen, so you end up accidentally opening dropdown menus that might not be of interest.
Product Pages
Mulberry's product pages use a simple, clean design that's consistent with the rest of the site.
The aim is to recreate the in-store experience by providing as much product information and advice as possible, which also helps to encourage visitors to actually make a purchase.
Alongside a product description the pages include detailed information on the dimensions and features of each bag, advice on how to care for the product and details of the material it's made of.
However the product images are probably the standout feature. Each handbag has several images taken from different angles, including the interior of the bag and one of somebody holding the product so you can get a feel for how big it is.
There are also several close-up images of the various clips and fasteners.
It's also worth noting the placement of the CTAs, as this is something we discussed recently on the blog.
Mulberry has opted for two identical CTAs on its handbag pages, though they're for different items. The button at the top is for the handbag while the CTA at the bottom of the page is for the leather gel care product.
They are well designed as the black colour stands out against the white background, however I will admit that at first I assumed both were for the handbag.
When you add an item to your bag the CTA alters to direct the shopper to the checkout, while another one appears to ask if the user wants to add another £1,200 handbag to their basket.
Finally, the product pages also look excellent on a mobile screen. The images are swipeable and the use of white space means that the design is clean and slick even on a smaller screen.
Checkout
The shopping bag gives a decent, simple summary of your order, including product images and an unmissable, 'Purchase now' CTA.
There are a few issues with it though. Firstly, I'm astonished that Mulberry charges £8 for delivery when you're spending £1,200 on a handbag as delivery charges are one of the main causes of checkout abandonment, but the it could be that people in the market for luxury handbags don't mind such a steep fee.
And secondly, though upselling products is a good idea it looks sloppy to try and upsell a care product that I already have in my shopping bag.
However Mulberry scores points by offering a guest checkout option, which is a good way of preventing dropouts.
The checkout itself is hosted on a single page with each of the steps in the process housed in a dropdown section. This means you don't have to navigate to a new page each time and gives the impression of a shorter checkout process overall.
There are several other neat touches as well, such as real time error corrections and user shortcuts including a postcode lookup tool.
Looking at mobile, the process works equally well although the CTA did fall out of place at one point.
In conclusion...
There's much to like about Mulberry's new site, but the product pages and the one-page checkout process are particularly well designed and benefit from the fact that the site is responsive so requires a clean layout that can scale to any screen size.
The product pages add to the sense that Mulberry is a luxury brand by emphasising the quality of products, including extras details about the materials used.
Similarly, Mulberry uses the checkout as an opportunity to tout its luxury image by stipulating that all products are "packed up with love and care" in signature carrier bags, which might go some way to justifying the £8 delivery costs.
The checkout process itself is displayed on a single page, so it feels short even though it requires all the standard personal information.
Overall then, Mulberry has created an excellent ecommerce site that successfully fits within its luxury brand credentials without undermining the user experience, although it could do with a few tweaks to improve the UX for mobile users.
No hay comentarios:
Publicar un comentario