Reading Time: Minutes

Sensei Case Study: Creating the AMK Pro Platform

I am Francisco Aguilera G., Creative Director of APK Estudio, a small Chilean web design studio, and blogger at FranciscoAMK.com.
I have published online tutorials and courses for several years through
my own blog, my company website and other platforms such as Udemy and
Floqq.

At the beginning of 2014 I had three courses published independently on different platforms:

Diseño web con HTML y CSS desde cero (Web design with HTML and CSS from scratch) (Published at Udemy)
Dominando WordPress sin programación (Mastering WordPress without programming) (Published at Floqq, Udemy and a course website, using Campaign Monitor autoresponders to send a daily class to registered users)
Tu primera tienda online (Your first online store) (Published on its own website, also sending a daily class by email autoresponder)

In March 2014 I began to prepare material to publish a new course called Creación de temas WordPress profesionales (Professional WordPress theme creation), but on this occasion I decided to publish it on my own platform – pro.franciscoamk.com.

Screenshot of the Professional WordPress theme creation course shown on Francisco's website.

My requirements for this platform included being able to offer my students a learning experience as nice as Udemy’s, being able to decide how to communicate with my students, to contact them and promote my course, and most importantly, being able to charge a fair and low price, by not having to pay 50% commission per student registered.

Additionally, this platform should allow me to have all my courses in one place, offering a simpler mechanism to manage and sell them as well as being able to sell other kinds of products such as ebooks and themes.

This is how I discovered Sensei and its excellent integration with WooCommerce. Love at first sight!

Getting the platform ready

In order to prepare the platform, the first step was to create a new WordPress installation and install the following plugins:

WooCommerce: to enable the shopping cart system.
WooCommerce Google Analytics Integration: to keep track of visits and add to cart actions.
Sensei: to enable the publication of courses and lessons.
Sensei Modules: to divide each course into modules.
Sensei Media Attachments: to attach files to my lessons.

Sensei settings are very simple and offer the required options. The most relevant setting adjustments were:

Users must be registered to see courses and lessons.
WooCommerce will be used to sell the courses.

I need to collect my students’ personal information in order to keep in touch with them, including those who are taking free courses. This is why I made these restrictions.

Creating a course which can be sold is easy. You just need to create the product on WooCommerce and from the Sensei course editing page to associate the corresponding product with it.

In order to test the platform, I published a course called Dominando WordPress sin Programación (Mastering WordPress without programming) whose videos are originally published on YouTube. They worked well but I needed a way to delete the related videos once they finished. So I used the Hide YouTube Related Videos plugin to solve this problem.

It is very important for me to synchronize my registered students with a subscribers list in Campaign Monitor. Therefore, I installed the Campaign Monitor Synchronization plugin to associate all my students with a new list and used the “_money_spent” data to create a segment with those students who have paid for their courses.

Finally, as the platform and courses should be in Spanish, I used the Codestyling Localization plugin to translate all messages generated by Sensei and the other plugins.

Creating the design

As a designer, the visual aesthetics of the website are very important. However, it was not my intention to use a common theme. So I created my own theme based on my blog style to keep the design consistent.

Sensei provides the ability to change its appearance, by making a copy of the template files within the active theme.

The folder looks like this:

Screenshot showing the website's folder structure.

Thanks to these files I was able to modify the following:

Container elements of Sensei pages to match the classes and ids used in the theme.
The add to cart button not only adding a course to the cart, but also redirecting the user to the checkout page to finish the purchase immediately. Basically the route must be similar to http://website.com/checkout-page/?add-to-cart=PRODUCT-ID.

Additionally, I modified the WooCommerce behavior, deleting most of checkout fields and preventing the common styles from loading on the front of the site. This was accomplished by adding some code to my theme functions file:

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

/**

* Remove checkout field

* @filter woocommerce_checkout_fields

* @since 1.0.0

function apk_override_checkout_fields( $fields ) {

unset($fields[‘order’][‘order_comments’]);

//Billing

unset($fields[‘billing’][‘billing_company’]);

unset($fields[‘billing’][‘billing_address_1’]);

unset($fields[‘billing’][‘billing_address_2’]);

unset($fields[‘billing’][‘billing_city’]);

unset($fields[‘billing’][‘billing_postcode’]);

unset($fields[‘billing’][‘billing_state’]);

unset($fields[‘billing’][‘billing_phone’]);

unset($fields[‘billing’][‘billing_country’]);

//Shipping

unset($fields[‘shipping’][‘shipping_first_name’]);

unset($fields[‘shipping’][‘shipping_last_name’]);

unset($fields[‘shipping’][‘shipping_company’]);

unset($fields[‘shipping’][‘shipping_address_1’]);

unset($fields[‘shipping’][‘shipping_address_2’]);

unset($fields[‘shipping’][‘shipping_city’]);

unset($fields[‘shipping’][‘shipping_postcode’]);

unset($fields[‘shipping’][‘shipping_state’]);

unset($fields[‘shipping’][‘shipping_phone’]);

//Email

$fields[‘billing’][‘billing_email’][‘class’] = array(‘form-row form-row-wide’);

//Usuario

$fields[‘account’][‘account_username’][‘label’] = ‘Elige un nombre de usuario’;

$fields[‘account’][‘account_password’][‘label’] = ‘Crea una contraseña’;

return $fields;

}

add_filter( ‘woocommerce_checkout_fields’ , ‘apk_override_checkout_fields’ );

/**

* Remove default WooCommerce stylesheets

* @filter woocommerce_enquque_styles

* @since 1.0.0

function apk_dequeue_styles( $enqueue_styles ) {

unset( $enqueue_styles[‘woocommerce-general’] );

return $enqueue_styles;

}

add_filter( ‘woocommerce_enqueue_styles’, ‘apk_dequeue_styles’ );

view raw

amk.php

hosted with ❤ by GitHub

Note from Woo: If code scares you, you can use our WooCommerce Checkout Fields Editor extension to add/remove fields on the checkout page.

Selling different packs

This platform would be launched along with my Creación de temas WordPress profesionales course which had a unique characteristic: It had to be sold in different packages at different prices with each package giving access to different contents.

The basic package would have access to the course only, the intermediate package access to the basic course plus an extra module (this is within Sensei as a separate course) and the full package access to the basic course, the additional module plus access to a 100% free coupon for Diseño web con HTML y CSS desde cero currently published at Udemy.

In order to meet the need of granting different accesses, I read the case study of the Vitruvian Fine Art Studio, but honestly speaking, the method used there did not serve my purpose. I decided to use the Product Bundles extension to create these packages. This way, the person buying a pack would have access to one, two or three courses within the platform.

I created a landing page to promote the course which initiated the use of this platform. On this page visitors would be offered the option to choose one of the three available packages in the course.

These landing page purchase links used the same procedure to avoid the add to cart option and redirect to the checkout page, each pointing to the grouped product specific ID – for example http://pro.franciscoamk.com/finalizar-comprar/?add-to-cart=343.

Pricing table. — The pricing table on the landing page

After launching the platform

When the platform was launched and students began to use it, I discovered some limitations which I could solve with some additional plugins:

Limit login attempts: to avoid reiterative invalid entry attempts.
Crayon Syntax Highlighter: to allow students to share code fragments with the instructor within comments in each lesson.
User Switching: to allow me to visit the platform as is seen by the users. This way I can help them with any kind of problems in the lessons, access their accounts, etc.
WP Mandrill: to send mails generated by the platform through Mandrill servers. Some users had reported not having received mails such as purchase confirmation. Nevertheless, since Mandrill has been installed and set up, all mails are effectively delivered.

Conclusion

WordPress + WooCommerce + Sensei = one of the best combinations ever. This is a great tool which allows me to publish my material and have full control of important functionality, such as communication with my students, promotion strategies, limited offers or discount coupons.

As a designer, this combination has also given me freedom to design the platform according to my needs and style, without any restrictions.

It is up to us how creative we can be to meet our students’ needs using these three tools. In addition, I have received very positive comments from my students.

I hope this post will be helpful and has given you some ideas for your own online learning platform.

Have Work For Us?

Let's Discuss Your Project

It's extremely easy