Mango is a Spanish fashion retailer founded on 1984 that now has more than 2,000 stores in 103 countries, 150 of which are in the UK.
Mango has also been operating its ecommerce site for around 15 years and it makes for an interesting study in highly innovative retail site design, but with areas that could definitely use an improvement.
Here we’ll take a look at what works on the site from a customer experience and usability point of view first, before highlighting where it could be more effective.
Things we love…
Full screen video
The homepage is dominated by a beautifully shot full-screen video that’s incredibly evocative and persuasive, and of course features the clothes available on the site.
At the bottom of the video there’s a link to a collection of images featuring product links (see below), or if you scroll down to below the video you can click-through to the full range.
If you click through on the above video, you’re treated to a look-book featuring the models from the video wearing the full Spring collection.
As you hover the mouse over each item, the name and price appears, along with a shop now button.
If you click on the shop now link, a pop-out product box appears with options for colour and size, as well as the ability to either add to your bag or wishlist.
Video integrated product listing pages
As well as the homepage, you can see how clothes look while being worn by actual moving models.
Hover for alternate views
On all product listing pages, you can see switch between an image of the model wearing the item as well as standard product shot by hovering your mouse over the image.
Complete the look
A relatively new trend, but a brilliant one for shoppers wishing to purchase an entire outfit without the hassle of tracking down the individual items.
On the product page there is a simple ‘I want the complete outfit’ button along with clear information on how much each item costs.
This button takes you through to a brilliantly laid-out page, with each element of the outfit ready to be customised and added to your bag.
Delivery and returns information
Free delivery is available, with the message communicated throughout every page of the website at the top of the screen, along with info on the free delivery threshold.
Mango also makes its free returns policy clear here too, which many retailers fail to include.
Also by clicking on the ‘info’ button, the bar expands to reveal more details, including the all-important fact that you can return online purchased good in-store.
The mega-nav is a work of simplistic beauty, with clear well-laid out navigation. I’m also a big fan of the humanising animated micro-UX to the right of the meg-nav, featuring the tailored suit service.
The animated image is also a clickable link direct to the tailoring area.
The Mango site is fully responsive, so it adapts well to any screen sizes…
Things that need improving…
There are major issues with mango’s search tool. For a start you may not have actually spotted it yet…
There are no automatic suggestions given when you begin typing into the field, so it’s a bit of a guessing game as to whether you’ll get any results.
It also has poor synonym management, I’m served completely different results if I type pants or trousers, but the worst outcome is when you alter the stems to either singular or plural.
This is my search for jumpers…
Note the second highlighted box above which serves me options for other products, but completely irrelevant to my search.
This could easily have been a list of nearest approximations to my search term, for instance ‘jumper’, which yields plenty of results…
Perhaps the most frustrating thing about this is that if I spell jumper wrong, the tool still shows me the same results…
This is a search tool that forgives misspellings but not common pluralisation.
Inconsistency in responsiveness
Shopping is a breeze on the mobile optimised site, however if you’re out and about and wish to find your nearest store, the menu option for this is sadly non-responsive.
This is a major issue if you’re looking to drive mobile users into your high street stores.
Text and other elements are far too small
Site-wide there are problems with the text appearing too small, especially in the free delivery and returns message at the top of the page.
There’s also an issue here in the shopping bag, where it’s easy to miss the message that I need to spend another £20.01 to qualify for free shipping.
This wouldn’t be so much of a problem, but the message isn’t repeated when you get to the checkout. You’ll be surprised at how far customers will go for free shipping.
Elsewhere this shopping bag icon telling me how many items are inside the bag is so small that it might as well not exist.
The checkout for Mango just isn’t of the same quality as the rest of the site. For a start there’s no guest checkout available to help speed up the process for the customer.
Entering your personal details is also a frustrating experience, with a lack of auto-fill, postcode finder and text boxes which are far too small.
Is there any need for that massive image of the model on the right, when the space could easily be used to make the experience more accessible for the user?