Episode 43 - User Testing Your Shopify Store

The Podcast

---

Show Links

• Evolve Skateboards USA
• Shopify Payments Test Mode
• Chrome Tools
• Edit this Cookie
• Facebook Pixel Helper
• Loadify - Smart Image Downloader
• Grammarly
• See Mobile View in Chrome Desktop
• Collection Template for Image Size Review
• Setting Up Google Analytics in your Shopify Store

---

Help the Podcast

---

Transcript

Hello.  Scott Austin here. 

Let me start this episode by telling you about a recent experience that I had.  I'm a fan of electric skateboards.  You may remember that I did an episode a while back where I reviewed three Shopify store of electric skateboard manufacturers.   Well I recently purchased one.  I got the Bamboo GTR from Evolve which is a company out of Australia.  And the product is fantastic.  I'm having a lot of fun with it.  And the purchase experience was pretty good.  Evolve does a bunch of things in the post purchase experience that you would expect from a high price point product.  First off, the product lives up to expectations.  And their unboxing experience is pretty awesome.  But let me talk about 3 things that could have been approved upon.

First, Evolve uses Shipstation for fulfillment.  And they've got things configured so that both Shipstation and Shopify are sending out notification emails for the same things.  For example, I got two different delivery notification emails at the same time.  The Shipstation one had more energy put into branding and design.  So its just an oversight on the Evolve teams side to not disable one of these systems from sending out the redundant emails. 

Second, I ordered three accessories with my board that needed installation.  None of the installations were super simple.  And because I wanted everything to be just right with my board, I thoroughly researched how to install my accessories on my board.  In some cases, the best resources I found were Evolve's own videos.  In other cases, it was a random YouTuber video.  And there were some YouTuber videos where the video documented the wrong way to install the accessory.  What would have really made the experience much easier would be if Evolve had some Klaviyo flows that triggered off of the contents of the order and sent an email out with the best installation video available for that accessory.  So in my case, I could have gotten three emails with the instructions for one of my accessories.

Third, Evolve is currently running a promotion where every board purchased gets a free helmet.  Well, the helmet that I got with my order is a large and is nowhere near big enough for my fat head.  And there was no size selection in the ordering process.  So I'm using a helmet that I already had and the new helmet is for guest riders.

So there's these three examples in one purchase not where the store is doing anything wrong or bad.  But where they have an opportunity to do even better and provide even more delight in their customer experience.  I'm super pleased with my Evolve purchase.  That said, there was still opportunity for improvement.

So this episode is going to be focused on how store staff can test the customer experience in order to find issues or areas of improvement.  Quite frankly, I'm shocked by the percentage of my clients that don't know what the customer experience is like in their own store.  If the staff doesn't test the customer experience, they'll never know that two similar emails are going out through different systems.  Or that the helmets they are sending do not fit.

I recommend that store staff fully test and understand every aspect of their customer experience.  This user testing should be done for two main reasons:

1. Functional testing.  In other words, to ensure that the customer experience is working as expected as you are combining pieces like the Shopify platform, a theme, multiple apps, and any customizations that you have done.  You need to test that combining all these separate pieces works as desired.
2. Experience testing.  In other words, so that you know what the customer experience is and can refine it as needed.

As you are doing user testing, I recommend that you do most of your testing on phones, as most e-commerce stores get a bulk of their traffic from phones.  Experiences that easy and intuitive on desktop can quickly become confusing or even broken on mobile.  If you do most of your testing on mobile, you'll end up doing things differently than if you did most of your testing on desktop.  You'll find that you'll remove a lot of the cool or gratuitous elements in order to improve the mobile experience.  Now you can test directly on phones.  But phones come in lots of different sizes.  So you can use Chrome on a desktop computer to test in a bunch of different screen sizes.  I'll include a link in the show notes on how to do that.  Now your theme is what the call responsive, which means that it will act differently based on the screen size.  The most obvious place to see the responsiveness of the theme is in the site header.  Looking at the header on desktop, there's probably a logo, a navigation menu or two, a search box, login button, maybe some currency or language tools, and a marketing or contact message.  But on mobile, the header may just show the hamburger menu, which is that 3 horizonal line icon, the logo and an icon for search and login.  Everything else is then stored in the hamburger menu.  What responsiveness means is that there are many different versions of your website based on the size of the screen it being viewed on.  So you need to be testing on a wide variety of screens.  Not just one phone size.  But a few.  As you view in many different screen sizes, you'll learn to not optimize for one screen size.  An example of optimizing for a screen size is trying to control on what word a line breaks to the next line within a block of text.  If you are only looking at one phone screen size, you may inserted manual line breaks to control the layout on your screen.  But as you test that on other screen sizes, you'll realize that the manual breaks which made the layout better on the original screen only made things much worse on other screens. 

Here's a checklist to run through to test your store.

1. Domains.  What is the main domain of your store?  Does your store always resolve to that domain?  Does the .myshopify.com version of your site redirect to your domain?  Do both www and not-www versions of the domain work?
2. Header and Footer.  Make sure all of the links work and check the responsive layout on multiple screen sizes.
3. Analytics.  I prefer using Google Analytics.  You want to test that various data elements are being properly measured.  In the show notes, I'll include a link to the podcast episode I did on setting up Google Analytics.  It also has steps on testing the implementation.
4. Facebook Pixel Tracking.  Verify the Pixel is firing properly.  Facebook provides a Chrome extension to help you with this.  I'll include a link to it in the Show Notes.
5. Site Search.  Perform a variety of different searches to see what results show and click through to top results.  Test searches include:
1. Search by product name
2. Search by brand name
3. Search by SKU number
4. Search for content in product descriptions
5. Search for content in blogs
6. Search for content that does not exist
6. 404 Page.  Enter an invalid URL for your store and review the 404 experience.
7. Evergreen Pages.  These are you pages that include About Us, FAQ, Contact Us and the like.  Visit every page and click every link.  Review the content on multiple screen sizes.
8. Product pages.  Make sure that variants are working properly.  Also check the display of sale prices.  Additionally, test out the different states of product availability to ensure the product page functions properly.  The different states are:
1. In Stock
2. In Stock with limited quantity available
3. Out of Stock and cannot be purchased
4. Out of Stock and can be purchased
9. Product Photos.  Check that the product photos are of good size and quality.  I've made a collection template that is super useful for this testing.  It allows you to pick a particular dimension and it then shows you all of the product photos that are smaller than the selected size.  I'll include a link in the show notes to the code and an instructional video. 
10. Collection pages.  Are the pages uncluttered and clearly show the differences between products.  Do filters work?  Do filters work when more than one is selected?  Does sorting work?  Does the default sort make sense for each collection?
11. Cart Page.  There's a number of things to check on the cart page including:
1. Do products added from the product page or elsewhere on the site actually get added?
2. When adding more of a product in the cart, does the quantity go up appropriately?
3. Does changing quantity in the cart work?
4. Are the right prices displayed?
5. Is the sub-total price accurate?
6. Can products be removed from the cart?
7. Does the cart retain its content if you close down the browser and come back to the cart later?
8. Do automatic discounts get applied.
12. Checkout.  There are a lot of things happening in the Checkout process, so thorough testing should be done including:
1. Checkout with every payment option.  Shopify allows you to turn on a Test Mode to test a whole bunch of scenarios.  I'll include a link in the Show Notes to instructions.  But you can only use that if there no chance of real customers being in the checkout process at the same time, which isn't useful for stores that are live.  So you'll need to use your credit card to test it all of the way through.  You can always issue a refund later. 
2. Test these different credit card scenarios:
1. Invalid credit card number
2. Invalid credit card expiration date
3. Invalid security code
4. Wrong billing address
3. Can you checkout as a guest?
4. Can you checkout with an account?
5. Verify taxes and shipping are being calculated properly.  Use addresses from a number of different local states or provinces.  Also try testing international addresses for each of the countries you ship to.   To come up with addresses to test with I'll just do a Google search for the city hall of somewhere and use that address.  For example, I'd do a search for 'Melbourne City Hall address' and use that address.  By the way, thank you to the listeners in Melbourne.  Melbourne listens to this podcast more than any other city outside of the US.
6. Are discount codes working properly?
7. Is email opt-in set-up properly?
13. Order Thank You Page.  Is all the information accurate?
14. Transactional Emails.  Check the content and design of all the various notification emails that go about an order.
15. Purchase Process.  Much of the above are steps in the purchase process.  Bring all of the pieces together and make a number of different purchases to cover different scenarios.  For example:
1. Purchasing multiple products
2. Purchasing products that are fulfilled in different ways
3. Gift cards
4. You should even go through the entire fulfillment process and ship some orders to yourself to all of the communications that your customers are getting. 
16. Email Flows.  If you are using Klaviyo or another email tool with Flows, then test out each flow by triggering it on the site.
17. Account page.  Do all past orders show up?  Can you add and manage addresses?
18. Email collection.  Do your various methods of collecting email addresses work?
19. Reviews.  Go through completed orders long enough to trigger review emails.  Go through all of the steps of the review process.
20. Test the functionality of all added apps.  For example, if you added an app for Wholesale pricing then test all aspects of that including:
1. Account creation
2. Wholesale prices displaying on the website
3. Enforcement of wholesale business rules like minimum order size
4. Wholesale prices being charged in checkout
5. Taxes being appropriately charged
21. Check your site on a variety of devices, operating systems and browsers.
1. Devices include phones, tablets - like iPads, and desktops/laptops.
2. Operating systems include Windows, Mac and ChromeOS.
3. Browsers including Chrome, Safari, Firefox and Edge.
22. Is your store indexed in the search engines?  Search for your company's name, not your store's URL, and make sure it is coming up in the results.

So that's a comprehensive checklist of how to do user testing on your store.  Here are some Chrome extensions that I use to help me.  I'll include links to these in the show notes.

1. Edit this cookie.  Let's view, edit and delete your browser cookies for a given site.  I usually use this to delete all cookies for a store to see what the new customer experience is.
2. Loadify - Smart Image Downloader.  This extension shows a view of all images on a page and all colors used in the HTML.
3. Grammarly.  For spelling and Grammar.  It won't check during the user testing.  But it does work inside the Shopify admin as you are writing product descriptions and other content.

If you go through this testing process, you'll be a lot smarter about what your customer's are experiencing.  And while you may not find any big issues, as those usually get surfaced by customers, you'll probably find many small items that you can improve upon.  Those little details that will help you delight your customers and build a more loyal customer base.  I hope this is helpful for you.  The shownotes will list out the full checklist for you to use.

Thanks for listening.