Feb 9, 2017

The Iconic vs SurfStitch: A Marketing Showdown of Australia’s Most Favourite eCommerce Sites

In one corner, you have The Iconic!

Arguably Australia’s favourite online fashion retailer, launched in 2011, which has paved the way for a new generation of eCommerce stores in Australia. Providing delivery options never offered in Australia before, launching up to 200 products a day and creating the most seamless return process that I have personally ever experienced.

In the other corner, you have SurfStitch.

A pioneering Australian e-tailer. Launched in 2008, SurfStitch went public in 2014 and despite its years, it maintains a position as one of the country’s leading lifestyle-inspired fashion stores.

What do these two sites do right? What do they get wrong?

We’ll dig into their homepage, product pages, and checkout experiences to see how they stack up.

The Iconic vs Surfstich – eCommerce Homepage Breakdowns

Let’s start by looking at the first page most customers will see - the homepage.

Although they might look stylistically different, you’ll find that both The Iconic and SurfStitch have remarkably similar homepage’s from a user experience perspective. The layouts and content patterns are very similar.

Here’s The Iconic’s homepage:

The Iconic Homepage

A few things to note here:

1. Top bar -> Logo + nav bar -> Promo bar

Is a popular layout format for eCommerce stores (just see Booktopia or PetCircle). Integrated shopping bag and search box functions in the logo bar are clearly accessible on all pages.

2. Promo bar highlights shipping policies.

Unexpected shipping costs is the biggest reason for shopping cart abandonment. The Iconic avoids this by showing customers right on the homepage what shipping might cost them.

3. Gender-specific navigation in hero image

The hero image dominates the “Above the Fold” area. In The Iconic’s case, this is devoted to directing customers to their respective genders. The imagery used is relevant to the season which in this case is beachside given that it is summer in Australia at the time of writing.

4. Promotion section

The area directly below the fold is focused on promoting The Iconic’s latest offers. The 50% off sale might do better if it had a more dominant screen presence, but price has never been their unique selling proposition.

5. Brand section

It’s clear from this section that a lot of The Iconic’s customers search and enter the site to buy clothes from popular brands. The Iconic makes it easy for them by linking directly to brand pages. This also works as “persuasion by authority” - by showing customers that they stock the world’s top brands, The Iconic improves its own brand authority.

6. SEO-focused description

This entire block includes a store description with links to different pages. This is mostly for SEO - few readers will bother to read the text (in size 12px font, no less).

7. Footer does not have anything unique

Judging by how the newsletter subscription is tucked into the corner, email collection doesn’t seem to be The Iconic’s focus (at least on the homepage). There is no overt promotion of any specific social network either.

8. Brand section (again)

In case you missed the “Top Brands” section above, here’s a list again. The reason seems to be the same: better SEO + directing shoppers to the brand of their choice.

9. Floating help button

This ZenDesk powered help button helps customers find answers to common queries. In case they can’t find what they’re looking for, there’s a live chat option as well.

The Iconic Live Chat

 

What The Iconic is doing right:

1. Solid eCommerce design

Iconic uses a tried and tested layout for its home page. A good example of don’t fix what’s not broken.

2. Easy product discovery

Through a well-organised home page.

3. Focus on brands

Which adds to the perception of authority and authenticity.

4. Live chat

Just in case the visitor couldn’t find what they’re looking for, a live chat is an option.

 

What The Iconic could improve:

1. Top bar

The Iconic’s top bar is difficult to spot because of the light gray text color. Testing a darker font for the top bar might improve CTRs.

2. Icons in logo bar

Using text instead of icons in the logo bar might reduce user confusion.

 

SurfStitch homepage:

Surfstich Homepage

As you’ll notice, apart from some differences, the layouts are largely the same. There is the same top bar + logo bar + promo bar format along with a large hero image. There’s also a help button and a section for the latest promos.

Let’s dig into the details:

1. The top bar is similar to The Iconic

Except SurfStitch has better clarity thanks to larger, darker text. Also, notice the more prominent newsletter sign-up form and there is also an incentive for signing-up - you get $20 off. This shows that SurfStitch prioritises email sign-ups more than The Iconic (at least on the homepage). Note the “Sale” link in the nav bar.

2. Larger promo bar

Like The Iconic, SurfStitch also lays out its shipping policies upfront. But it also includes links to its latest promos, including an innovative “AfterPay” (buy now, pay later) promo.

3. Hero image has links to gender-specific product catalogs

These aren’t quite as prominent as The Iconic’s two-column Men/Women approach.

4. Promotion in hero image makes the above the fold area appear busy

This is likely a temporary arrangement to emphasise SurfStitch’s summer sale.

5. These three sections are all devoted to promotions

All images, as expected, are surfing/swimming related. Interestingly, one image links to a page with a “Read Now” CTA. This page has a selection of swimwear with a heavy focus on imagery.

6. Links from SurfStitch’s blog, The Lens

SurfStitch promotes its blog quite heavily with links on the homepage, the top bar and the side floating menu. The blog has listicles, lifestyle features and BTS imagery from SurfStitch’s photoshoots.

7. The footer includes payment badges and links to social media accounts

The payment badges add a small amount of trust. Note that unlike The Iconic, SurfStitch doesn’t list all the brands it stocks.

8. Help button is similar to The Iconic’s with one big difference

Instead of a live chat, you get a “contact us” option.

Surfstich Help Desk

 

What SurfStitch is doing right:

1. Solid eCommerce design

Like The Iconic, SurfStitch’s layout follows proven eCommerce design principles.

2. Good use of images to match SurfStitch’s beach-focused brand

And the current season in Australia (summer at the time of writing).

3. Shipping and return policy

Both SurfStitch and Iconic do this right - Declaring their shipping and return policies upfront. This means shoppers don’t get a surprise when they hit the checkout page.

 

What SurfStitch could improve:

1. More brands

It’s not clear what brands SurfStitch sells from a quick glance at its homepage. Doing something similar to The Iconic can help.

2. Busy logo - top bar

Between the ‘My Account’ links, newsletter promo and search box, the top and logo bars are a little too busy. Removing one of these elements might make for a cleaner navigation.

3. Live chat

There’s no harm (in fact, it might even boost conversions) in offering a live chat option, instead of the regular “Contact Us” help desk.

 

eCommerce Product Pages – The Iconic vs Surfstich

Product pages are usually the first point in the conversion funnel. This is where most of your organic and referral traffic will land.

Let’s look at example product pages from both The Iconic and SurfStitch.

The Iconic product page

The Iconic product page

This is a pretty standard product page - there are no UI elements that demand attention. This can be a good thing when you want shoppers to focus on the product itself.

Let’s dig in:

1. Product images

Lots of product images in different poses. High quality imagery is proven to improve conversions across verticals. It’s particularly important for personal items such as clothing.

2. The favorite (heart) icon is small and barely visible

A dash of color would perhaps help it stand out.

3. Color selection is through a drop-down box

Not always ideal since it doesn’t show a preview of the product. The size guide link might be confused for a CTA as well.

4. Add to Cart CTA doesn’t really stand out on the page

Especially against the gray-white theme.

5. Product description is very basic

The copywriting is neither clever nor in-depth, though that’s par for the course for clothing stores. In-depth product copy works when you have an innovative product to sell. For clothes, copy usually only has SEO benefits.

6. Recommended products is a nice touch

And can increase average order value.

7. Delivery estimate

Is a helpful touch and reduces shopper confusion.

8. Clear return policy

Can also improve conversion rates by addressing customer FUDs.

 

What The Iconic is doing right:

1. Product images

The Iconic offers plenty of product images, which is great for conversions when you’re selling physical products.

2. Product recommendations

Product-specific recommendations (“You might also like”) improve average order value.

3. Delivery estimate

Gives customers a clear idea of delivery times (instead of a vague “5-15 days to deliver”).

 

What The Iconic could improve:

1. More prominent Add to Cart CTA

The blue CTA doesn’t particularly stand out on the page. A larger button and/or a different color might attract more attention (and clicks).

2. Color selection

Via drop-down menu doesn’t feel as tactile as SurfStitch’s product-preview based selection (see below).

3. Favourite button

The favorite button isn’t very prominent. Making it bigger may improve future sales.

 

SurfStitch product page

Surfstich product page

This page is largely similar to The Iconic’s, except for a few key differences.

1. Fewer product photos is a big negative

Several products on the store have only one picture which can reduce consumer confidence, especially for products shoppers like to “feel” before buying.

2. Afterpay, a SurfStitch service that lets shoppers buy now, pay in installments over 56 days, finds a prominent spot

Given that SurfStitch attracts a largely young customer base, this can drive a lot of conversions.

3. Color selection

Is more visual than The Iconic - a plus.

4. Size selection is more “tactile” as well

The size chart button is not distracting either.

5. The product quantity button, missing from The Iconic’s website, finds a spot here

This might be redundant depending on your audience.

6. Add to Cart CTA stands out on the page thanks to its green background

Note the ‘+’ symbol to the left.

7. Favorites + Shares

SurfStitch gives you plenty of options to share the product, like the page or add it to your favorites. The Iconic doesn’t have share buttons, which is a good thing (we’ll explain why below)

8. Promo image for SurfStitch’s current promotion.

The promotion could have more clarity. Right now, it takes up a lot of space though it isn’t apparent in one glance what the promo does.

9. Product description is very basic with zero copywriting flourish

Such a barebones description won’t help SurfStitch’s SEO at all.

10. Shipping policy is hidden behind a drop-down box

A more upfront shipping policy would likely do better. Thankfully, the “Returns” section makes it clear that you get free returns in one glance.

 

What SurfStitch does right:

1. Prominent Add to Cart CTA

The bright green CTA stands out on the page.

2. Color and size selection feels very intuitive

The color selection also gives a product preview.

 

What SurfStitch could improve:

1. Better product descriptions

SurfStitch’s product descriptions are very dry. Better copy might help conversions. Pushing the descriptions up in the content can help as well.

2. More images

Lots of products on SurfStitch have only one image. This seriously hurts conversions.

3. Smaller promo image

The “Free SWELL Towel” promo image takes up a lot of screen real estate. This could be replaced by a smaller image.

4. Sharing options

Remove social sharing buttons. There should only be a single goal for a product page and that is to get people to click the add-to-cart button. Adding social sharing buttons is just another distraction.

 

Checkout Page – The Iconic vs Surfstich

The checkout page is where visitors turn into paying customers. How well you can optimise this conversion process will have a big impact on your sales. A strong checkout process will help reduce shopping cart abandonment rates and get you more sales.

Let’s see how The Iconic and SurfStitch run their checkout.

The Iconic Checkout

The Iconic’s checkout is fast and seamless, there are no distracting outgoing links and the entire process is neatly outlined.

This is the first screen you’ll see when you start the checkout process:

The Iconic checkout page

A few things to note here:

1. No menu

The Iconic separates the checkout process from the main site. This reduces the number of distracting outgoing links, especially in the menu. The only link here is to the contact + FAQ page which aids the checkout process. In one case study, removing the navigation increased revenue per visitor by 14%.

2. Current tab is darker than others

This tells customers what stage of the checkout process they’re in. However, the difference between the active/inactive tabs is not readily apparent.

3. No guest checkout

You have to create a password to checkout, which isn’t ideal. In one case, removing mandatory sign-up increased a retailer’s revenue by $300M.

After you enter an email address and hit ‘Continue’, you’ll see this page:

The Iconic checkout page 2

If your email address is new, The Iconic will tell you and ask you to enter a password (1). In case you already have an account, you can enter a different email as well (2). While not perfect, The Iconic does make the account creation process as smooth as possible.

After you make an account, you’ll see this page:

The Iconic checkout page 3

The Iconic combines the delivery and payment into the same page. This can be overwhelming for most users. There are 9 form fields, each of which requires a lot of information (credit card, address, etc.)

A few things to note:

1. Address type selection

The Iconic offers self-collection via ParcelPoint. However, this isn’t readily apparent when you land on the address page. Home/Work addresses are self-explanatory, of course.

2. “When” tells you when you’ll receive the order

This is the same as the delivery estimate on the product page.

3. The Iconic also lets you decide what to do in case there is no one to sign for your package

You can tell The Iconic to leave the package near the front door, away from the weather or at a specific point.

4. Payment information is very minimal

There is no “Name on Card” field or card type selection field (Visa/Mastercard, etc.). This makes the checkout process faster. Note the pre-checked box to remember the card for future purchases.

5. Newsletter subscription

There is a newsletter subscription incentive - $10 off on the next order. However, considering that The Iconic doesn’t promote its newsletter aggressively elsewhere on the site, this placement seems a little odd.

6. Order summary

Self-explanatory enough. Note the “Help” button conveniently located near the CTA.

 

What The Iconic does right:

1. Seamless checkout experience

The entire checkout experience is very smooth. There are no lengthy forms or confusion layout choices.

2. Account creation

Although a guest checkout option is sorely missed, The Iconic makes the mandatory account creation process as painless as possible by breaking it into two steps.

3. No distractions

By isolating the checkout, The Iconic assures that there are no distracting outbound links.

 

What The Iconic could improve:

1. Guest checkout

Not every customer wants to set up an account before buying. Offering guest checkout could reduce cart abandonment rates.

2. Breaking “Delivery” and “Payment” into separate steps

It can reduce information overload.

 

SurfStitch checkout process

SurfStitch’s checkout process is very different from The Iconic’s. While the latter is fast and modern, SurfStitch still feels something out of 2008.

Here’s the first screen you’ll see after you initiate checkout:

Surfstich checkout process

SurfStitch offers multiple checkout options, including guest checkout (1). The multiple CTAs here can be confusing to some buyers.

You also get an order summary (2). Note the contrasting colors of the forward-backward buttons here. After you enter your email address, you’ll see this page:

Surfstich checkout page 2

Here’s what you should notice:

1. Visible menu

This is a big red flag. Shoppers can easily get distracted and click away to another part of the site. Removing navigation and isolating the checkout process will likely improve conversion rates.

2. Checkout status

This section tells shoppers what stage of the checkout process they’re currently in. Also note the navigation breadcrumbs above it.

3. Shipping address is self-explanatory

Note the pre-checked “check if this address is also your billing address” box.

4. “FUD” section

This section doesn’t give customers anything to do; it serves solely to address customer FUDs. You can see payment badges, return policy, security seals and customer service numbers, all of which assure customers that their purchase is safe.

The next screen in the checkout process looks like this:

Surfstich checkout page 3

Again, nothing to note here. There’s just one selection to make - shipping method - and enter any special instructions (1). You also get a list of delivery rates (2).

One does wonder if this page could be folded into the previous “Shipping” screen itself.

Here’s the fourth step in the checkout process:

Surfstich checkout page 4

This is a very busy screen with 20 form fields.

1. Email address field

SurfStitch asked for an email address when you started the checkout process, which makes this field redundant. Shoppers have to enter the same information twice which is usually bad for conversions.

2. Payment method selection

The payment method priority here is rather confusing. It’s not clear what’s the difference between paying by credit card and “Visa Checkout”. Putting gift certificates at the very top of the list is also questionable since most customers would use credit cards to checkout.

3. Card selection process is lengthy

Thankfully, SurfStitch pre-fills the cardholder’s name with your shipping details. The card-type field can be done away with (or autodetected).

4. Billing address is prefilled with your shipping address

Showing the fields by default adds to the checkout process’ visual complexity. If the billing address is prefilled, it would be better to hide it by default and give shoppers an option to change it if needed.

 

What SurfStitch does right:

1. Guest checkout

SurfStitch gives customers an option to checkout with just an email address - a big plus for shoppers who don’t want to make an account.

2. Clear steps

Customers always know what stage of the checkout process they’re in thanks to the visual cue at the top of the checkout screen.

 

What SurfStitch could improve:

1. Shorter checkout

The entire checkout process has dozens of form fields and unnecessary steps. Making the process shorter could improve conversions.

2. Distracting links

Removing the navigation and footer links would reduce distractions.

3. Clearer payment options

Offer customers multiple payment options is good, but the way SurfStitch goes about it can be confusing. Prioritising card payments over others might reduce this confusion.

 

Social Media Marketing – The Iconic vs Surfstich

If you’re running a fashion store, social media is one of your most important marketing channels. Unsurprisingly, both Iconic and SurfStitch invest heavily in social media.

Here’s their social following across different networks:

 

Facebook

Twitter

Instagram

Pinterest

YouTube

Google+

Total

The Iconic

627,987

25,400

213,000

5,348

766

103,734

976.235

SurfStitch

461,722

7,887

89,300

2,086

603

58,414

620,012

 

As you can see, The Iconic has nearly 50% more followers than SurfStitch. Let’s see what kind of content they share on each social network:

The Iconic social media marketing

The Iconic’s social media marketing strategy focuses heavily on Instagram and Facebook. This makes sense since this is there most of The Iconic’s customers hang out (millennials).

The Iconic updates its Facebook multiple times a day, usually with image-heavy posts linking to its latest promotions:

The Iconic Facebook

The Iconic’s Instagram is even busier with several posts a day. These include brand and community focused posts as well as sales promotions.

The Iconic Instagram

Note how The Iconic asks its customers to tag their purchases with the #TheIconic hashtag.

It also uses a custom landing page to give its followers an option to shop products featured on Instagram:

The Iconic Shoppable Instagram

In contrast, The Iconic’s Twitter serves mostly as a customer service channel. The last update was over a week ago.

The Iconic Twitter

The Iconic has virtually abandoned Google+ (who uses Google+ anyways). Despite its over 100k followers, the last post was way back in 2014.

The Iconic Google+

Clearly, Google+ and Twitter are not important customer acquisition channels for The Iconic.

What about Pinterest? The Iconic seems to be using it mostly as a product catalog. Most pins are just product pins; there are no brand-focused images or Pinterest-specific graphics.

The Iconic Pinterest

Similarly, with just about 700+ subscribers, YouTube isn’t an important marketing channel for Iconic. Although it does update its channel with videos every week or so, most uploads get under 1,000 views - clearly not enough to justify a significant investment.

The Iconic YouTube

What The Iconic does right:

1. Hashtag campaign on Instagram

Which is a great way to collect UGC.

2. Instagram-specific landing page

Perfect for turning Instagram followers into customers.

3. Visual content on Facebook

Does a good job of promoting specific products as well as Iconic’s brand.

 

What The Iconic could improve:

1. Better Pinterest images

Instead of using Pinterest as a product catalog, creating some Pinterest-specific images might help The Iconic get more traction on this platform.

2. More Twitter updates

Twitter works best when you update it several times a day. Currently, The Iconic’s tweets are too few and far in-between and get lost in the stream. More frequent updates might help Iconic gain traction here.

3. Snapchat

A strong Snapchat presence is sorely missed.

4. Native Facebook videos

Rather than letting the videos sitting on their YouTube channel, it might be a good idea to upload the MP4 directly to Facebook; seeing that Facebook is clearly a better channel for them.

 

SurfStitch social media marketing

SurfStitch’s social media marketing follows a very similar pattern - heavy focus on Instagram and Facebook with Twitter and Pinterest serving mostly as support channels.

On its Facebook, you’ll see a mix of post-types updated several times a day. This includes photos, videos and even links to blog posts:

Surfstich Facebook

SurfStitch sees good engagement on its Facebook content. Its last video, for instance, had 17k views:

Surfstich Facebook 2

Its Instagram presence is similar to Iconic’s - several posts throughout the day with a mix of branded and promotional content.

Surfstich Instagram

Instead of the homepage or IG-specific landing page, SurfStitch directs followers to the latest issue of its “Swimwear Rituals” magazine.

SurfStitch sees pretty strong engagement on its Instagram posts. This post, for instance, had nearly 3k likes:

Surfstich Instagram 2

SurfStitch’s Twitter is scarcely updated. The last update was on the 2nd of January with a link to a Polyvore page:

Surfstich Twitter

With just 322 pins, SurfStitch isn’t particularly active on Pinterest. Most pins are not Pinterest-specific (images are mostly wide, not tall). At an average of 2-3 repins each pin, this isn’t an important customer acquisition channel for them.

Surfstich Pinterest

Its Google+ is similar - the last update was 15 weeks ago.

Surfstich Google+

Lastly, SurfStitch doesn’t update its YouTube too frequently either. It last uploaded several videos about 3 months ago. There has been no activity on the channel since. Not surprising since most videos don’t even break the 300+ view count.

Surfstich YouTube

What SurfStitch does right:

1. Visual Facebook and Instagram campaigns

They do a great job of promoting specific products and the SurfStitch brand.

2. Instagram-only contests

They get a lot of engagement.

 

What SurfStitch could improve:

1. UGC campaign

SurfStitch might benefit from a hashtag-focused UGC campaign on Instagram (like Iconic’s #theiconic campaign).

2. Shoppable Instagram page

A way to help followers shop the Instagram page should also be a priority.

3. More frequent Twitter updates

Just like The Iconic, SurfStitch needs to update its Twitter more aggressively if it wants to see more traction on this platform.

4. Native Facebook videos

Just like The Iconic, Suftstich has decent video content. It might be a good idea to “make the content work” for them in different channels - in this case, Facebook. Not to mention that video posts have 135% greater organic reach than photo posts.

 

Conclusion

SurfStitch and The Iconic are both iconic brands (pun intended) when it comes to fashion retail in Australia. While they are largely similar in several aspects, they also differ greatly, especially in their checkout experience. There are a lot of bits and pieces that other eCommerce sites can follow from each. Especially The Iconic’s checkout experience, which we all know, optimising checkout process is a BIG deal in eCommerce business.

In terms of social media, Facebook and Instagram are clearly the winners, though the lack of a Snapchat presence is puzzling. With their marketing power, they could easily share their behind-the-scenes snaps or offer a Snapchat-only deal.

The takeaway for retailers is simple: focus on Instagram and Facebook, don’t mess with the tried-and-tested homepage/product page layouts, and offer the smoothest possible checkout experience. Did I miss anything? Do you have anything you want to add? Leave your comments below.

Related reading17 Insanely Practical eCommerce SEO Tips to Increase Organic Traffic

Leave a comment