In March 2017 Balenciaga launched a new website which is pretty remarkable as far as web design goes.
You can see the homepage in the screenshot below. The rest of the website has the same utilitarian aesthetic and frankly looks as if the brand decided that the agency wireframes looked just fine as they were.
The Balenciaga site is managed by the Yoox Net-A-Porter Group, which also manages sites for other luxury brands such as Armani, Valentino and YSL. The agency that worked on the site, Bureau Borsche, was tasked with bringing a radically simple design to fruition, one which mirrors Balenciaga’s current high fashion ideals. Writing for It’s Nice That, Rebecca Fulleylove explains:
In 2015, Georgian designer Demna Gvasalia was brought in to inject the brand with a ‘breath of fresh air’, taking his ‘norm core aesthetic and mundane brand-abstractions’ to Balenciaga’s runways.
Bureau Borsche has worked with Demna to emulate this shift on its digital platforms by creating a new website that aims to be ‘utterly brilliant in its simplicity and superbly user-friendly’.
All of this slightly arcane description begs the question – is the website any good? And how does it compare to other luxury brands?
Well, after spending some time on the site, I found it’s a tale of two devices. The minimalist concept works much better on a smartphone rather than desktop.
The lack of fuss is always strangely compelling on desktop, but be in no doubt that there are some ecommerce conventions that go ignored here, and I’d be surprised if they don’t impact on user satisfaction or even the bottom line. On mobile, though, the whole thing feels better proportioned.
Let’s have a look….
Where is the… content?
You’ve seen seen the homepage above. It certainly puts the cat amongst the pigeons when it comes to the debate of whether products should appear on the homepage.
Greg Randall argues that the homepage is there as a signpost and as such should not disrupt the buyer’s momentum. Randall says he expects homepages to feature:
- Large search box.
- Clearly displayed main navigation bar/menu.
- Mega menu.
- Content tiles in the body of the homepage pictorially representing main categories.
The Balenciaga homepage arguably only scores points on number 1 – it has a clearly visible search box. The tiny burger menu in the top right corner is almost imperceptible on desktop and it doesn’t even render on first visit to the site on mobile, as shown below.
However, maybe this is a bit of a moot point – the menu itself is fairly useless as it merely replicates the category structure the user will see if they click on the ‘female’ or ‘male’ content blocks. Essentially, the content itself is the menu.
Homepage on mobile
By making the page so simple, Balenciaga succeeds in not derailing a customer from their buying intent by distracting them with product images, but ultimately it fails to adequately point them onwards on desktop.
If I was looking for Men’s jackets, for example, I would not be able to get there in one click – it takes three. These clicks require some concentration, without imagery to guide me.
Just look below, I have clicked through from ‘mens’ and I still can’t see ‘jackets’. Is it in ‘collections’? No. I have to know to click on ‘ready to wear’.
Balenciaga men’s category ‘rabbit hole’
That might not seem too complicated. But compare the above user experience with that of Dolce & Gabbana, seen below. D&G’s mega menu on desktop allows me to quickly find the jackets category I am looking for and get there in one click.
Dolce & Gabbana’s mega menu – helping me find jackets in one click
On mobile, where the Balenciaga site has much less white space and where users are accustomed to tapping three or four times through a menu structure, the site feels much more like a successful design (see below). In fact, it feels app-like and user-friendly.
Language is surely a consideration here, particularly on desktop. Whilst browsers will translate the Balenciaga category text for users that don’t speak English, wouldn’t some imagery help guide, say, a French monoglot shopping from a London IP?
The D&G site, pretty much standard in this regard, uses content tiles when I click through to ‘mens’ with images illustrating each product category. Would this help desktop Balenciaga buyers?
I’m perhaps sounding a bit harsh about the Balenciaga homepage. One excellent feature is the search bar. Okay, there are no images in the suggested search to help guide me, but there are lots of suggestions that very quickly help me narrow down to a particular product type (see below).
Balenciaga’s nicely detailed suggested search goes some way in making up for the lack of a decent menu
A final word on the lack of content on the homepage: Whilst showcasing products on the homepage can lead first-time visitors to underestimate the breadth of the product mix, Balenciaga’s lack of…well, anything on the homepage arguably does the same (again, mostly on the more sparse desktop version). I’m left unsure of what is on offer without clicking hither and thither.
The text size is annoying on desktop
Look again at the homepage, below.
Balenciaga homepage and its small text
My own opinion is if you’re going to make a feature of the text, why not make the text stand out?
I read an article by designer Christian Miller recently who argues that website body text should be bigger, at least 20px. Miller writes: “There is a misperception among some designers (and stakeholders) that big body text feels “clunky”, or childish.”
We’re not talking about body text here (though there is a small amount on product pages), but the category titles here are still very small. Obviously the image above is reduced in size to fit into this article, but go and have a look for yourself and you’ll see the text is pretty small and potentially problematic for some users.
Look below at the homepage after I zoom in on my laptop to 200%. Personally I think this is much better (and the change doesn’t jeopardise the site’s normcore credentials).
Balenciaga homepage at 200% zoom
Anything else to note about the homepage?
As you can see for yourself, not really. But I do quite like the reasons to register listed under the account icon (see below). a simple touch but nicely done.
Reasons to register with Balenciaga
I think it’s also worth noting that I was never once served a pop-up / light box on desktop asking me if I wanted to subscribe to Balenciaga’s newsletter. Balenciaga does have such an email, and you can sign up in one click using a handy little form in the footer (see below) but it’s noticeable that the site goes to no extra lengths to get me to subscribe.
Balenciaga newsletter signup prompted only in the footer and at checkout
There is the option to subscribe to the newsletter as I go through the checkout, but for browsers (perhaps planning to buy offline), there is no prompt on arrival. Go to any other luxury fashion brand’s website and chances are you will see a light box asking you to subscribe (D&G is shown below).
I admire Balenciaga’s commitment to a clean and user-friendly design but I wonder if the company is missing out on valuable data because of its aesthetic ideals.
Dolce & Gabbana’s online store asks new visitors if they would like to signup to the brand’s newsletter
Product listing pages
This is where we start to see some imagery (at last) and where the mobile comes into its own. The images are two abreast and fill the screen nicely. The simplicity of the design makes the products shine through (see below).
On desktop, too, the listing pages are striking. It’s a pity the detail pages don’t stand up as well…
Product detail pages
A single green compromise
Here is a product page on desktop. The first comforting thing to note is that Balenciaga here makes one concession to its minimalist black and white design. Yes, there’s a neon green add-to-bag (or ‘reserve item’) button. A black and white button would have been frankly idiotic so this is encouraging.
Balenciaga product page
Concertinas and a lack of icons
Though my screenshot above is a little blurry after I condensed it, you can clearly see that all the important information is concertinaed – the user has to click to view sizes, shipping information etc.
In fairness, all the information that a product page needs is here on the page, it just needs a bit of clicking to find it. I don’t object to this – it’s a useful way to save space on mobile in particular and can focus the user on the purchase. However, I do think that where a choice of colours is available, it’s pretty important that these colour swatches aren’t hidden. If a user misses the colour options, they may navigate away, unaware that the blue version they wanted is in fact a reality.
The same goes for available sizes, perhaps. And on desktop, it would be nice to see some thumbnails of the other product images in the carousel, rather than having to click through each.
It’s all a little tucked away. Some icons may help, too, to draw the user to the information they need – a heart for the wishlist, a truck for shipping, and so on. That would really help the minimal design, especially for international users. The white space is again somewhat detracting.
You’re probably shouting that I’m missing the point of normcore, but I’m only looking at it from a UX (and revenue) point of view.
How do I zoom?
I was all set to write about how much of a shame it is that you can’t zoom in on product images. But eventually I found out there is a very adequate zoom – there’s simply no indication that it’s there.
There’s no icon or copy, and the cursor does not change to a magnifying glass or a plus when I roll over the imagery (see the grainy and super exciting GIF below). All of which means some people may not figure out how to take a closer look at these expensive items, which is surely a user’s number one priority for a product details page.
The GIF shows no change to the cursor indicating a zoom function, even though a very good one exists (the user has to know to click)
Opportunities lost on desktop
I found that some products didn’t have any product detail imagery, just full length model shots. It’s also the case that while some product pages have very nice recommendations below the fold, not all product pages provide such cross-sell suggestions. This is an opportunity lost.
My overall feeling about these product pages on desktop is that they do the job, but no more than that. The ‘store availability’ function works very well, it must be said, and users can reserve items at their local store – surely a big plus for clothes in this price bracket.
But, if we look at D&G desktop product details page below (which itself is nothing special), it’s clear that Balenciaga doesn’t use the full page in the same way. See how D&G has more information available at a glance (size and colour), better imagery and thumbnails.
A few simple tweaks is all Balenciaga needs. And if it wanted to do something many competitors don’t, it could provide links to the other items that the models are wearing in the product photography. This ‘shop the look’ functionality would be an even better way to cross-sell items.
A Dolce & Gabbana product page
But the mobile product details page is a different kettle of fish
On mobile, things have a very different feel again – the product image fills the screen and the information is easy to read and to access with a quick tap. Swiping through images is also much better suited to mobile.
All in all, the mobile device reverses the fortunes of these product pages, turning the white space from a weakness into a strength.
Don’t worry, I didn’t checkout with a £500 t-shirt and claim it on expenses. I did however notice, and this is a minor gripe, that when checking out, my order summary doesn’t show what item I’m buying, in what size or colour. I have to hit ‘review order’ in the top right (see screenshot below).
I do get a detailed order summary when I proceed to payment, but only after I have entered all my payment details and scrolled down. This is only a trifling annoyance, but a detailed summary could be shown on each page of the checkout.
Balenciaga checkout does not give me an order summary until I’m about to hit purchase, possibly increasing the returns rate
Other than this gripe, the checkout is pretty foolproof. I am happy to see I can checkout as a guest (see below), and there’s some nice information about gift giving and packaging (see in the image above).
There’s a good store locator – pretty important for luxury fashion brands.
I also like the grey footer, to distinguish from the very minimal page content (see image below).
A rather chic grey footer
There is also a delightful little micro-interaction when rolling over many of the buttons on desktop, such as ‘back to top’, ‘proceed to checkout’ and ‘back to shopping’ (see GIF below).
Conclusion – what more could the site be doing?
Fashion comes and goes, whereas many important UX considerations in ecommerce have stuck around for a decade.
I enjoyed using the Balenciaga website, but to say it is user-friendly is to ignore the problems with its homepage and product pages on desktop, where the design sometimes feels like a pastiche. Pastiche is definitely not cool.
On mobile though, I think the agency has really achieved a simple design where the product is the star.
So what should Balenciaga be doing differently, particularly on desktop? Arguably it should:
- Add a mega menu
- Do more to showcase its products
- Champion its offline stores in a more obvious way (outside of the store locator tool)
- Provide at least a little inspiration to users, with some photograpy or even video
- Help users out by using category content block imagery and product page icons
- Make everything a bit more obvious (bigger?)
Ecommerce is all about experience. On mobile that means a slick journey and simple browsing. On desktop, however, there’s a little more freedom to impress. It’s a tight rope, but one that luxury fashion brands need to walk in order to bring their brand to the fore.
If the website can drive the agenda of the brand aesthetic and create a little PR, however, maybe Balenciaga was right to go with a high concept? Reader, you decide.