Homepage

Here’s how the original Fallen Hero website looked on a desktop:

It’s not terrible, but with way more text than necessary for an ecommerce store’s homepage and images that provide only a tiny glimpse of the products on offer, this already feels like a cramped and ill-thought out site, way before you’ve even begun to look at it on a mobile.

Here’s how the new responsive site looks on a desktop:

There’s a huge carousel with large images, clear category tabs at the top of the page with a shopping basket and the unique feature of showing a running total. 

Three important delivery features are highlighted below the logo: free next day delivery, free UK returns and click & collect. Then just above the fold you can also see direct links to the most popular clothing options.

Here’s how the desktop shrinks to fit mobile:

The category tabs eventually collapse down to a single menu button, the shopping basket remains and the carousel is still large and clear. Across the bottom are social buttons and an email subscription service.

One of the positives that the mobile version has over the desktop is that on the desktop the social buttons and email sign-up are hidden on the very bottom right hand corner, below the fold. With a simple bit of repositioning Fallen Hero could easily increase its followers and subscribers throughout its various channels.

Search

Finding products is a simple ‘menu’ tap away, revealing options for brands, categories, featured sales and a search button.

Fallen Hero isn’t going to win any awards for vibrant design with this menu, but the matter-of-fact greyness perhaps appeals to the gentlemen most likely to browse here.

Improvements could certainly be made to the search function though. It’s difficult to find and fiddly to use. For the input field there are no options provided as you type, which means you have to spell the whole word, and correctly too as it doesn’t forgive you for misspelling.

A search box featured directly on the homepage is integral, especially for mobile customers who are more likely to be either rushing to find something or in a location where it’s difficult to input text, so this is a bit of an oversight. The large carousel image on the homescreen may look great, but I wonder if the space could be used to better effect.

Product listings

Hey it’s Christmas, let’s buy a cardigan.

This is a well-designed product page. Just two large images per row, with nearly four cardigans displayed per page. The menu and shopping basket total remains at the top of the screen at all times.

The individual product page itself shows the cardigan in a larger detailed image, and provides you with multiple views by swiping across the screen.

Scrolling down reveals clear options for size and a great feature for changing the product’s colour that shows you alternatives in tappable thumbnails.

Also note the bright call-to-action button, and the slightly more boring information is hidden in easily accessible, collapsible menus.

Shopping basket/checkout

The shopping basket has clear delivery charges, important as many shopping baskets are abandoned when shipping fees are hidden as a nasty surprise at the end. There’s also a button to change the default next-day delivery option.

The shopping basket also coveniently occupies the same page as the checkout. By scrolling down you’re immediately presented with method of payment. 

Here there’s a PayPal option that provides added convenience and speed for the shopper.

It’s a shame that the ‘Order Line’ option isn’t a click-to-call button. You’d have to copy and paste the number in order to make a call.

After this, there are large input fields to type your name, address and card details, and that’s it. Email subscription is also an opt-out function during checkout.

The shopping basket and checkout service is one of the quickest I’ve experienced. 

Fallen Hero could do with asking for a password once the transaction has been verified though. This way the user’s details could be stored with their permission and it will encourage those customers to purchase from Fallen Hero again, as the experience will be substantially quicker next time.

Minor gripes aside, the website has only been active for less than two weeks, and things like this can be ironed out reasonably quickly. In fact, the site redesign is showing signs of great success…

Stats

Since the responsive redesign, Fallen Hero has experienced the following uplift:

  • Overall site visits increased 7%.
  • Page views up 37%.
  • Visit duration up 36%.

For mobile, things are looking strong: 

  • Visits up 7%.
  • Page views up 16%.
  • Visit duration up 21%.

For tablet, the increase is even more pronounced:

  • Visits up 14%.
  • Page views up 61%.
  • Visit duration up 64%.

New visits to mobile have also increased by a huge 76%. So what accounts for this? The team at Fallen Hero suggest it’s down to “better search positions in mobile and tablet search markets”.

Fallen Hero has also strengthened its relevancy across the board, as there’s now only one site used across all devices rather than having a separate mobile site on a subdomain, which Fallen Hero claims “leads to a weakened domain authority”.

Is this increase in traffic leading to higher conversions?

  • Overall, conversions are up 18%.
  • On mobile conversion is down 13%, but this is due to the rise in mobile visits. Mobile revenue is up 22%, and the average order value is up 31%.

It’s on tablets however that Fallen Hero is showing the biggest gains:

  • Conversion is up 32%.
  • Transactions are up 50%.
  • Average order value is up 62%.
  • Revenue is up 143%.

This is solid proof that there’s a huge untapped market of tablet users out there, desperate for ecommerce sites to offer responsive design and improve their shopping experience on the always-connected device sat next to them at home.

For further advice and guidance, check out this recent post: So you have a mobile site, what happens next? and download our Mobile Commerce Compendium.