Welcome to Part 3 of the Shopify Usability Teardown Series. If you missed them, you can find Part 1 here and Part 2 here.
In this series, we are focusing on the common usability problems found on Shopify stores. The stores we chose to feature get no-holds-barred advice on the design and usability of the website, the headlines, and copy.
We also give them pointers on how to get more conversions on email forms and products and you get to reap the benefits, and able to put the insights and ideas to use in your own store.
For Part 3, Headphone.Com is on the line and it’s time to get into it.
Headphone.com
The website looks sleek and very professional. The design and photography make it look like a premium brand. Their logo is spot on, they’ve got a great range of products. I can see this becoming a one-stop-shop for people who love headphones and music.
The Hello Bar is used really effectively to highlight their No Sales Tax & Free Shipping Over $49 policy, and the phone number at the top is a great addition. It’s linked so that if I click that number while I’m on my phone, it will automatically call through. Great for the user experience.
Tear Down #1: Home Page
Just as we found with the stores for Part 1 and Part 2, Headphone.Com is running a very aggressive pop-up game.
This pop-up covers up the page within seconds of landing on the site. Users don’t know if they want to buy anything yet, so it’s way too early to be offering them anything.
Once The Timing Has Been Delayed To Wait A Couple Of Minutes, The Next Step Is Addressing The Copy.
The copywriting for this offer is not doing its job. Any offer you make should be specific and simple. Don’t make it hard for people to understand what you’re offering, and don’t make it confusing for them to act on it.
The headline, ‘Sweet discount just for you’ seems a little dodgy, particularly since it’s followed by the caveat that this deal isn’t available on all items (due to ominous-sounding ‘vendor restrictions’. Yikes.)
Currently, there are two directives in this pop-up, which is one too many. Either have them follow you or subscribe to your newsletter, not both.
I’d recommend sticking with the newsletter since it allows you to communicate with them directly and removes any confusion about how they will get their code (it’s unclear how they would receive the code from following on social media).
The following body copy reads ‘Or subscribe to our wonderful and occasional emails.’ Call me a skeptic, not that many marketing emails are really that wonderful.
How occasional is occasional? Weekly? Monthly? Whenever you have something new to sell? The language here creates more questions than it answers, is likely putting people off.
Try replacing all this with something simple. The headline should be something like “Obsessed with getting the best sound?”
The Body Copy
Try something like “Subscribe to our weekly newsletter to hear about the best in sound technology and to get 10% off selected headphones in-store.”
Finally, remove the ‘Powered by Beeketing’ tag at the bottom. Given that the rest of the store has a premium feel, this looks a bit sloppy. This is a common problem with email and review apps.
The free or low-tier packages often have ‘powered by [name]’, with some CSS you can normally hide it. You just need to add [ !important ] at the end of the CSS class (no brackets), and this will override the code for this little tag.
As a side note: we’re starting to see users getting ‘ad blindness’ on pop-ups. This happened with banner ads and sidebar ads a while ago — people don’t even look at the offer before they close things, because so much advertising has been irrelevant to them. They just assume they don’t care about it, which is why it’s so important to delay your pop-ups a few minutes so that people are actually engaged enough to pay attention to your offer.
Next up, the header image is too big. It goes beneath the fold, which looks weird, and again, the copy is not doing its job here.
‘Obsessed Headphone Geeks’ Should Be Replaced With A Description Of The Store’s Value Proposition, Or Should Tell The User What To Do From Here.
The meaning of this headline is unclear because the ‘At Your Service’ subheading is not obvious at a first glance (I only noticed it on my third look at this area).
Users are likely to be confused about whether they should be obsessed with headphones in order to like this site, or if the store is obsessed with headphones (and therefore have tried everything on the market and can give clear direction on which options are best).
The ‘geek’ positioning is also very incongruent with the rest of the branding on this site. It’s very slick and well designed, and there’s a perception that people who love headphones are really cool! Think of famous people who are obsessed with headphones, like Dr. Dre, he’s the opposite of geeky.
Get Into Your Customer’s Head Here: Why Do They Want The Best Headphones?
To enjoy good sound for their favorite music, yes, but also so they look bad-ass while listening. Everyone wants to be that person.
Try replacing the headline “Obsessed with headphones.” Then the subheading could read “You too?” followed by the Shop Now or Learn More buttons. It would make it much clearer that the user is in the right place and give them a specific next step to follow.
Next, the ‘Get Discount’ and ‘Help buttons’ are constantly popped out (which, like the pop-ups, has been another common problem throughout this series).
These tabs are very annoying and I wish they would go away. They distract users from actually engaging with the page and often cover up important information (for example, the Discount tab obstructs users from easily clicking a browsing arrow further down the page)
As you get further down the page, I’d recommend adding a name to the testimonial to increase credibility making sure that the image sizes are consistent as you get to the featured product area. Some are huge and take up half the screen, others are a quarter of the size. It’s visually confusing and creates a lot of unnecessary white space on the page.
Finally, I’d remove the blog section from the bottom of this page. Again, the inconsistent image sizes make the layout messy and distracting.
Key Lessons from Tear Down #1:
- Make your copy clear! Don’t try to be clever. keep it simple that it’s easy for people to follow your directives. Your wording should be consistent with the rest of your branding. People will feel confident that they’re in the right place.
- Double check your image sizes. Too big or too small, inconsistent sizing creates a chaotic look to the design of the page and detracts from your credibility.
- Resist the urge to jump on every marketing bandwagon. Pop-ups, fly-outs, and overlays just piss people off if used carelessly. Put time delays on these so people are actually engaged before seeing them. Limit the pages they show on so they’re as relevant as possible.
Tear Down #2: Collections Page (Wireless Category)
Moving on to the Collections Page, there are a few simple design elements that could be tightened up above the fold:
It’s great that they’ve got filters set up. This makes it much easier for users to find exactly what they’re looking for. The information hierarchy will become a bit more intuitive if the subheadings were smaller. The white space that distracts the eye can be reduced by scaling down the spacing in this container a little bit.
On the other side of the page, the ‘Featured’ button and drop-down arrow should have a box around it to indicate to people that it’s a sorting menu. Otherwise, it looks like this is a page that is just featured on the site.
The ‘Learn More About Wireless Headphones’ button gets in the way of looking at the actual products. This would be better as a text link, underlined, so it’s supplementary information.
You Don’t Want To Take People Away From Buying. This Page Is Where They Start Moving Towards A Purchasing Decision!
Further down the page, the star reviews are probably doing as much harm as good. If you have a listing with a 2-star review, it’s not helping you to sell more of that product. And products with no reviews just look crappy and bulk up the page. I would recommend removing the reviews from the collections page and leave them for each product page.
The same goes for the color options: having it on the collections page for some items and not others is confusing (particularly since some of the swatches are incomplete) and takes up a lot of room.
Key Lessons From Tear Down #2:
- Visual consistency is very important. Make sure all your images are the same size, on the same kind of background, and that you’re not confusing the eye with unnecessary or incomplete information.
- Too much white space can swamp a page and make it difficult to process the information you’re reading. You don’t want everything squished on top of each other, but make sure it’s not swimming in space.
- Remove anything that will distract people from moving on to a buying decision. That’s the whole purpose of your site, so don’t get in your own way!
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: Individual Product Pages
The page itself looks pretty good, but guys… “Is Our Price Too High?”
I’m dying inside 😭
There is no way that people are not going to click this link, hoping to find some kind of deal. It’s great that Headphones.Com is MAP compliant, and that they’re being transparent about it.
(MAP — Minimum Advertised Price — is an agreement between manufacturers and their retailers/distributors that the sellers will advertise the product at specific prices in order to reduce extreme discounting and the use of unfair business practices. It’s designed to keep all parties within the supply chain profitable.)
But this link is going to cost them more sales than anything else on the whole site.
It’s Basically Inviting Customers To Walk Away In Search Of A Better Price
First things first: if you have to have something like this, put it at the very end of the page. Don’t make it so easy for people to pay you less. Ideally, it wouldn’t even be on the product page. Why not have a ‘“View Our Pricing Policy” link in the footer menu?
Second, regardless of where you have the link, update the copy of this section immediately. Instead of “Is Our Price Too High?” say something like “Seen These At A Better Price?”
The copy in the flyout also needs changing. Currently, it’s too emotionally soft, and it’s way too focused on the business (instead of the customer): “We’ve found that people really like to buy from HeadRoom and headphone.com, and we’d love to make you a believer, too.”
What about what your customers want? Make sure any copy on any part of your site is focused on your customers, not on you or your business.
People buy for what you can do for them, not what they can do for you.
The Images
In Shopify themes, the image container for the main image will always expand in height to accommodate the size of the tallest image in the carousel. If there are images of different sizes, this means there will be a massive chunk of white space beneath the main image most of the time.
People might even think there’s only one image if they miss the arrows. It only shows when you mouse over it. It’s key that the image sizes are consistent, or that you force the additional images to come up to right beneath the featured image.
Next up? The reviews. There’s way too much white space around them. So much that it kind of makes them look fake, as though the designer just lifted a table from somewhere else and pasted it in. It also creates pagination, which means that people have to click through 3 pages to get all the reviews… don’t make people work so hard to read good stuff about you!
Worse Than The White Space, Though, Is That Reviews Are Not Being Moderated.
Headphones.Com has a range of reviews, going from excellent, 5-star sweeps to 1 and 2-star smackdowns.
Bad reviews look worse than no reviews. It just hurts you to have angry or disappointed customers venting in a public space. Yes, you should allow a few 3 and 4-star reviews through to show that you’re legitimate and not faking your reviews, but don’t approve the smackdowns.
If you’ve got your store set up to auto-approve, turn that function off and go through them yourself. Not only does it look better on your product pages, but you also get to deal directly with unhappy customers without the pressure of potentially getting into slinging matches on product pages for all to see.
A Few Final Points:
- Product Pages, expand the description out to full-width rather than just using a third of the page once the text goes down past the image container. It’s easier for people to read and prevents the white space problem. (See the product pages at Fringe Sport, a client of ours, for a good example of this.)
- A related product, in this case, an extra headset, have the link open in a new tab. So users don’t get taken away from the product they actually want. Alternately, you could set it up as an upsell to make it even easier for people to add it to their order on impulse.
- Make sure all links on the page work and are relevant. On this product page, the link to the Owner’s Manual is dead. It doesn’t open in a new tab, so it takes the user off to Sennheiser’s site (away from buying), and the link is broken. We went deep on this in Post 1, but suffice it to say that broken links do not inspire confidence: is this an old model? Is this item supported by Sennheiser? Are these even real? Why is everything in German?!
Key Lessons From Tear Down #3:
- Don’t, for the love of all that’s good, hand people a reason not to buy from you. If you have an interesting or transparent pricing policy, that’s great, but keep it subtle on product pages. Better to have a separate page altogether so that you don’t distract people from buying.
- Make sure your images are consistent sizes and that you’re using the real estate of the page effectively.
- Moderate your reviews manually. This way you get a good spread that is representative of your customers’ experiences, without letting auto posts or nasty reviews spoiling it for everyone.
Headphone.Com is a great store, and while there are things to be fixed, their offering is excellent and they’ve got the work ethic to make things happen quickly.
As with Love That Bag and Scrubba, the Headphones.Com team took a big leap having this critique done in public, and we’re really grateful to all our Tear Down participants for trusting us enough to turn us loose on their businesses.
It’s Not Easy To Hear Feedback Like This, and They’ve All Been Extremely Good Sports.
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.
We hope you’ve gotten some useful ideas out of this series, and you’re putting them to use in your own store. If you have any questions about anything we’ve covered in any of these posts, please comment and we’ll get back to you as soon as we can.
This series has been great fun for us to do, and so there’s a high chance we’ll do it again in the future. If you’d like your store to be considered next time around, make sure you join our private mailing list below to get the heads up.
Thank you again for keeping up with our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our products and services. We also have some top blog recommendations for you to check out; 4 Ways To Show Social Proof On Your Shopify Store, More Shopify Design Strategies, and Stockists On Shopify. Media gallery for shopify the easy way to showcase your media feature, As always, keep a lookout for new blog posts.
Want More Actionable Usability Tips?
Join the private Blackbelt Commerce Dojo list and we'll send you our best case studies and how-to guides (plus you'll be the first to know when we run our next Tear Down series!)