Product Page Design Teardown: THE ICONIC – A Cut Above the Rest?

image

Online department stores can be difficult for ecommerce retailers to get right. There are many different products and brands available on your site, but you have to also define your own identity.

THE ICONIC – an online fashion and sports retailer in Australia and New Zealand – is a great example of striking that balance perfectly.

Since launching in 2011, THE ICONIC has jumped to become the go-to site for branded fashion. And according to their ‘About Us’ page, they have big plans for the future:

We are here to define the future of retail. We are a bunch of style-savvy, creative, and forward-thinking individuals with a dream to create a better shopping experience for you; maybe one you haven’t even imagined yet.

THE ICONIC is also known for the world-class technology we build to deliver Australia & New Zealand’s best online shopping experience. Our in-house technology team in Sydney is over 100 people strong and comprised of some of the best talent from around the world.

These are bold claims – but do they match up?

While the website and shopping experience are great overall, there are a few things that let them down. Here we share some tips and tools to replicate – and improve – on what they have achieved!

Homepage – bold yet understated, but why are there two?

A website homepage is like the window into your store: it lets your customers know from the beginning who you are and what you are about.

On THE ICONIC’s homepage, you immediately understand what the company is about. It is short and it doesn’t waste their customer’s time with too many frills. But it keeps shoppers interested.

It shows you where to go and get them there to start shopping. This is easily communicated by the clean, crisp and classy design of the page. Different size squares – asymmetrical both vertically and horizontally – keeps the page neat and eye-catching.

Product Page Design Teardown: THE ICONIC - A Cut Above the Rest?

At the top of the page, there are three horizontal photos – one of a man, one of a woman and one of children. They are colorful, dynamic and dreamy. But, the call-to-action that is overlaid on the pictures – i.e. “shop kids” – gets slightly lost in the background.

TIP: Make sure that the text can be read, otherwise, why bother having it?

When you click on one of the options, women’s for example, you go to what is effectively a second homepage – though it is substantially longer.

The first thing you see on the page is a giant banner – so big in fact that it takes up the entire screen. Below, you have a choice of clothing categories in neat, horizontal square boxes which are the same color as the banner ad. The uniformity makes it easy to scroll through the choices.

The page after this becomes a little more sporadic and uneven, with photo content laid out in a 3-2-1-4-6-6 pattern. But rather than looking misshapen, your eyes dive from one place to another which keeps the experience exciting.

This is not an easy asymmetry to achieve.  And is helped by the fact that the photos are engaging and use the same colour pallet – pastels, in this case.

But it is let down by the size of the text: it is too small. Although this does mean that shoppers have to stop and read it. Others will happily ship over it and just look at the photos.

TIP: Make sure text is easy to read. As much as your customers are interested in product detail, don’t make them have to work for it! Most customers will skip over the text and just look at the pretty pictures – which means the text gets lost.

Landing page – uniformity and ease

One of the first things that jumps out at you when you are on the product landing page is the uniformity.

Product Page Design Teardown: THE ICONIC - A Cut Above the Rest?

Despite the clothes being from different brands, every picture has the same background which makes the shopping experience easier – and makes the clothes pop off the page. (Learn how you can do this for your product photography without the expensive studio!)

The information below is also easy to read. The name of the brand is bold, the name of the item is listed below and then the price is at the bottom. If it is a new item or there any discounts, it is listed in a bold color.

Rather than having to find the filter menu, it is just there – and goes beyond the normal sub-category, color, and size.

It includes the type of occasion, whether it should be ethically sourced and the delivery options if you need it fast (for a fashion emergency, I assume!). These thoughtful details don’t go unnoticed – in fact, it makes you wonder why other companies don’t include the same!

TIP: small details can make all the difference. Are your customers asking for some small addition to your website that will make their shopping experience go from an A to an A+?

Shopping experience – full of nice surprises

Quite surprisingly, the shopping page is a bit of a mixed bag. But mostly the page feels a little squashed.

The page is largely dominated by pictures, anywhere between 4 and 8 which we always recommend to our merchants too. They show almost every angle imaginable.

However, the item is always worn. There is no standalone or flat-lay picture of the item. For customers who have a different body shape, height and size to the model, it might be difficult to fully understand how the item might fit them.

While the pictures somewhat successfully capture the flow and fit of the item, a video would be a nice addition and elevate the shopping experience. Away did a good job of incorporating videos on how their products are used.

Immediately when you land on the page as a new user, you are prompted to “follow your favorite brands” with a small pop up. In order to do so, you need to log in to your account.

This is very clever for ecommerce merchants as it will help you get more data and understand your customers further and ultimately make their future shopping experiences better.

Product Page Design Teardown: THE ICONIC - A Cut Above the Rest?

Some of the important details are visible on the left-hand side of the screen on a desktop, like the brand, the name of the product, the price, the material, and the size and fit.

But not the same information on every page. On some items, I’ve seen the material and size and fit. On others, I’ve seen nothing. There should be uniformity.

If it is important information on one product, why is it not important on the other?

And it feels very small, both the text size and the space used. There is a lot of white space that doesn’t add to the aesthetic of the page – it just looks like wasted space.

This is made more frustrating when you realize that there is more information at the bottom of the page – something I didn’t realize until I went down the page. And again, you find some are full of information, some are not.

the-iconic-8

the-iconic-9

Customers need to have consistent access to this kind of information on your website, especially if you don’t have a physical store where they can check the product out for themselves. It will leave them guessing about the fit or material, and that might be enough for you to lose a sale or a costly return.

Another odd thing that is missing from the page is that there is no upsell. There is no “pair it with these items to complete the look”.

There are two major reasons why you should upsell. First, it shows your customers that you are knowledgeable about fashion, what is trending and want them to look their best. Second, it will help them click through your website and maybe discover more items to add to their basket.

Find my fit

How many times have you loved something online but didn’t know your size, so bought one in two different sizes, and then had the hassle of returning the one that didn’t fit later?

The ‘Find Your Fit’ feature is easily the best thing on the page. You simply enter a few simple details about yourself – your height and weight, your hip shape, your stomach size, bra size, how fitted you like your clothes to be.

At the end, you get a personalized recommendation based on the size that other shoppers like me bought and whether they returned it – including a percentage certainty, so you can make the final decision.

It takes less than two minutes to fill in (if you know your details) and takes away some of the uncertainty of shopping online – especially for people who are in-between sizes or have never purchased from that brand before.

the-iconic-10

And then, they will remember this information when you go to another product and suggest which size would fit you best. It is great – it takes the guesswork out of online shopping!

But for customers shopping on this page, it doesn’t stand out very prominently – it is the same font and size as the other text and it is quite close to the other information, so it might be easily missed.

TIP: if you have a cool feature on your page, make sure it stands out so your customers know about it!

Check out – why can’t I buy it?

When I went to buy a shirt, I experienced every ecommerce merchant’s biggest nightmare: the product wouldn’t go to my basket – and there was no visible reason why! The product was in stock but it would not go to my basket.

And then, when a pop-up box told me that there was a problem, there was no explanation and the button to get more information didn’t do anything!

the-iconic-7

I was not taken to another page (FAQ) or a more personalized pop-up box explaining the issue. I know this may have just happened today and doesn’t happen all the time, but I had to abandon my cart.

They lost a sale because of a lack of transparency.

Another issue to mention…

Font size is a major issue throughout the site. The text, both on a large and small screen, is tiny!

This results in large areas of white space and leaves you struggling to read all the important information!

TIP: your website should be optimized to fit the dimensions of whatever screen and device your customers are shopping on.

What’s the verdict?

Overall, the shopping experience is pleasant and easy. This is thanks to the consistent design on the landing page and consistency of the photography, despite the fact that there are dozens of different brands. And the ‘find my fit’ feature really makes the experience dazzle.

But the details ultimately let THE ICONIC down. The text is difficult to read and inconsistent. And some items won’t add to your cart for no reason – and this is a guaranteed way to lose customers.

There are lots of takeaways that you can implement into your own ecommerce store.

More to read

image

Ecommerce

Ecommerce Visual Merchandising: What Is It and Why You Need It

March 11, 2024 - Holly Cardew

image

Ecommerce

Ecommerce UX Best Practices for an Intuitive Ecommerce Website

February 19, 2024 - Holly Cardew

image

Ecommerce

Image Alt Text for Ecommerce Businesses - A Comprehensive Guide

February 05, 2024 - Holly Cardew

image

Proudly made remotely from