Online Courses Are Our Most Successful Marketing Experiment to Date — Here’s How We Created Our Course Platform
We recently wrapped up the first round of Launch an Online Business Masterclass. Our goal with this course was to provide four weeks of structured learning and action points to help people make that business idea in their head a reality.
In the past when we’ve produced courses we either sent the lessons by email or created custom posts on our site on a hidden link that we only sent to students who signed up.
This time though we wanted to take things to the next level and set up a course platform that would achieve these goals:
- Be easy to add lessons and future courses going forward.
- Allow students to track their progress.
- Have the ability to drip feed lessons each day rather than releasing them all at once.
- Allow us to brand each course and have total control over the layout design.
- And of course, connect with ConvertKit so that we could communicate with students and track their learning.
As the designer on the marketing team, it was my job to figure out what set of tools to use to fit with those desired outcomes and also put them all together to bring this course to life.
Here’s what we ended up using and why, along with some of the challenges faced along the way.
Selecting a Course Platform
There are many great course platforms out there on the web, but after pouring over the pros and cons of each I ultimately landed on using Sensei.
Sensei is a Wordpress plugin owned by the good folks at Woocommerce, who have a great reputation as far as Wordpress plugins go. It came recommended by several friends who run courses on their Wordpress sites too, and it came with a lot of documentation (which didn’t turn out to be quite as useful as I’d hoped– but more on that later).
Sensei allows you to set up as many courses as you like, with however many modules and lessons you need within them. It tracks who begins a course and how many lessons they complete too so you can check in on your students’ progress. At $149 for the plugin and support it’s well priced, and whenever I ran into issues they were very timely with their responses.
As for the design of the course pages, you can choose to use Sensei’s pre-styled elements or untick that box and add styles to your own CSS stylesheet to create your design. I went for the latter option as we wanted a totally custom design, and it was great to be able to turn off all Sensei styles rather than have to overwrite them (leading to bulkier code and the inevitable overuse of !important am I right?). Here’s what our course overview page ended up looking like:
While the CSS was easy to manage and manipulate, changing the basic structure of the pages turned out to be a lot more difficult than I expected.
I had naively assumed that the documentation I mentioned earlier would allow me to essentially build out my own templates by piecing things together in PHP as I would for a regular Wordpress page template with custom fields. Course title in here, a link to the next lesson there… that was not exactly the case.
All Platforms Come with Challenges… Ours Were Code Challenges
Generally with any Wordpress plugin you want to avoid editing files within the plugin itself as this can cause issues when it comes to updates. Sensei includes a templates folder which you can duplicate to your own theme folder and make updates there to tweak the layout so this is how I edited most of the design.
Still, I found that there were many things I wanted to have control over that weren’t in that template system. Things like:
- Adding the course name to the top of the lesson page
- Changing the message displayed on a lesson to instruct people to sign up for the course before they can see it
- Structuring how modules are displayed in the overview
These were hidden within functions and files within the plugin so rather than simply editing them in the template I had to create little hacks to achieve the design solution I wanted.
I wrote functions that looked for the automatic ‘sign in to see this lesson’ text and replaced it with the message I wanted:
And I used a little hack to get the badge icon of each module displayed in the table by uploading the image as the module description and using CSS to position it in the bar:
Surprisingly, adding the title of the course and link to the overview on the lesson pages was one of the harder parts. Since I had a totally custom header which matched the design of our previous course, Product Creation Masterclass, I wanted to simply insert the relevant course title into it, but couldn’t.
The week and lesson numbers were added through custom fields on the lesson page and while we could have just added the course name and link to each lesson individually, it seemed like overkill. The information was there, I just had to figure out how to access it in the theme!
In the end, my incredibly clever friend Cory Miller, the Community Director at seanwes, came to the rescue and gave me a piece of code he’d written to add to my functions file in order to fetch the course ID of the page so I could insert it into the template. A lot of work for one little course title!
While it was a challenge to create, I’m really happy with the final design of the course. A few tweaks will need to be made as we add new courses, but it’s been built with the future in mind so we can do things like swap out the theme for each new course to have it’s own brand. Plus, adding lessons and courses in the backend of Wordpress is a breeze.
Dripping Course Content Over Time
Sensei doesn’t come with lesson drip functionality built in as standard, but there is a huge library of add-ons available so you can customize your course platform to suit your needs. For $39 Content Drip is an add-on that allows you to delay a lesson’s release by a certain number of days or make it accessible on a certain date.
Easy! That means we were able to display the lesson titles on the overview page so our students knew what was coming, but hold back on the release of the content itself until it was the right time.
All we had to do to get this to work was install the add-on and set the timer on each lesson.
Giving students login access
The last piece of this course platform puzzle was a big one: adding the ability for students to create logins to our site.
The way Sensei works is that you need to have a login to the Wordpress site in order to track progress. Being that the course is installed on convertkit.com, we needed a way to give users access to the course without letting them into the back-end of our marketing site. So we used a membership plugin.
Just like with course platforms there are many different options for plugins to turn your Wordpress into a membership site, but we had slightly different needs than most in this category: our courses would always be completely free.
We didn’t want anything with a checkout function as that would be confusing on a free course so while I could have created the membership functionality using Woocommerce (which Sensei recommends as they’re made by the same company so they work well together), in the end we went with Restrict Content Pro.
Just like the name suggests, this plugin allows you to restrict content to users who have signed up to your site. You can also set permissions for what those signed in users see (for example, turning off the Wordpress admin bar).
Admittedly this plugin is designed for people selling multiple membership tiers or courses or offering free trials before they become paid members. It’s a tad overkill for what we need as we don’t intend to sell memberships, and technically we could have achieved a similar outcome by themeing the standard Wordpress login and registration forms and setting permissions. But hey, time is precious, and we decided that paying for the plugin would mean less stress for me and more time to devote attention to other matters.
Pro tip: If you’re hesitating about buying a certain piece of software to help you with a task, ask yourself how much your time is worth and how long it would take to achieve the task on your own. When you think about it like that, the software will almost always be worth it.
Designing pages for Restrict Content Pro works kind of like it does with Sensei: you copy the plugins template folder into your theme directory to make edits. Unlike Sensei however, I found everything I needed to edit within the template files so styling the forms to login, register, and edit account details was a cinch.
I even combined Sensei and RCP to add a student’s course details to the Edit Account page so they could see their progress and edit their info in one spot. Again, this page helps future proof our platform for when we have multiple courses available: students will be able to access all the classes they’ve joined from this page.
Connecting it all to ConvertKit
As I’m sure you realized, we use ConvertKit for our own email marketing so we needed a way to feed information from the course platform into our system to tag students accordingly.
Restrict Content Pro has a direct integration with ConvertKit, meaning I just had to connect our account and select the Masterclass Student tag. Then whenever someone registered an account they were automatically tagged in ConvertKit.
I wanted to go one step further than this however and track which students complete the course. Sensei makes it a little difficult to attach an email address to a course completion status, but our Wordpress king, Daniel Espinoza, wrote a webhook function that takes note of when a student is marked in Sensei as having completed the course. Then the webhook sends that information to ConvertKit via a zap in Zapier. Now students are tagged with ‘Masterclass: Completed course’ when they’ve checked off all the lessons. Pretty snazzy!
Putting it out into the world is the best way to find what’s broken
As is always the case with websites, you can spend weeks building and testing, but you can still guarantee that your visitors will encounter problems you weren’t aware existed once they start using it! Especially when your course has thousands of students. In the spirit of full transparency and, ahem, working in public… I want to share a couple of issues we faced once the course was launched and how we dealt with them.
Login confusion
Most of the tickets sent in to our support team about the masterclass were about issues logging in. The confusion here usually stemmed from one of these two things:
- People tried to use their ConvertKit app login details to access the course
- People clicked through from our email to see a lesson and didn’t realize they had to log in to see the content (as the Sensei message instructed them to start the course to see it even though they had already started it; they just weren’t logged in)
I tried to solve for the first issue by ensuring that the navigation of the course looked different to the login navigation on our main site.
However, it’s completely understandable that people assumed they would use the same login details for each. Same company should mean same login, right? Unfortunately not as the codebases for the ConvertKit Wordpress site and the ConvertKit app are completely separate, but this is something we want to work on solving for future iterations of the course.
The second issue was a tricky one to solve. I wasn’t able to use the replace text function I’d used earlier to add a login link to the Sensei message that was displayed to logged out users, but my superhero friend Cory Miller once again came to the rescue with a piece of code that did the following:
- When a lesson page is loading, check if a user is logged in
- If they’re not, show them a login form that redirects back to the lesson they tried to view once they fill it out.
This put an end to the tickets of confused students visiting a lesson page and seeing the content locked, but unfortunately it also introduced a new problem…
Cache troubles
Caching saves a version of a web page in your browser so that the next time you visit it it makes it much faster to load. Super useful right? In most cases yes, but when login redirects are involved and the wrong page gets cached: not so much.
What happened for us on some occasions is that if a user visited a lesson page when they were logged out and went through the redirect detailed above, the login page url was cached and served up whenever they visited that lesson. Even once they were logged in. This meant that instead of the lesson they wanted to learn from, they saw this confusing message with no way to actually access the lesson:
Clearing your browser cache would solve the issue, but that’s not a good solution to tell frustrated students. As our site is hosted on WP Engine I had to contact them to get them to exclude any pages with a url that started with ‘convertkit.com/lesson/’ from caching. That way a fresh version would always be fetched every time.
Unfortunately it took me a long time and many hours of trying to fix it in my own code to realise that was the solution to the problem! Hindsight is a wonderful thing, and that’s why we write posts like this: so that others can learn from the issues we faced.
The future of ConvertKit courses
While there are still little issues to fix, I’m happy that we have a course platform that will be able to grow with us over time. Going forward we have many exciting plans for high-quality, free courses to help online creators at all different stages of their business, so watch this space and sign up below to hear more about them when they launch.
And if you’re launching your own course platform as a fellow software company or an online creator, do me a favor: learn from our lessons instead of learning them the hard way.
