WooCommerce Checkout Page Design: Case Study Of Wardee Harmon
Tavleen Kaur
September 2, 2019
Recently, we spoke to Wardee Harmon of TraditionalCookingSchool.com to see her checkout page design and understand her strategies.
In this post, we'll break down some of her techniques for you so that you can implement them in your own business.
Wardee is very generous and freely shares what she knows. You can benefit a great deal from the time that she has spent in trenches.
By the end of it, you'll know how to make your checkout more effective, and as a bonus, we'll see how to sell memberships through order bumps.
Contents
Wardee has created a remarkable space on the internet for sharing traditional cooking recipes and teaching absolute beginners how to master healthy cooking.
It was in 2010 when her (third) son was diagnosed with eczema that she felt the need to explore traditional cooking.
And once she did it, it not only cured her son of eczema completely but began to influence the overall health and wellbeing of her family positively. So she started writing blogs and sharing recipes online.
But, her readers wanted more from her!
Today her business revolves around selling ebooks, courses, select physical products (like t-shirts and bibs), and even a membership site.
However, at the heart of it all is a thriving community of traditional food lovers.
If you remove the revenue, money and all of that, we really want to help people get healthier, at the core.
-- Wardee Harmon, Founder (Traditional Cooking School)
Her team has grown from just her husband and her to about 20 people, including the support staff.
Take your notebook out- there's plenty you can learn.
Wardee mentioned to us that 1000's of transactions take place on her store each month while remains anxiety-free.
So we took a look at her checkout page to see what makes it tick:
Checkout Page Design Of Traditional Cooking School
Notice what makes Wardee's checkout page convert:
Let's look at how this page looks on mobile:
The logo takes center stage at the top and makes her checkout look perfectly on-brand. Also, you can clearly see what you're ordering right above the fold - so there's no room for confusion.
Plus the sticky 'Place Order' button ensures they never get lost.
Let's explore Wardee's top strategies in this section.
The conventional approach says send people to a product page from the category listing, where they can click on Add to Cart. Then send them over to the cart page and finally to the checkout page.
Wardee looked at the flow and realized that she didn't need these unnecessary steps in the middle. So when you click on a product listed on her store, she'll send you straight to the checkout.
The checkout is specially built to sell the item the user clicked on. Hear her talk about her checkout page design:
Wardee believes that users should have a clear idea of what they're buying. Even if they get distracted - the section at the top serves as a reminder.
There's a clear image of the item with desirable benefits written in about 2-3 lines. By eliminating the cart in entirety, Wardee offers her prospects a faster and smoother route to checkout. This strategy works for her!
People often end up abandoning the cart when they don’t know exactly what they have in their cart! This tool (AeroCheckout) allows you to specify what the customers are getting and make them comfortable... - Wardee
Here's an example of her membership free trial checkout page:
This is our Shop checkout template (inspired by Shopify).
This is one of the critical strategies to ensure that your checkout wins the heart and wallets of your prospects.
Wardee puts a seal at the top of her checkout along with the product title, description, and image to make it appear genuine and trust-worthy.
A seal of satisfaction signifies that the product is genuine in terms of quality. It also shows that the customer can trust the product. At least, they can go by the product description and make the purchase.
She uses the sidebar to display the testimonials and benefits of the product she's selling:
The image of the reviewer accompanies the testimonials - and notice, they're not product-specific. But are about her products and the business in general, which is excellent for building trust and rapport.
Wardee has given a lot of thought to the language on her checkout page. She uses the 'Classic' checkout template in Aero Checkout.
Let's hear her talk about her favorite templates, the edits to the microcopy, and the overall impact:
Joshua Porter, the founder of Microcopy, had once designed a checkout page as a part of an e-Commerce project in his company. The page asked for billing information.
He kept receiving notifications of transactions getting failed due to billing address errors. The address which some customers entered didn’t match with the one linked to their credit cards.
Joshua came up with a copy and added it to the checkout page (highlighted in blue).
Surprisingly, he didn’t receive any payment failure notifications since then. A simple line hugely saved their support time, increased conversions and brought in more revenue.
Wardee too knows that making people feel at ease is the key to persuading them.
She uses a user-friendly, welcoming, and trust-building language to talk to her users.
For example, instead of 'enter payment details,' the text reads - 'verify your payment info.' And instead of 'order summary,' she says, 'what you're getting':
Wardee uses a Product-Selector on her checkout page. It lets users select one or multiple products from a given list of items on the checkout page.
There are broadly 3 cases for implementing a Product-Selector:
You can use this setting to allow buyers to choose whichever products they want from the list and the number of units (s).
Here’s Wardee’s product selector on the checkout page:
Notice the quantity incrementer that allows users to adjust the number of units.
This option allows prospects to choose only one of the given items.
Let us look at one of Wardee’s checkout pages which has such a Product-Selector enabled:
This strategy is useful because it allows her customers to choose the smaller plan and minimize their risk OR choose the annual plan and pocket handsome savings. The users feel in control of their decision.
She uses the small real estate effectively to upsell the yearly plan by mentioning that “it’s like getting three months FREE! Works out to just $35/month”.
You can use this same technique to upsell users a higher volume of your product too. For example - 'buy 1 and save X' or 'buy 3 and save 2X'.
In this setting, users are displayed with pre-checked checkboxes, listing out all the products that the user gets with the purchase.
For example, a user wants to buy a shaving set. A product selector will appear with all the components (like foam, razors, blades) listed and ticked.
If the customer has to buy, he can either buy them all or nothing.
A FREE Trial offer is providing access to your membership site for a specified duration of time at no charge.
After the FREE Trial period ends, they are charged on a monthly, quarterly, or yearly basis to stay a member.
Wardee offers a free trial of her membership program, and her checkout page design has an order bump section where she sells it. It allows users to check a box on such the checkout page and add the $0.00 trial to their order.
Let’s take a look:
A quick note on Order Bumps:
- Order Bumps are checkout page offers that can be added to the order with one tick on the checkbox
- Generally, people don’t give much time to read this section, therefore keeping it short and persuasive helps a lot
Limited edition items, Complementary products, ebooks, free trial offers make excellent order bumps. For more details, see our post on order bumps.
Free Trial Offer in the order bump works like a charm because they’re going to submit their payment details anyway on this page. So they practically only have to tick a box and add the $0.00 item to their order.
According to themembershipguys.com, here are a few questions that people have before buying a paid membership program:
That’s why you need a free trial plan so that your prospects can see it for themselves and if it works, then they can stay on.
“We have a good retention percentage on the acceptance. Around 40% of buyers choose to keep their free trial after 30 days. We get 2-3 times more new members, with the free trial than without it.”
-- Wardee on free trial as an order bump.
Wardee was pretty impressed with the support team and of course the tools. Here's what she said:
You guys are on the top of my list for support. I have high expectations from the products that I work with and the service. Since our business is large- it gets complex and it demands more tools. While setting up AeroCheckout, I had 1 or 2 questions so I emailed you guys and got replies within an hour. We were in different time zones but still, the replies were on-time. It’s been more than a year and whenever I have asked questions, you have always put things in. You also improved a few things, based on my suggestions. So, it’s all been amazing!
So what's stopping you from making your checkout page design trust-worthy and revenue-generating? Review the language you use- can you make it more welcoming?
Do you have anxiety-curbing testimonials at the final pitstop?
Think of ways you can incorporate the order bump section and the product selector to upsell at the checkout.