{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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.

David Moth

Published 6 August, 2013 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1679 more posts from this author

Comments (10)

Comment
No-profile-pic
Save or Cancel
Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

Thanks for the article David, the site looks lovely, it's great to see such a nice responsive UI.

However, I wonder why the decided that the widest view would be 980px wide? The most common screen width visiting our site is 1366 pixels, I can't imagine Mulberry would be that much different.

Also, add to bag button which subtly changes to go to checkout is a little too subtle for me, I think it's too easy to miss the change.

Those points aside, it's still a lovely site and I'm sure we'll have people picking holes in our responsive relaunch later this year...

almost 3 years ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

@Stuart, thanks for your comment. It'd be great if you could let us know when your new site goes live, it'd be good to do a review and maybe a Q&A about the design process.

almost 3 years ago

Avatar-blank-50x50

James

An interesting example, funnily enough there are still quite a few bugs on the pages that need ironing out. Although these are things that can be overcome easily.

I managed to break the view bag page just by changing between landscape and portrait.

almost 3 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

@David, will do!
I'll also be talking about it at Conversion Conference.

almost 3 years ago

Avatar-blank-50x50

mxkenna

didn't quite see how this was responsive for smart phones, but looks like it slightly recongifures for 1024px (tablet)

almost 3 years ago

Andrew McGarry

Andrew McGarry, Managing Director at McGarry Fashion

Lots of fashion and clothing sites launching responsive designs around now. Better late than never.

I find it interesting that when you look at paid search traffic behaviour, mobile visits continue to match/exceed/dwarf desktop traffic but with a lower conversion rate.

Does this mean mobile devices have become the new window shopping? If mobile has become the first point of contact, the value of assisted conversions and that first click needs to be in the equation.

Responsive to screen size is one thing, responsive to user journey is another level.

The mobile experience arguably doesn't give window shoppers what they need often enough to convince them to come back on a different device later.

If I'm going to spend £1200 on a handbag, I'd rather see that on a larger screen before committing. 'Add To Shopping Bag' could have another button:

'Email Product Page Link'.

If your mobile site converts less than 2%, what else can you do for the 98%..?

almost 3 years ago

Angus Phillipson

Angus Phillipson, Director at Byte9

@andrew

The main use case that we've seen is in-(physical) store browsing.

the Hypothesis being that people are looking for product information and reviews that are not available in-store. That could/should account for a large part of your 98% effort.

I would hypothesise that on-line conversion rate for these users would naturally be much smaller. Why would they pay the same on the brand site when they can purchase in-store, let alone migrate to on another device?

For a beauty brand we had very high mobile usage of how-to's, video and reviews, representing 60% traffic. We didn't correlate with in-store or category purchasing, but it would be interesting. I am sure mobile it is very influential across channels.

regards

angus

almost 3 years ago

Angus Phillipson

Angus Phillipson, Director at Byte9

PS with a high ticket item like a mulberry bag I would imagine there are very distinct categories of buyer, with discrete buying habits.

Obviously I am not trying to compare that to cosmetics...!

almost 3 years ago

Mike Hann

Mike Hann, Director at Poq Studio

Great review of the site. It certainly feels luxury; the product image experience is really stand out on smartphone.

@Stuart - Agree about Add to Bag being very subtle. I had to look twice!

Would have been good to see a location based Store Locator.

Great job from poke though.

almost 3 years ago

Brian Hoadley

Brian Hoadley, UX Consultant at Marco + Bee

I don't find this site responsive at all. On a true responsive site you should be able to resize your desktop browser window down to a minimum with to see how the site gracefully degrades - this site doesn't.

It looks to me like they have developed a mobile site for their content, not a responsive site.

It looks to me like it works down to about 1024 but I don't see it scale beyond that in the same way that you would www.bostonglobe.com.

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.