The homepages on the two sites take similar approaches with large images promoting the various product categories.
Primary navigation options are simple and stripped down on both sites, with seven top level categories on Tommy Bahama and just five on Abercrombie & Fitch.
This has been a recent trend for some ecommerce sites, many of which used to cram many different product categories in.
As Ben Davis pointed out recently, the thinking behind this simplified navigation is to reduce choice paralysis and get customers started on their journey.
It also has the effect of making retailers think hard about the sections they want to prioritize.
So we can assume that the ‘big & tall’ and ‘fan gear’ links on Tommy Bahama reflect the popularity of these categories, as well the fact that Abercrombie has a link for ‘jeans’.
- For both sites, make the site search box more visible to help people to find the search option more easily.
Site search should provide a faster option for shoppers to find the items they’re looking for, or as an alternative to browsing.
Some estimates put the average site search use in ecommerce at around 15%, but this can vary a lot between sites, and can depend on factors like the prominence of the search box and how good the search function is.
Visitors using site search also have a greater propensity to convert, as entering products into the search box indicates a strong intent to purchase.
For retailers, it makes sense to optimize site search to ensure that these users can find that they’re looking for.
Both sites here haven’t made the search box stand out, using the magnifying glass icon in the navigation bar rather than a more prominent search box.
If either site wanted to encourage more site search use, then a box as deployed by ASOS would draw shoppers’ attention to the function.
Tommy Bahama’s search uses autocomplete, suggesting possible matches as the user types a search term.
This is a useful feature as it can help the shopper find the right result more quickly, and can help to reduce errors and serve up more relevant results.
Unfortunately, no results were found for my search, though there are plenty of blue shirts on the site.
This is perhaps a blip as similar searches produced results, but it’s always a good idea to give users somewhere else to go (such as inviting them to search again) rather than a dead end.
Search results for other terms are well presented, with useful filter options to narrow down the product selection.
Abercrombie doesn’t use autocomplete but results are accurate and well presented. Lots of filter options enable users to narrow searches like this which return a larger number of results.
I also like the quick view option, which shows users alternative images, size availability, and provides a faster option to add items to the shopping cart.
- For Tommy Bahama, monitor site search data to identify and improve on searches which return no results.
- For Abercrombie, consider using autocomplete to improve site search accuracy.
This is where much of the decision making happens, so product pages need to provide all the information – text and visual – that customers need to decide on a purchase.
For fashion retailers, returns rates are often high, simply because customers are unable to try before they buy. To compensate for this, and minimize returns rates, its important to provide images and key information around products.
Sites need to show multiple images so shoppers can see clothing from various angles, and these images should be zoomable so people can see details.
This is something both sites do well. Here’s an example from Tommy Bahama.
Mobile users require the same number and quality of images. Here Abercrombie & Fitch shows six different images, all of which can be zoomed in.
Context is also important. For example, if shoppers are viewing a dress on a model, it’s good to know the height of the model and the size worn.
This can also be used in reviews. Reviews are a great feature for product pages anyway but the data on reviewer height and their opinion on the fit adds extra value.
Details on materials and features of clothing are also important. Here, Tommy Bahama lists these in a readable format underneath the product image.
Note also the links to returns and shipping information. These are key factors in the purchase decision and it therefore makes sense to place this information on the product page while customers are considering a purchase.
On Tommy Bahama, the detail on shipping can be opened up on the page and easily closed. There’s no sense in taking customers away from product pages.
Both product pages display products and convey key information well.
- Both sites could consider the use of product videos, which can aid conversion by showing products more effectively.
- Key selling points such as Abercrombie’s free delivery over £75 offer could be highlighted more effectively.
Shopping Cart / Checkout Process
Even is customers have had an excellent experience on site, the checkout process can throw up obstacles which can cause shoppers to abandon their purchase.
Once customers arrive at checkout, it’s about removing any friction from the process and ensuring that they can complete payment easily.
First of all, the shopping cart page should act as a gateway between product pages and checkout. It should:
- Confirm the items in the customer’s order and the total cost.
- Allow shoppers to edit the contents of the basket.
- Answer any questions customers may have at this stage, such as delivery costs and times.
- Move customers into the checkout process armed with all the information they need.
Both retailers keep their shopping cart pages relatively simple, with plenty of white space.
This allows the key information to stand out, as well as the call to action which sends customers into checkout.
Abercrombie’s cart page has a useful live chat option which appears after a period of inactivity on the page, a useful prompt for customers who my be having second thoughts.
It also highlights the promo code box, allowing customers to enter their code before checkout.
If you are actively using codes as part of your marketing, then this is great for those customers with codes. However, if customers without codes see this box, it can make them wonder whether they are missing out on a better deal.
The natural response for some shoppers will be to search online for a promo code they can use. The worst case scenario for the retailer is that they fail to return to complete the purchase.
On to the checkout itself. Both retailers offer guest checkout, with the option to create an account later. This approach avoids the risk of creating a barrier to checkout through forced registration.
The slight difference between the two approaches is that, while Tommy Bahama sends shoppers to the above page from the shopping cart, Abercrombie sends shoppers straight to the checkout form.
Abercrombie’s approach differs from Tommy Bahama in another way. It uses a single page checkout, while the latter opts for a multi-page approach.
There are arguments for and against each approach. For the Abercrombie & Fitch one page checkout, the single page removes the need to load different stages, and can make checkout forms faster to complete.
In addition, shoppers can see exactly how far along the form they are, and how many fields they have left to complete.
On the flip-side, showing the entire form on one page can look cluttered, and a longer form could deter some shoppers, as it may seem like hard work.
Multi-page checkouts, as used by Tommy Bahama, also have their pros and cons.
For one, by dividing the checkout into more manageable chunks can make it seem like lees of an effort for shoppers.
It also enables retailers to collect email addresses from customers if they complete the first stage or two of checkout before abandoning later.
This enables retailers to send cart abandonment emails to people who leave the site before buying, as Tommy Bahama has done.
The separate steps of a multi-page checkout can also make it easier to track customer behavior through the purchase funnel.
For example, using Google Analytics on a multi-page checkout, it’s easy to track abandonment rates at any point in the process.
There’s no right or wrong answer here, it’s a question of which approach works best for your site and customers, and this is something which would make an excellent A/B test.
Beyond the one-page vs multi-page debate, both checkouts are well enclosed, with links and distractions removed. This helps shoppers to focus on completing the checkout forms.
When shoppers do abandon checkout, this doesn’t have to be the end.
People abandon checkout for various reasons, and they can often be tempted back with a reminder of the items they were thinking about buying.
I abandoned both checkouts, but only Tommy Bahama sent a cart recovery email, around 24 hours after abandonment.
- Use shopping cart pages to convey key information on shipping and delivery more effectively.
- Test different approaches to the promo code box. For example, making it less visible (opened via a link for example) could reduce the risk of abandonment.
- Testing different send times and intervals between abandonment and the first recovery email can help to improve performance. For example, we find that emails sent within an hour of abandonment can generate the best response.
- Offer a wider range of payment options. Preferences around payments change, and it can pay to appeal to shoppers who might prefer PayPal or some other method to card payment.
Speak to an expert
Learn how to convert your online audience into revenue with our experts.
Graham Charlton is Editor in Chief at SaleCycle. He's been covering ecommerce and digital marketing for more than a decade, having previously written reports and articles for Econsultancy. ClickZ, Search Engine Watch and more.