martes, 4 de junio de 2013

Jaeger's ecommerce site deconstructed: 5,000 words in 17 key areas

Jaeger has relaunched its ecommerce site for the second time in 12 months.

It's slightly unusual for a brand to do that: relaunching is a big, complicated, risky, time-consuming task, so most retailers tend only to relaunch every few years (often less, sometimes never).

Here's a quick 5,000-word overview of the current status of the site, and the opportunities to optimise results based on Jaeger's new foundation.

Based on that I thought it would very much be worth taking a look at what Jaeger has done, and the current status of the site. Below I've included my notes on that, in case they're of use to you, broken down into 17 sections. 

jaeger homepage at 1920

Content

This little overview is broken down into the following 17 sections:

  1. Background
  2. Technology
  3. Navigation
  4. Navigation labeling
  5. Homepage
  6. Category page
  7. Subcategory Page
  8. Product page
  9. Product sidebar A/B test suggestion
  10. Product page copy
  11. Product page size guide
  12. Product page 'add to bag'
  13. Site search
  14. Ancillary pages
  15. Basket page
  16. Checkout process
  17. Further checkout info & oddities

I'm not going to cover any marketing stuff (eg. social/seo/ppc/retargeting/email/affiliate/etc) but will mention a couple of bits that stand out in passing.

1. Background, caveats & context

I don't work for (and have never worked for) Jaeger, and I don't think I know anyone who works there, but I have worked on 40 or 50 other fashion ecommerce sites over the years, so I know the market quite well.

As a fairly big caveat, when doing this for a client I would always have access to their analytics stats, and would usually carry out user tests & customer gather feedback too. The info below is all from an 'outside looking in' perspective.

As context, here's a 'search volume' graph for the word 'jaeger', showing that they grew nicely between 2007-2011, before plateauing slightly since then:

jaeger search trends

As further context, Jaeger has around 100 physical stores, and Econsultancy has looked at them before, here was David Moth's review of the last relaunch.

2. Technology

The site is quite 'light' on technology. Whereas some sites you'll see dozens of third-party plugins & tracking technologies, on Jaeger there is relatively little. Here's a breakdown of a few of the technologies running on the site:

  • Ecommerce platform: The site is built on Demandware's ecommerce platform (along with Demandware's built-in analytics tool). Demandware is one of the big ecommerce platform vendors, with clients like Mothercare, House of Fraser, The Limited, etc.
  • Analytics: The site uses a relatively up to date version of Google Analytics, and has added some custom tagging. (eg. it's using a custom variable to store the fact that I'm browsing in GBP, Jaeger tracks an event on the cart page recording the value of the items I've got in the cart, etc. It looks like Jaeger has a good web analyst who has thought lots of this through quite nicely).

    There are a couple of outdated bits here - some old tagging mixed in with the new, and there are some pieces of Google Analytics functionality it's not taking advantage of, but they're already doing more than 90% of ecommerce sites with the sophisticated bits they've added on top of the standard implementation.

  • Social plugins: Product pages use standard Facebook/Twitter/Pinterest widgets for sharing. It is also using 'AddThis'. I'm a bit less keen on AddThis, as it tracks lots of odd info that I'm never sure whether site owners realise it's recording.
  • A/B Testing: Demandware offers AB testing. I didn't spot this being used across the site, and there don't appear to be any third party A/B test tools running on the site.
  • Retargeting: I didn't pick up on any retargeting tags. A few years ago that would be fairly normal; today most sites use retargeting tools. (worth noting Google Analytics has a fantastic set of Retargeting tools - also not being used here).
  • User journey analysis: Other than Google Analytics, there don't seem to be any journey tracking tools (ClickTale, etc).
  • Recommendations: Jaeger doesn't seem to be using third-party product recommendation/personalisation technology. (Peerius, Predictive Intent, Barilliance, etc)
  • Basket abandoment: No sign of SaleCycle or any of the other basket abandonment tools running. I abandoned a basket & did not get an email within a few hours.
  • Site search: As with other elements - they seem to be using the 'out of the box' demandware site search.
  • Live chat: Nothing running as far as I could see.
  • Feedback: Nothing running here either as far as I could see.
  • Reviews: I spotted some references to Power Reviews in the code of the site, but didn't spot any actual reviews on the site.
  • Content delivery network: The site is using Akamai (I think this is standard for Demandware to be honest).

I'd mentioned I'm never quite sure about AddThis - here's why (from their privacy policy):

addthis privacy info

Totally fine if you realise that's what's going on, but I'd be surprised if many people realise AddThis do that. 

3. Navigation

top nav

Most ecommerce sites now use a fairly standard navigation pattern. Here's the standard:

  • Top navigation has 'departments' or 'categories' visible at all times. Moving the mouse over these shows a dropdown menu containing the next levels down within those departments/categories. (ie. a 'mega menu').
  • Clicking a top level category link takes you to a category page, containing a list of subcategories down the left, and images representing those subcategories in the 'content' area of the screen. Sometimes they pick out a few highlight items there too.
  • Clicking into a subcategory usually shows a product listing or 'grid' page. Down the left, you usually now see 'attribute filters' so that you can narrow down the list of products you're looking at by (eg) colour, size, material, range, etc.

In Jaeger's case they've differed from this. Here's what it has done:

  • Categories sit across the top, as you'd expect. But there's no 'mega menu' - no drop down list of subcategories beneath each.
  • Category pages list subcategories down the left; no products merchandised in the centre, but a list of current promotions.
  • Subcategory pages do not contain any filtering mechanism down the left hand side. On subcategory pages you simply get the list of subcategories down the left. There are very subtle 'filter by colour/size/price' filters tucked away above the products on these pages.

4. Navigation Labeling

Product Navigation:

The top 'product' navigation is pretty good, with the standard 'Men' / 'Women' / 'Accessories' sections.

Alongside that, it has the following:

  • 'New' - really useful for loyal customers who check back regularly. Lots of ecommerce sites miss the fact that these people exist. This is one of the reasons sites like ASOS, NastyGal, etc are so successful: people who like fashion check back regularly looking for updates.
  • 'Jaeger London' - I think this is a bit of a higher end range. One risk with things like that is people worry whether "if I'm in the women's section am I also seeing all of the stuff from Jaeger London?" - you often see people check bits like this in User Tests. In this case, all of the 'Jaeger London' stuff is also present in the gender/accessories categories, which is very sensible.
  • 'Boutique' is a bit of a younger range. Again, I had to click it & take a look around to figure that out. Perhaps Jaeger could highlight what it's about a bit more on the homepage, or perhaps it's not a bad thing to allow people to find their way around some parts of the site.
  • 'Outlet' is the fashiony way of saying 'Discount' or 'All Year Sale', without having to actually use either of those uglier labels.

This is all very straightforward, which is a good thing.

'Non-product' navigation:

The footer is fairly standard, albeit it is pinned to the very foot of the page no matter how long the content. Sometimes that means you get an odd long gap between content & footer, but that makes no real odds.

The footer contains 'about', 'legal', 'delivery', 'returns', 'help centre', 'trunk show' (?), 'loyalty card', and 'careers'. I'd expect that 'careers', 'delivery', and 'returns' would get the bulk of use there. There are also the standard 'social' links in the footer, pointing to their instagram/pinterest/youtube/twitter/facebook pages.

The top navigation contains 'Store Finder', 'My Account', 'My Bag', and then - slightly oddly - a very tiny email icon & a very tiny magnifying glass:

  • The email icon actually means 'sign up to our email newsletter'. (I thought perhaps it was 'contact us').
  • The magnifying glass is (obviously) 'search'. It's so inobtrusive that it's really easy to miss - especially if you're in the mindset of looking for a 'search' box, rather than an icon.I totally missed the magnifying glass at first.

90% of ecommerce sites include 'search' as a search box rather than an icon, and it's almost standard in the UK. I'm not sure why they'd do this, and it would be really interesting to take a look at the stats to see if this negatively impacts results.

5. Homepage

The homepage looks pretty striking at a 1024x768 resolution:

jaeger homepage at 1024

It looks slightly odd at a much larger resolution (1920 pixels wide here):

jaeger homepage at 1920

That's not such a bad thing, but here's how Burberry handles those two resolutions as a comparison:

burberry at 1024

Burberry at 1920:

burberry at 1920

Very nice, eh?

Back to the Jaeger site, the imagery on the homepage (as well as across the rest of the site) is a little fuzzy. Here's an example, comparing the model shot on their homepage vs the model shot on Pull&Bear's website. Note the sharpness of the other image:

jaeger v pull and bear sharpness

In case you still can't see that, here she is unsharpened (left) vs sharper (right). The image itself is a little messy, so there are artifacts here:

messy

This is a tiny thing, but it's the type of tiny thing lots of luxury fashion brands would go crazy about. 

6. Category Page

On most ecommerce sites, 'category' pages get less use than you might expect. Many people dive direct from the top navigation to the subcategory they're interested in (eg. 'women's shoes' as opposed to simply 'women').

In Jaeger's case that's not possible. As mentioned earlier, there's no drop down on the top navigation, so to get to a 'women's' subcategory you have to go through the 'women' page.

Here it is:

jaeger category page

As you can see there - it's a model shot just like the homepage. Promotions are nudged in the content area, and the subcategory navigation sits down the left. There's no indication by looking at it, but clicking the model herself takes you to the product page for the dress she's wearing.

This is really an intermediary page, but at least it has the promotional notes that otherwise you may miss.

From an SEO point of view:

  • There is zero category specific text on this page. The page <title> itself has been optimised for "Luxury Womens Fashion", but there is zero page-specific text on the page itself. All of the textual content is simply the navigation.
  • You'll also notice there's no "Home > Women" breadcrumb there. That's not always a bad thing, but it does help users & search engines figure out the structure of a site, even if they've landed on a page several levels deep.

7. Subcategory Pages

Subcategory pages are simple grids of products:

Jaeger Subcategory

There are a couple of nice touches there:

  1. Note the simple 'exclusive' flag on the first product. It's nice to be able to pick out individual products & differentiate like that.
  2. When you roll over an image, it does that nice thing where they flip the image to back view. This was a rarity a couple of years ago, it's a bit more commonplace now. Some retailers flip to little animated gif movies when you rollover which would be a nice extra touch they could add if they had the time/inclination.

There are some oddities too:

  1. Despite the tiny flag highlighting that single product, there's no 'logical first click' here. It would be useful to test that - a pullout product that appears larger, or perhaps flip one of the products to the model shot as standard. (the model shot in the grab above is due to me hovering my mouse over it).
  2. There are 15 products visible there. If you look closely at the 'view all' it says there are 19 products in total. ie. clicking 'next' shows you just four more products. There are examples of that Most of their subcategories only have a couple of dozen products. I'd have therefore been inclined to either set 'view all' as the standard, or to display 25 or 30 products as standard at least (for example, ASOS show 5 rows of products as standard).
  3. The 'filter' info is tough to spot. Moving a mouse over most of it doesn't flick the cursor to a hand either. You may say "who cares?" to this, but on other sites filtering acts as a sales optimisation tool as well as a handy function: when users filter, they are usually far more likely to buy; where filters are moved from being 'subtle' to 'prominent' and their use increases, that pattern often holds true.
  4. Once again, there's no breadcrumb here.
  5. Again - as with the category page - there is zero text here.

Here's another subcategory page, showing how it highlights promos:

subcat promo

Highlighting promos like that is great, but the copy is 1) pretty hard to read (caveat: i'm fairly old, so that may just be me) and 2) it's an image, meaning there's still no actual copy on the page.

The 'no copy' thing is a shame from an SEO point of view. Here's the very top section of an ASOS subcategory for comparison (products appear below this):

ASOS tops

Think about that ASOS example for a second:

  1. It works well from an SEO point of view.
  2. It works well from a 'conversion' point of view.
  3. It allows you to narrow down (admittedly, far more products on ASOS than on Jaeger so more requirement to narrow).
  4. If you've just landed on that ASOS page having never heard of the brand before, it welcomes you to the site and gives you immediate options. (imagine landing on that Jaeger subcat page having never heard of them)
  5. There's a pull out feature spot on the right there nudging you to a 'Top 10 T-shirts' page. (they could just as easily mention promotions/etc there)

8. Product pages

The 'product page' is the heart of most ecommerce sites. Every buyer will see a product page, and the product page is the tool that must convince them that a product is good enough for them to decide to purchase, and to hit the 'add to cart' button.

Old product page:

Here's how Jaeger's product page used to look (via David Moth):

david moth - jaeger product page

As David Moth said in his review of the site at the time, the product page contained a decent amount of product information, but the text size was tiny & the 'add to bag' button was a bit lost.

New product page:

Here's an example of a product page on the new Jaeger site:

jaeger product page

There are some bright spots there:

  1. Very large images. That's usually very good, especially for fashion sites, and the image quality is much better here (though the photographer is probably going mad over the gradienting in the background, and the floor not being level).
  2. Multiple images. Again, this is important. In users tests - particularly on fashion sites (and even more so on women's fashion sites, when both men & women are buying), purchasers always click through multiple images convincing themselves this is the right product to buy.
  3. There is space to highlight promos. (albeit fairly oddly placed).
  4. There's a size guide there, fairly close to the 'size' area. This is pretty crucial. If you go through the stats for any large fashion site, you'll see a good proportion of purchasing visits include a look at the size guide.

But there are also a few oddities:

  1. No visible product copy again. This isn't always crucial, but I'd definitely test it if I was running the Jaeger site.
  2. No product reviews, or review functionality visible.
  3. No product video. Not essential, but becoming 'standard'.
  4. Take a look at the 'Add to bag' button. Note that it is the single most important feature on the entire site. Now note that it is the least prominent item on the entire page. The reason they've done that is that it's faded out until you've selected a size & quantity, but I still think it's madness to actively hide your 'add to bag' button.
  5. The 'size' & 'quantity' items themselves. Why not default to '1' quantity? Why not highlight the 'size' box a little if it's the first thing you want the user to click? And the size guide itself doesn't work when clicked - you have to reach for the tiny icon beside it.
  6. Duplicate content. Not noticeable here, but Google contains quite a bit of duplicate content from product page colour variations.
  7. The product recommend / recently viewed area. I doubt many notice 'recently viewed' is there, and the recommendations themselves could be a bit less subtle. Worth also noting: All of the product recommendations across the site appear to be 'complementary' products rather than 'alternatives'.

    There's varioius research that shows visitors are far more likely to seek 'alternatives' from product pages & tests I've done myself have shown that to be true.

  8. No breadcrumb trail. Again, a minor note, but something that helps both search engines & users. See the small 'X' toward the top right of the above screengrab? That is a 'back button'.

9. The product page sidebar reworked

Here's what I'd do to their sidebar if you told me I could run a straight A/B test on it, but could neither add nor remove any elements from the page. I'd move the 'share' icons underneath the product image, along with 'product code' & 'collection'.

I'd then do the following (current version on the left; my version on the right):

 reworked product sidebar

(Note: I haven't changed the price field there, but that's actually the 'before 20% off' price. The price you actually pay is £79.20, but they don't highlight that fact in any way on the product page)

10. Product page copy

Again - as with the rest of the site - on loading any product page, there's zero visible copy which is a shame. Note the 'product details' accordion in the last screengrab  - it's closed as standard and the text within is tiny. In the 'reworked sidebar' above you'll see I'd pulled out their copy - still it is very succinct, and doesn't give much detail or speak with any enthusiasm.

As a stupid, overblown example of the effectiveness of product copy, here's the copy on a roughly equivalent pair of pants from J Peterman:

j peterman product copy

11. Product page size guide

The 'size guide' is fairly crucial, especially for new customers, or customers buying a product type they haven't previously purchased. Here's the size guide on the above product:

jaeger size guide

I was fairly pleased with that & it didn't take long to figure out how long the 'L' in '32L' was.

Here's the women's size guide for tops, which again takes a few minutes to decipher & could be cleaner, but is far better than many I've seen:

women's size guide

12. Product page 'add to bag'

Once you've chosen a product and clicked 'add to bag', here's what happens:

add to bag

As with the size guide, that's fairly straightforward, but:

  1. There's no 'Go to checkout' option, you're forced through the bag itself.
  2. The page already contains 'you might also like' items. Why not promote those at the point that someone adds a product to the bag? (especially as they're all 'complementary' items rather than 'alternatives').
  3. Again, there are several discounts applied in the above screengrab, but there's no way you'd know it as they don't tell you.

13. Site search

Site search is fairly basic. That would be an issue on a large, multi-thousand SKU ecommerce site, but it's probably fine for Jaeger as its range is relatively small.

It uses exactly the same template as the 'category' page. Here's a search results page for 'blouse':

Site Search

Again, it's odd that the filters there are so subtle (see them above the products?). And again, I'd probably run a straight A/B test on all category/search results pages pitting these '15 products per page' versions against 'view all' versions by default.

Again, I think it's a mistake hiding search behind the tiny magnifying glass you see top-right on the screengrab there, and a double mistake not to allow you to modify the search term easily (you have to reclick the magnifying glass & enter a new search term there).

The search functionality:

The search functionality itself is basic too. A search for 'trousers' returns 135 results, yet here's the complete set of results on a search for 'pants':

jaeger pants

Note it hasn't treated 'trousers' as a synonym, there's no suggestion for related search terms, etc. I'd probably monitor that, and put in a simple process looking at the top 50/100 search terms every so often to check results were sensible & modify things if not.

No results:

And finally here's the 'no results found' message:

no search results

That at least offers a path forward and (for the first time) displays a search input box directly on the page. A simple addition there may be a standard 'product suggestions' block underneath the search box, and a link to popular categories.

14. Ancillary pages

There are plenty of 'ancillary' pages on the site, giving info around returns, delivery, etc. Here's their 'returns' page for example:

Jaeger Returns Page

This is really important "should I buy or should I not?" content. If anyone looks at the above, they're in a position where they want to buy, but are wavering. While it's great that the content is there, and easy to reach, there are some easy to fix issues there:

  1. There's no differentiation between links & text.
  2. The text is fully justified. That makes it virtually impossible to read with any level of comfort.
  3. It's a solid block, with no line breaks. You basically have to read that entire block of text to find out whether you've understood it or not.
  4. (Not visible from the above) - there are no calls to action or 'continue shopping' links on any of these ancillary pages.

No doubt Jaeger has been super-busy with the relaunch itself, and this will be on a list of 'fix this' stuff for post-launch. If not, it would be worth adding these pages to the to do list.

15. Basket page

The 'basket page' is actually really good from a 'best practice' point of view. Here it is (I've opened up the top 'edit details' section on the yellow top, to show how that functions):

basket page

There are some minor tweaks you could make to that (eg. include delivery info directly in the page; perhaps make the 'discount code' box a little more subtle; perhaps add 'paypal' to see whether it brought incremental sales).

But, if you are a retailer looking for a good example of a 'best practice' basket page to copy, the above is pretty close.

16. Checkout process

As with the 'basket' page, the checkout process if fairly good from a 'best practice' point of view.

Old checkout page:

Here was the old checkout page (courtesy of david moth):

david moth - jaeger checkout

That wasn't too bad - odd that it was billed 'my account', and odd that 'guest checkout' was nudged way down the page.

New checkout page:

Here's the new version of the page:

jaeger checkout

This follows most of the standard checkbox 'do this stuff' best practice advice:

  • It offers 'guest' checkout (albeit still gathering an email address without explanation).
  • It removes the top navigation to try and nudge people away from reversing out of the checkout.
  • It places the phone number prominently just in case.
  • It reassures on basket contents.
  • There's a simple 'forgot password?' option.
  • It's clear where you are in the checkout (albeit it looks like a fairly lengthy process.
  • There's a 'secure' symbol fairly prominently displayed.

There is an argument to say you could simplify this further, that you could reiterate payment options, and that you could add extra reassurance (particularly around taking the email address from 'guests'), but really those are things to test (or to go through the numbers to see whether it's even worth testing) rather than dogmatic 'it must be like this' options.

Here are a couple of alternate ways people handle the 'form' element of this itself, for context:

From Baker Ross

baker ross checkout

From Sweaty Betty:

sweaty betty checkout

17. Further checkout info: nice bits, errors, and critical errors

The 'delivery details' page gives you the option to collect from store vs to buy online. As a nice touch, they hide all of the more granular options until you've chosen from those.

This page works well if nothing goes wrong. Sadly, there are a couple of nasty bugs. Here's the first one - triggered by updating basket details:

broken jaeger

There are a couple of nice touches at this stage. Firstly the friendly 'count'/'countess'/etc titles in the delivery details form:

count

Secondly the simple reassurance that all's going well as you move through the form:

reassurance

The critical error.

The 'critical' error I managed to accidentally trigger was this:

critical error

Once you're in that position, there's no way to enter the details that you're 'required' to enter. The only way to continue is to reload the page. I went through the process 3 times & only hit this once; still, worth investigating.

Yet another error

Yet another error occurs in the 'mini basket' that displays throughout the checkout process. Take a look at the subtotals here, and count whether they match up to the overall total:

error 3

The issue here is that discounts don't display at a line level, but do apply to the total. That may not be an enormous issue, as it looks like you're accidentally getting a much better deal, but confusion at this stage often means lost sales, or an increase in customer calls.

Another big oddity: PayPal

If you've been reading carefully & paying attention to the screengrabs, you'll have noted that Jaeger doesn't offer PayPal as a payment method.

If you manage to reach the actual 'payment' step on the site, you eventually find that that's not the case. It does offer PayPal, although it utterly hides the fact until you reach the point where you actually have to place payment details.

Even at that stage, as you can see from the image below, Jaeger includes a whole host of Visa logos, and a 'Solo' logo (solo was decomissioned in march 2011), but nothing to indicate PayPal.

PayPal jaeger 

The last site I tested it on, adding PayPal and advertising it promintently prior to checkout increased 'new customer purchases' by 14%. Jaeger has a very different audience to that particular site, but still I'd shout about this a bit more, especially as many users will be browsing on tablet/mobile where keying in credit card info is a pain.

Summary and double caveats

That's it - a rough overview of some of the features of the new Jaeger site.

Reiteration of caveats:

Just to double-underline & caveat things: When working for a client I'd normally have access to analytics accounts, and would often run user tests, perhaps surveys, crawl the site using Screaming Frog or Xenu, etc.

As a result, this look at Jaeger is purely an 'outside looking in' picture, without any idea of particular motivations, targets, limitations, optimisation plans, or the organisational setup of Jaeger.

Summary of the site:

As you've probably picked up through this, the site itself is a mixture of 'bright spots' & 'opportunities'.

I don't know why it chose to relaunch the site twice in a year, with a range of 'reinvented' pages, rather than tweaks, but if I was Jaeger I'd now focus on optimisation.

There is a good foundation in place here to optimise, and it's notable that you could improve things fairly quickly with the addition of a few third-party tools, and a good testing & optimisation programme.

If I was going to focus on improving this, here's where I'd focus first:

  1. Product page - this feels as if it hasn't really been tested from a user point of view.
  2. Checkout process & pricing - iron out the oddities & errors throughout the checkout process.
  3. Pricing - iron out the odd missing information around discounts. It's clear they're focussing on promotions as a sales tactic - not good that the tactic is hampered by many of the products appearing to be more expensive than they actually are.
  4. Communicating brand & benefits across the site - I hadn't picked this out specifically above, but if you look through each of the screengrabs, you'll see that there's not much of a 'Jaeger' voice on anything. Other than the specific product promos & the 'free worldwide delivery' note, there's nothing to welcome a new potential customer to the brand & answer the "why is this for me?" question.
  5. Content - I know everyone says 'focus on content' constantly, often when it's not true. In this case there is virtually no text on any page on the site. Initially I'd test that on 'subcategory' pages. I'd also pick out the top 40 products & add much better copy to 20 of them. I'd then compare any uplift in performance vs the other 20 to figure out whether that's a tactic worth pursuing.
  6. Site Search - I'd take a quick look at "uplift in conversion where visits include use of site search" on the old site. I'd then compare "volume of visits including site search" on the old site vs the new site. If the numbers looked good, I'd flip the odd tiny magnifying glass for a full 'search' box & monitor for any uplift.
  7. Ancillary Pages - All of the 'delivery', 'FAQs', 'returns' pages are pretty horrible at present. I'd probably get on to cleaning those up immediately.
  8. Video - as with the product suggestion above, I'd trial this on a range of product pages.
  9. Mega menu - it would be a really, really easy A/B test to run the current top navigation vs a 'mena menu' with dropdowns, using Visual Website Optimizer or Optimizely.
  10. PayPal - as mentioned - they accept PayPal, but they don't tell you that. I'd highlight that much more, and earlier on, and watch for the impact with 'new' customers particularly on iPad/tablet.

Surrounding all of that, I'd put together some key numbers & benchmarks to monitor, and a simple optimisation plan.

Do feel free to leave any comments below, particularly around what you think is good/could be improved across the site, and where you might begin to optimise it.

No hay comentarios:

Publicar un comentario