Shopify Usability Series Part 2: Scrubba

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 e-commerce stores. We promised no-holds-barred advice on 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 teardown,  three main problem areas will be covered with images, commentary, and summaries of the lessons that you can implement everything you read here in your own store.

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

The Scrubba

Before we get into the nitty-gritty, The team at The Scrubba are doing an awesome job. They’ve got a really innovative line of products. Most importantly, a loyal, enthusiastic group of customers who clearly love buying from them.

• The imagery on the site is spot on. Really encapsulates the look and feel of the traveling 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 likable, 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. 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!

(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. Make sure you delay your pop-ups so that they only show once the users have 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 realize it’s there!

The video either needs to autoplay without sound 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 a 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. Leave 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 seem needy and desperate, so just play it cool, okay?

Diagrams

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 backward, 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.

There are just too many obstacles on mobile (which now accounts for over 50% of all e-commerce 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. 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.

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. 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.

Two small suggestions to improve this page would be

1) Remove the Quick View overlay that pops up when you mouse over an item.

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:

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 a 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!

Finally, on Product pages, you want to minimize 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. This is distracting and makes it difficult to absorb the information. Expanding the width of the containers would help a lot. 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…

I want to emphasize 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 , you can also check where do you find customers for shopify store, and tips for boosting your e-commerce business sales. for a no-nonsense, plain-English report delivered to you in 3 business days.

Thank you again for following our Shopify Insider Blog @ Blackbelt Commerce.  Keep an eye out for Part Three, coming up shortly! Also, make sure to check our Portfolio and Services.

 If you have any questions please let us know in the comments below.