For an online course creator, your sales page is THE most important piece of marketing capital you have. It isn’t uncommon for course creators to see 1,000’s of extra sales after re-designing their sales page. What’s the secret? Understanding and implementing the UX/UI principles that lead to more conversions.
Designing a sales page with UX/UI principles displays the value of your course, lets visitors know what to expect, what they will learn, and gets them excited about your course.
In this guide, we’ll cover the 4 key elements of UX/UI design you need to incorporate into the sales page for your online course. We’ll use examples of the work we’ve done at ClassGrowth, and other examples of sales pages that could use some work. Of course, we’ll blur some of the business names involved (we don’t want to be mean!).
But before we discuss the principles of UX/UI design, it’s important to know that best practice changes, depending on your demographic.
The Importance of knowing your audience
The design of your sales page will vary depending on your audience, so there is no foolproof way to design a sales page.
For instance, in our years of experience in designing sales pages for online courses, we’ve noted a difference in how older consumers respond to sales pages compared to younger audiences.
Younger audiences prefer sleek, modern and intuitive designs while older audiences typically want more information and aren’t as concerned with design.
For this reason, the tips below should be taken as a guide, and not a foolproof recipe. The most important aspect is to understand and research your audience thoroughly.
So without further ado, let’s look at the 4 key elements to a winning sales page for online courses!
Call to action
Let’s begin with the Call to Action (CTA). This is the core element that the rest of the page is built around. Everything else on your page is there to encourage the user to click the CTA button, so it is important to get it right!
Your CTA button’s:
- Size
- Colour
- Positioning
- Text
- Contrast from its surroundings
All contribute to the likelihood that the user will hit ‘click’, or not.
While many marketers will de-prioritize or take the button itself for granted, the research on the topic suggests that this is not good practice.
Not convinced?
Check out these stats on how making small alterations to your CTA buttons can give your conversions a serious boost:
- Helzberg Diamonds saw a 26% increase in clicks by adding an arrow icon to their CTA buttons. (Marketing Tech Blog )
- Performable found that red CTAs boosted their conversion rate by 21%. (QuickSprout)
- Neil Patel found that users prefer to learn about the offer before clicking a CTA – placing his CTA above the fold decreased conversions by 17%. (QuickSprout)
In other words, you want your Call to Action button to stand out without being intrusive or distracting from other important content on the page.
Take the above image, for example.
Can you think of what might be wrong with it?
While it’s true that orange call-to-action buttons perform better, on average, in this case, the button simply does not stand out. Notice how the eyes are drawn toward the white drop-down menus above it, and the button itself is slightly obscured?
This is because this button is lower on the visual hierarchy (more on this later) than the drop-down menus and therefore it is far less prominent than it should be.
This CTA button, on the other hand, is perfectly positioned. It’s larger and brightly colored in contrast with its surroundings. It’s also positioned underneath text that supports the call to action, making it easy and logical for the user to click “add to cart”.
Copy
While we’ve written a whole article on how best to write a sales page here, in this article, we’ll be focussing on how best to format your text for UX/UI purposes.
It’s important to note that most audiences will not read every word of your sales page. In fact, far from it!
Research shows that most people do not read text, they scan. With this in mind, your text should be highly scannable. Your headlines should tell the story – the value of your online course and what it is you’re offering.
Headings should be clear, to the point, eye-catching, but above all, interesting! If your copy is limp, boring, and doesn’t communicate the value of your course, people won’t be interested.
Paragraphs? No longer than 3-4 lines in length. Nobody likes to read big blocks of text, so less is more!
Can you tease apart which of the above rules this page violates?
If there were a Nobel Prize for UX/UI design, sadly, you wouldn’t be placed in the running for identifying that this page has FAR too much text.
You don’t want your visitors to be drowning in text. Users need breathing space to absorb the page’s content. Successfully re-designing this page would involve spreading the text across more headings. This way, as the user scrolls down they can gradually take in the information.
This page is much more enticing to read. It doesn’t demand any effort on the part of the user. They can easily take in the information as it is spread across multiple sections. The headlines tell you everything you need to know, and there are only a few lines of text per paragraph.
Copy is a crucial element of the page. If there is too much, or it is not well organized, your visitors won’t read it!
Visually appealing design
Your page’s design aesthetic is one of the most important factors of your sales page. According to the principle of The Aesthetic Usability Effect, designs that are perceived as aesthetically pleasing are also perceived as usable. In the case of sales pages, usability means whether or not the visitors click ‘Buy’, or not.
Studies have shown that around 75% of people formed their judgment of a website’s credibility based on how aesthetically pleasing it was to them, so getting your aesthetic right is key!
What makes a visually appealing design?
This is where things get tricky. While there are some overarching principles of what people do and don’t find appealing, this is largely a matter of personal taste. For this reason, you need to do market research and find out what kind of aesthetic appeals to your demographic.
Check out this guide to find out what kind of design aesthetic will appeal to your audience.
That being said, having a sales page for your online course that is outdated, or old-fashioned looking is usually a big no-no!
The images are pixelated, the page feels lifeless, the colour palette is unattractive, and the user gets the impression that this site hasn’t been updated in a long time. While there may be some users who this aesthetic appeals to, there will likely be very few. It feels old, outdated, and unpleasant to look at.
Do you want to interact with this page? Do you want to spend any more time here than you have to?
Contrasting with the last page, isn’t the aesthetic much more modern, and current? The color palette is pleasing to the eye, the typography and overall design aesthetic ooze modernity, and, to the right demographic this translates to usability.
Of course, your aesthetic without a proper structure to your sales page will only take you so far, and so our final element will be…
Page Layout
Design trends come and go, and different aesthetics appeal to different users. However, some aspects of design are universal and will always be relevant.
While there may be differences in the kinds of imagery and aesthetics individuals prefer, the way that we process visual information remains constant across demographics. For this reason, visual hierarchy matters and should be paid attention to!
What is visual hierarchy?
Essentially, visual hierarchy refers to the ordering of your on-page content in terms of importance. To achieve this, you will need to use size, contrast, shape, and positioning to draw the user’s eye toward what you want them to pay attention to.
Look at the image above. Notice what your eyes naturally want to do. Are they drawn anywhere in particular? If you’re like most people, your eyes will dart left and right in an attempt to find a place to focus on, and eventually, give up and move on.
This is because there is no clear visual hierarchy in this image.
Trying again with this image, you should notice your attention jumping to either the CTA button on the left, or the heading first, followed by the line of text in between them.
This is not an accident, rather, it’s visual hierarchy put into practice. The page is designed to intentionally draw the user’s attention toward the most important elements on the page.
This is achieved with both size, and colour contrast between the heading, paragraph text and CTA.
Final thoughts
The art of engineering a well-designed sales page is all about knowing:
- How to direct visitors’ attention to the right elements
- Making it easy and desirable to click the CTA
- Organizing the content to make it easy to absorb
But at the end of the day, getting these things right requires detailed market research. Each of these elements must be specified to your audience. Remember, it’s possible to have a perfectly executed sales page, only targeted at the wrong audience!
If you want your sales page handled by a team of professionals who specialize in creating a winning online course sales page, why not jump on a call with us today!
