Shopify Usability Case Study

We invited members of the VIP Blackbelt Commerce Dojo (which you can join here) to submit their websites for a good old-fashioned teardown.

We promised no-holds-barred advice on design, the 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 so you can implement everything you read here in your own store.

Dozens of people volunteered to step into the ring with us. We’ve chosen three at random to build this series around.

So without further ado, let’s get the gloves off for our first store.

Love That Bag

First off, a few props to the team at Love That Bag. They are doing a lot of things right:

The site looks clean and professional
The photography is good
The logo looks legitimate
The navigation is clear
There are consistent calls to action – red buttons used consistently throughout.

You get a good first impression of the site, as you would, from walking into a nice retail store in a classy part of town. Now, on to the teardowns.

Tear Down #1: Home Page

If you are looking at the home page on a laptop, you’ll probably notice that the hero (or ‘header’) image is huge.

It takes up the whole screen, and for some people will even extend below the fold.

This is way too big for a first image. That hero space is called hero space for a reason. It’s prime real estate, and its sole job is to sell your brand to a new visitor. The text overlay on this image is white, which fades into the image and is not noticeable because the background is too light.

To fix this, the LTB team could put a transparent background over the text section, or make the text a darker color. Make the image about a third of that height, or at least add a ‘more’ button that drives me down the page into fresh material.

Next: The Three Modules (Authentic Designer Bags, $10 Shipping Worldwide and Highly Curated Selection) Below The Hero Image Are Quite Good But Should Be Linked To Other Pages.

I recommend they put their $10 shipping deal in the small header bar at the top of the page, rather than the ‘Buy Sell Consign’ content. It’s a much more useful piece of information to put in people’s minds.

The Authentic Bags should take you to the Collections page. Shipping should take you to the shipping details page. Highly Curated Selection should go to the About page.

Don’t waste the opportunity to get a visitor to click through to additional pages when you’ve worked so hard to get them to your site in the first place.

The ‘Shop [brand]’ categories are good. Bag lovers will recognize the distinctive look of each brand and know to click through to their favorites… but the following YouTube link goes offsite!

This Is A MASSIVE No-No. You Want To Keep People On Your Site, Looking At Your Products, For As Long As You Can.

Don’t send people away from your site. This is particularly important if you are paying for traffic (say, with Facebook or Google ads). They may go to YouTube and not come back.

Your site is where you make the money. You’re not making sales through YouTube or anywhere else you’re sending people. If you have video content, embed it directly into the page or use an overlay.

The LTB team could also make it easier for people in their social media audience to buy from them by making their Instagram feed shoppable.

This immediately shows viewers which products are featured in each image and is easily implemented with foursixty.com. Always make it as easy as possible for people to buy!

In the footer, they describe what LTB does, but this information should be much higher up the site. Understanding the what/how/why of a brand like this is critical, particularly if there is a high volume of cold traffic to the site.

The team could add a tagline under the logo or include a few sentences about it in the negative space in the hero image, like “Get that bag that sold out in moments — we’ve done all the hard work of finding it for you.”

Much more enticing than “Buy. Sell. Consign.”

Key Lessons From Tear Down #1:

Don’t spend all your prime real estate on the home page on a single hero image. Make sure you use it to indicate to new visitors what your brand is all about.
Keep people on your site as long as you can. Don’t send them off to third-party platforms where they can’t buy from you.
Make it as easy as possible for people to buy from you.

Tear Down #2: The Pop-Up

We all want to collect email addresses. There’s a lot of benefit in building a list of people who want to hear from you. But if the LTB crew want those deets, the pop-up they’re running is not the way to get them.

First, it shows up WAY too fast. Like, I’ve been on the website for 5 seconds and haven’t even looked at anything kind of fast. It’s too much pressure! I don’t know who you are or what you do yet. I’m definitely not going to sign up… and I might even be pushed away from your site.

Secondly, The Design Is All Off:

There’s too much white space around the text.
“We would love to send you our newsletter” is an off-putting invitation. Nope, my inbox is already ruined with all the email I am SUPPOSED to read, let alone promo emails.
The information hierarchy, or layout, is backward. I can submit my email without even seeing the checkboxes (but it turns out the checkboxes are required before the opt-in can be finalized). They’re all out of line, which looks messy, and it’s asking too much of people right off the bat.

Shrinking the size of the opt-in box to reduce the white space around the text. This makes it easier for the reader to comprehend what’s in front of them.

Change the text in the field to ‘email’ or ‘your email’. Set the pop-up to show after 2-3 page views or they’ve been on the site for longer. A few seconds is not long enough for most people to decide if they want to hear more from a brand.

Next (and this applies to the email field in the footer as well), make the call to action appealing to the reader.

Work out what their motivation is for being on your site. Offer them a tidbit of the solution they’re looking for. Free fashion tips? Top 5 video reviews of this month’s hottest bag? Anything will do – make it more enticing than ‘join our newsletter’, and your signups will increase.

Finally, make it easy for people to give you their email. Their actual email address should be the only thing strictly required to subscribe, not their name, or any checkboxes, or any additional information. The more hoops you make people jump through, the less likely they are to complete the action.

Key Lessons From Tear Down #2:

Make your calls to action interesting to your readers — not about what you want or what would be good for your business. If you make it about them it will inevitably be good for you too.
Make it easy for people to subscribe to your email list, without being pushy or too fast. Give them a minute to decide if they like you, and then remove all unnecessary friction to getting that address.

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: Bilingual Section

Being a Canadian store, the team at Love That Bag are smart and have added a French language section to their website.

Unfortunately, when you click Français, the page goes to a 404 redirect (broken link). The page doesn’t exist. That’s just going to alienate all the French-speaking users who go straight there expecting to have an easy time. (It points to /francais which doesn’t exist – a quick fix is to go to Navigation and point the link to “#”, which will force people to choose one of the drop-down links instead.)

Now, to make the whole bilingual element easy on themselves, LTB could consider using a bilingual theme or the Langify app to translate the entire store to French, rather than just having one small section of the site in French.

The French-speaking market is huge, and since there is $10 worldwide shipping, they have a good opportunity to make their products as accessible as possible for customers in France or other French-speaking countries.

Once you click through to the other French-language pages, such as ‘Vendre Mon Sac’ (which has the same problems on the English page, ‘Sell My Bag’), you’ll see again that the design elements are out of whack:

I really think that the two columns should be in horizontal containers. There’s no need for the information to be side by side. It’s confusing, while it looks messy and is hard to read.

There’s a lot of white space, which draws the eye all over the place, and this is exacerbated by each of the numbered points being different lengths (which ends up looking chaotic and confusing).

There are also several ‘widows’. Single words on a line by themselves. These are easy to miss if you’re skimming text, which can confuse readers as well as interrupting the flow of the eye over the page.

Finally, There’s A Live Chat Box That Popped Up After A While On-Page. Its Messaging Was:

“Question? Leave us a message. Your email is usually answered the same day. Thanks!

If you’re going to have live chat on your site, make sure it ’s live and chat. Users might send an email and wait a day if they’re the patient and still believe that companies reply to emails, but many won’t. The benefit of live chat is getting an answer near-instantly from a real person. Either man it constantly, list the hours it’s manned or doesn’t have it at all.

Key Lessons From Tear Down #3:

Make sure none of your pages are broken and directing people to a 404 page
If you have a bilingual audience, use a bilingual theme or an app like Langify to translate your whole site rather than just a chunk of it
Keep your design tight. White space, widows, wonky formatting. All makes it much harder for the reader to consume your message and take the action you are directing them to.

Time For A Breather

We covered a LOT of Shopify usability strategies in this post. The team at Love That Bag are doing a great job, and our review is meant only with the best of intentions, to help. It’s a unique offering with a huge market, which is key to having a successful eCommerce store, and their branding, voice, and imagery are on point.

All these problems are easily fixed with a little elbow grease, and I’m confident that they’ll see an uptick in conversions and customer satisfaction as a result.