Shopify Usability Series Part 2: Scrubba

By Laura Hanly

Welcome to Part Two of the Shopify Usability Teardown Series! In this post, we're breaking down the website of a travel gear company, and we think you're going to find plenty of tips to put to use on your own site.

Welcome to Part Two of the Shopify Usability Teardown Series! If you missed Part One, you can find it here (it’s got some hard-hitting tips you’ll want to use in your own store).

This Shopify case study is designed to highlight the common usability problems found on ecommerce stores — we promised no-holds-barred advice on things like the design and usability of the website, the headlines and copy, as well as pointers on how to get more conversions on email forms and products.

For each tear down, we’ll cover three main problem areas, with images, commentary, and summaries of the lessons so that you can implement everything you read here in your own store.

For Part Two, we’re taking the gloves off again with The Scrubba, a travel and camping gear store. Let’s get into it.

shopify case study

The Scrubba

Before we get into the nitty gritty, I want to comment that the team at The Scrubba are doing an awesome job — they’ve got a really innovative line of products, and most importantly, a loyal, enthusiastic group of customers who clearly love buying from them.

  • The imagery on the site is spot on, really encapsulating the look and feel of the travelling lifestyle, and highlights all the features of each product very effectively.
  • They do a great job of demonstrating how to use their products through images and video
  • They have a likeable, consistent tone throughout all their written content.
  • Their logo is cool, the website looks legitimate, and it’s easy to navigate.

Tear Down #1: Home Page

Header Area

The Scrubba team has a clever redirect that identifies the IP address of the user and directs them to the appropriate version of the store for their region, which we’ll explore a bit more below.

However, before there’s time to decide if you want to switch stores, a pop-up invades your screen…. I literally got to your site 5 seconds ago. The first thing I want is for your pop-up to go away, not to get a 10% discount on a product I haven’t even seen yet!

shopify case study
Click to enlarge – see below for written details


(Scrubba isn’t alone in this — 
Love That Bag from Part One had the same issue, which they have since fixed 🙂. This is a major turn-off for new visitors, so make sure you delay your pop-ups so that they only shows once the users has been on the site for 2+ minutes or have several page-views racked up.)

Don’t underestimate just how valuable this header area is.

It’s your opportunity to communicate exactly what your brand is about, and to create a place for users to engage with an offer or activity.

In this case, there’s too much white space in the header area. A full third of my screen is taken up by white space, and the other two thirds are not intuitive.

When you get to the page, it looks like that header is just an image but it’s actually an embedded video. The play button is below the fold so people don’t even realise it’s there!

shopify case study
Click to enlarge – see below for written details

The video either needs to autoplay without sound (so that people watching in offices or while playing music are not jarred), or be smaller/higher up the page with a play button in the middle.

The play button should be visible above the fold, combined with a title so users know what it is and whether they want to watch it.

This video is nearly two minutes long — this is a big ask for new visitors. Don’t assume people have this kind of attention span for something they don’t know anything about (or even for something they DO know about). Test a shorter video and see if engagement (time spent watching the video) increases.

(Long videos can work — see the video over on vinomofo.com for a giggle. Just make sure you know what’s right for your brand.)

Review Tab

The sliding Review tab on the right-hand side of the page covers part of the diagrams and product images and clutters up the home page even more.

Something I learned during my time doing in-person usability testing was that no one reads vertical text — you’re just distracting them with something they’re not going to engage with.

You’re better off putting two or three of your best reviews above the product spotlights and leaving the rest for the product pages: Reviews should be something users organically discover as they’re moving through the site according to their interests, rather than having them shoved in their face at every turn.

While reviews are great social proof, too many of them everywhere seems needy and desperate, so just play it cool, okay?

Diagrams

shopify case study
Click to enlarge – see below for written details

I understand the intent of demonstrating the elements of the product, but this is not the best way to do it.

The middle image seems to be completely aesthetic. The brand text is backwards, it’s got this intense green overlay, and it doesn’t tell us anything about the product.

The subheading “washboards make the difference” is confusing — what does that mean? Make all the difference to what? Some people might not even know what a washboard is! I would replace this with a real image of the product in action.

As for the other two images, the text is much too small — leave the detailed visuals for the product pages where users can actually zoom in a bit.

This problem is particularly pronounced if you’re trying to read this on mobile: the text is absolutely tiny, and we’ve also got a mess at the top, with the Sign Up Now button covering the location redirect bar and covering the menu too.

shopify case study
Click to enlarge – see below for written details

There are just too many obstacles on mobile (which now accounts for over 50% of all ecommerce traffic) for the user to make an easy purchasing decision.

Key lessons from Tear Down #1:

  • Don’t hit people with a pop-up right away. Give them a couple of minutes ( or a few page views) before showing them an offer.
  • Make the most of the header area. Reduce unnecessary white space and use the area to educate people on your brand and get them excited to explore your site.
  • Make sure any video content has an obvious play button and that the space around it is not cluttered and distracting with other bells and whistles.

Tear Down #2: Product Highlight Page

First up, let’s talk about the New Wallet page. The Scrubba team ran a successful Kickstarter campaign (beating its goal in 2 hours!), but have kind of dropped the ball with this follow-up.

shopify case study
Click to enlarge – see below for written details

Here’s what we’re seeing:

  • The information hierarchy on the page is wrong. It’s all about us, us, us, not about you, you, you. The Kickstarter has a great story, but the user cares most about what the wallet will do for them, and they don’t see a thing about that until they scroll way down, past the call to action, past the video, and even then…
  • Everything is so squished together on this page that it’s too hard to read. The line height is too narrow, and the images and text boxes are too close together. This makes the page feel claustrophobic and impenetrable.
  • Most of Scrubba’s products are priced between $50 and $100. This product is only $10… and they’re sending people off their site to order it. This just doesn’t make sense — why would you send people away from high price-point purchases where you keep all the money, in order to get them to buy a low-price point item from a platform you don’t control (and for an item that’s already funded)?! I would recommend offering this $10 item as an upsell on the other products instead.

Sending people off-site, even if it’s to your own assets on another platform, is a big no-no. Again, Scrubba isn’t the only company guilty of this — Love That Bag was sending visitors over to YouTube, where they can’t buy anything.

Don’t do this. You work hard to get people to your site.

Don’t bounce them off somewhere else where they can’t purchase anything (or where the purchase price is too low).

Key Lessons from Tear Down #2:

  • Make sure your content is easy to read, by having a comfortable line height and spacious text containers.
  • Your information hierarchy should be customer-focused — what are they going to get by using your product or engaging with your brand (not what’s so great about you!)
  • Don’t, for the love of all that’s holy, send people off your site! Keep them on your platform as long as possible to maximize the chance of getting a sale (preferably at a much higher price point than what they could spend on another site).

Want similar insights for your own Shopify store?  You can book your own Shopify website teardown here for a no-nonsense, plain-English report delivered to you in 3 business days.

Tear Down #3: General Product Pages

There are two main types of product pages on Shopify. These are the Collections page, where you can see all the products listed in one place, and the individual product pages, where you can see an individual item and find all the information about it.

The Scrubba Collection page looks pretty good.

There’s enough space in the layout that it doesn’t look cramped, and they’ve chosen good product shots to highlight each item.

shopify case study
Click to enlarge – see below for written details

Two small suggestions to improve this page would be 1) to remove the Quick View overlay that pops up when you mouse over an item, and 2) since the products are so unique, to add a short description for each item below the price to help the visitor understand how to use it.

For example, under the inflatable hangers, they could say “Weigh 50g ea, pack flat in your suitcase and can be inflated in 60 seconds to hang when you get there”. Then the visitor can click through to the full description if they want to know more.

The individual Product pages also look pretty good, but a few things would help polish them up:

shopify case study
Click to enlarge – see below for written details

There is a lot of information on each page, and again, the line height is too narrow. This gives the pages a ‘wall-of-text’ look — either condense the information into more concise copy, or break up the text up with images.

The reviews look a bit dodgy, as they have expanded out past the site container and extend out to the very left-hand edge of the page. This is easily corrected with a little CSS, but currently looks even more pronounced thanks to the huge amount of white space between the end of the product description and the start of the review section — so much that we couldn’t fit all these suggestions into one image!

shopify case study
Click to enlarge – see below for written details

Finally, on Product pages, you want to minimise distractions as much as possible, and it’s very distracting to have the IP redirect, Sign Up Now button and the review sidebar continuing to follow me around.

Key Lessons from Tear Down #3:

  • Remove as many distractions as possible. Quick View overlays, Review fly-outs and so on reduce the chances of a user actually getting to a product page and making a purchasing decision.
  • Break up your written content with images and headlines in order to make it easier to consume and less overwhelming.
  • If your products are unusual or innovative, consider having a brief explanation on the Collection page so that people can immediately understand what the products do.

A couple of small final points that we noticed while rolling around the Scrubba site:

  • They could consider replacing the ‘Global’ under the Scrubba header logo with an explanation of their USP so that the prime real estate there is put to better use: “Water and stress resistant gear for outdoor lifestyles”, or some other phrase that describes the products.
  • A lot of the text containers are very narrow. This creates a lot of white space around the text (which is distracting to the eye) and makes it difficult to absorb the information. Expanding the width of the containers would help a lot (and again, expanding the line height will really help with readability).
  • Always think about whether the layout, design or content on the site is going to make it as easy as possible for the user to take the action you intend. It’s better for usability purposes for things to be obvious and easy to use, rather than to be ‘interesting’, arty or innovative.

That’s a Wrap for This Shopify Case Study…

Before you go, I want to emphasise that the team at Scrubba are doing an awesome job, creating innovative, useful products.  We’ve shared these suggestions because we know they’re doing a great thing and want to help them be even more successful in getting the Scrubba products out into the world.

Want similar insights for your own Shopify store?  You can book your own Shopify website teardown here for a no-nonsense, plain-English report delivered to you in 3 business days.

Thanks for reading Part Two of our Shopify Usability Tear Down Series — keep an eye out for Part Three, coming up shortly! If you have any questions about this post or the strategies we covered, drop them in the comments and we’ll get back to you as quick as we can.

Want to Fix Your Own Usability Mistakes?

Join the VIP Blackbelt Dojo list to get practical, straightforward strategies to improve your user experience and conversions.

Powered by ConvertKit
Tell others about this post

Comments 2

Add Comment

Your email address will not be published. Required fields are marked *