A beginner’s guide
How to optimize your website if you’ve never relied on online sales
If you own a small business with a store front, you might have never had to rely on online sales. Maybe you’re a small clothing store or a coffee shop. You just made that website so people could find you online, but you always expected the majority of your sales would still be in person.
Not anymore.
From the beginning of March through mid-April, e-commerce sales are up 30%. Habits have changed. Buying online is here to stay. But if your website’s path to purchase is not crystal clear and intuitive, you may lose your potential customers along the way. Customers get frustrated quickly when their user experience (UX) is not up to snuff. Here’s how to make sure that doesn’t happen.
A quick thank you
This post was inspired by a friend of mine who owns a killer coffee shop and coworking space in Texas. He had a website, but it was mostly there to provide information to get people to come into his shop. He did sell coffee beans online though, and I tried to buy some. I’m not in Texas but it was the least I could do as he faced a massive hit to his revenue.
Unfortunately, his website was a maze. I couldn’t get back to my shopping cart from anywhere except a product page. This meant I wound up putting more than one of what I wanted in my cart, just to get to my cart (and then taking it out again). I didn’t realize he sold gift cards at all because I couldn’t find them. I was super confused by a duplicative top nav.
He’s a super smart business owner, but he’d never had to rely on his website before. So I texted him and said, “hey can I help you fix this?” I went through his website page by page and mocked them up, showing him where he needed to fix his path to purchase and user experience. Then I wondered, how many other small business owners need this help?
And here we are, with this article. This article is intended for people who have no experience with great website design or UX. Back to the main event.
What is a path to purchase?
When a new visitor arrives on your site, they see what is called “above the fold” (or ATF) content. This is what is immediately displayed without scrolling or clicking. It comes from the newspaper industry. Printed papers are typically folded in half; what’s on the top half of the front page is what grabs the reader’s eye as they walk past the newsstand. A similar rule applies to websites.
The path to purchase is how that customer gets from that first step — arriving on your website — to the last one, a successful checkout. Optimizing your path to purchase means making sure that your customer can easily and intuitively get one to the other. Here’s how to do it.
What are you selling?
This may seem abundantly obvious, but it is the critical first step. You want to make sure that the categories of items you sell are easy to find and easy to buy. Make a list. This could be a selection of items you ship to the customer, but it could also be things like online gift cards and orders to-go.
What are you not selling (online)…yet?
It is also an opportunity to double check that everything you could sell online is actually on your website. Are you a coffee shop that also sells gift cards and whole beans (like my friend!)? Are you a clothing boutique that also has home goods? Even if you’ve never offered it online before, consider whether you could, by using a drop shipper for example. Have you typically only offered some of your food or drink offerings to-go? Why not all of them? Don’t leave money on the table!
Be The Customer
Now that you have identified what it is that you are selling or could sell online, you have to role play. Go to your website and pretend you are your customer. Start at the homepage, and try to complete a transaction for each item on your list. Ask yourself these questions:
- Can I find the online shop/menu in one click from my homepage?
- Can I easily search the online shop/menu to find all the goods/dishes that I sell? Does the search function work? (Search for a few keywords and try it out yourself!)
- Are my goods/dishes displayed in an attractive way, with pictures and key details? If something has a quirky, unique or foreign-language name, make sure you include a brief description in English.
- Is it obvious how to make attribute selections like sizes, quantities, flavors, toppings or colors? If I don’t put that information in, does the page prompt me to do so before accepting my submission?
- Is is obvious how to add something to my cart? Where is the “add to cart” button?
- Once I am in my cart, how many steps does it take to get to a confirmation page that my order was submitted? Can I cut any of those steps down, such as default billing address to shipping address unless the customer checks the “Ship to a Different Address” box?
- What does my webpage look like on mobile? Does it resize correctly? Does the top nav re-organize itself to be mobile friendly, such as by consolidating the top nav items into a hamburger icon?
Spot Check Roadblocks
You have to remember that humans are generally not linear thinkers. They may decide they want to add more things to their cart, change a color of an item, or go read your blog post about the latest trends to make sure they picked the right style. If you were thinking that a customer journey is straight forward, I have news: it’s not.
On top of that, there tends to be a lot of variety in human behavior. One person may decide to add tons of stuff to her cart, and then go back and check the color options. Another may want to browse everything you offer before taking that step. Here are some of the most common:
- I put something in my cart, but I want to keep shopping…how do I get back to the shop? [Add a “continue shopping” button to your confirmation screen or pop up that an item has been added to the user’s cart]
- I forgot how much I put in my cart, so I add it again. [Use a dynamic shopping cart that updates with an indicator of how many items are in the cart. Check out how Amazon does this for a good example, particularly on mobile.]
- I went back to the shop to buy something else, but I changed my mind. Can I get to the cart to check out from anywhere on the website? [The cart should be in your top navigation bar. It is most common to put it as the farthest right icon.]
- I want to change something in my cart, like a quantity or a size. [Make sure the user can update the cart from the cart or create a way to go back to the item page to update it from there, rerouting back to the cart when finished.]
- I want to take something out of my cart completely and replace it with something else. [Have a “delete” button and a “continue shopping” button in the cart.]
- I want to buy the matching set of, or related item to, something else I just added to my cart. [Add a “related items” or “recommended” feed to your product pages that prioritizes items related to the product, such as a jacket that matches the pants they are looking at or a drink to go with their food order.]
Now, Ask Other People
You know how your website works, so you’re probably going to miss something. The best way to fill this knowledge gap is to ask other people to look at it for you. This is called user testing.
It’s pretty easy to recruit some nice people on forums you usually frequent. I’ve had luck on topical sub-reddits or LinkedIn. I usually offer a $20 Amazon or Starbucks gift card as a thank you.
The cheapest way to do this is simply set up a video call with them and record it. Have them share their screen and then ask them to try to buy something all the way up through the point where they hit “confirm order” or similar. (Obviously, you’re not going to force them to make a purchase.) Tell them to put in a fake credit card number and address just for demonstration purposes.
Now, watch what they do. Encourage them to talk out loud while they do it to tell you what they’re thinking. Ideally, you will hear things like, “I like this picture, it makes me crave a cup of coffee!” or “I don’t understand how to put something in my cart. Where is the ‘add to cart’ button?”
In general, I would never recommend asking friends or family to do user testing for you because they are likely to be biased. It’s not their fault; they just want you to be successful because they care about you. But if you’re stretched thin financially, they can work in a pinch. (Try to ask some who aren’t regular customers or are unfamiliar with your website.) Be warned: you’re likely to get a lot of ego-inflating compliments, which you should ignore. Make them be honest.
If you do have the funds, you can set up a quick usability test on a website like User Testing or Validately. They will recruit testers for you based on parameters you set, such as people who live within driving distance of your restaurant or women between the ages of 20 and 45.
Don’t Lose Them
Customers are increasingly impatient when it comes to finding content they want. There are three important concepts to remember:
Load Time
This is the number of seconds that it takes your page to load on various devices. If it takes too long, your customers are likely to click away and maybe never come back. Fifty-three percent of mobile users will leave a site if it loads in more than three seconds, according to a Google Study.
Above The Fold vs. Below The Fold
As I mentioned earlier, the content on the top half of any website page, particularly your homepage, is considered the creme de la creme of content real estate. Above the fold (ATF) content is what first appears when you open the webpage. Anything you have to scroll down to see is below the fold (BTF). This may change depending on whether you are viewing the site from your phone, computer or tablet — and certainly if you have a standalone mobile app.
Call To Action
A call to action (CTA) is the way in which you tell your users what to DO now that they have arrived on your site or a particular page of your site. If you’re reading this article, it’s fairly likely the answer to that question is “make a purchase.” There are all kinds of ways to highlight the call to action, but the most common is a button that is a different color from the background of your page.
If you don’t tell users what to do when they arrive on a particular page — your CTA — it’s likely they are not going to do it.
Ok, so now what?
Scrub Your Load Time
This is perhaps the only part of this process where you may need some technical help. You can do the first step yourself: check how fast your page loads on various devices by using a tool like this one or this one. You cannot control a slow internet connection, but you can remove any heavy javascript or other top heavy functionalities that may slow down your website. Here are some instructions you can give your website manager:
- Remove redirects and serve your website directly; audit your redirects with a tool like this one
- Make your images smaller without sacrificing quality with a tool like this one or this one
- Use social share buttons instead of JavaScript social plug-ins
- Use a Content Delivery Network (CDN) instead of a single server; if you’re using any of the out of the box website hosting tools like Squarespace or WordPress, you’re probably already doing this
- Minify JavaScript and CSS scripts with a tool like this one
Check Your Fold
Open each page that is directly accessible from your homepage, and make sure that your user sees immediately how to make a purchase without scrolling down. If you have a webform at the bottom of the page, for example, put a button a the top that says “contact us” and skips you down. If you want users to put something in their cart, put the “add to cart” button above the fold (ATF). If you want users to find their cart from the homepage, make sure it’s ATF.
One key way to keep content that is very important ATF is a sticky top navigation bar. This is a navigation bar that stays at the top of the page even when a user scrolls down (just like Medium’s!). This ensures, for example, they can always find their cart or the online shop or any other place you want them to find.
Call Me…Definitely!
Every distinct action you want the user to take should be as easy to find as possible…and ATF! You guessed it, these two concepts are related. Make sure that any critical action BTF can be accessed ATF, even if there are other steps they have to do in between. For example, you can have a “Checkout” CTA ATF (aka, call to action, above the fold) even if the customer will still have to fill in their shipping and billing information before placing the order.
You Can Do This
If you find any of this intimidating, remember: you are a customer too. Check out the websites of brands you like — where are their CTAs? Is their online shop easy to find? How seamless is the purchase process? Can you get to your shopping cart from anywhere on their site?
E-commerce is here to stay, and for small businesses that are making the transition for the long run, good UX and a seamless path to purchase is the key. You need and want your customers to actually get to that checkout page.
A note In Plain English
Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!
