Creating Mission Astro, An Online Astronomy Course

November 18, 2022

Web X Design Studio recently launched Mission Astro, an online astronomy course. This was one of our largest projects to date. In this blog, we'll explore some of the technologies, intricacies and insights from this build. If you are looking for an online course, reach out to us for a chat about your needs and requirements.

Making dreams come true with website monthly payment plans

This project all started when Sarah, my client, saw me responding to a post asking for WordPress help in our local village Facebook post. She asked for a chat to get some indication of what it would take to turn her ideas into reality. In particular, a ballpark budget number so that she could secure the funds for the project. Her thinking was that she would not be able to do anything for 12 months, but when she heard that Web X Design Studio offers monthly payment plans, her dreams started to become a reality.

Without the monthly payment plan I would not be able to commence this project for at least another 12 months.

Dr Sarah Crick, founder Just Good Science Ltd and Mission Astro

Background

Sarah has a PhD in astronomy, numerous published research articles and teaches both physics and astronomy. She wanted to bring the joys of astronomy to a wider audience by creating an online astronomy course which focuses on topics which aren't generally included in school syllabi. To accomplish this, the following was needed:

  • A website to advertise the course and allow signups and purchases
  • A Learning Management System (LMS) to host the lessons
  • Video hosting for all the lesson content

Building the website with WordPress and Oxygen Builder

WordPress powers more than 40% of all websites and is our go-to content management system (CMS) at Web X Design Studio. We typically use Oxygen Builder to build the website content. Oxygen is a modern page builder which produces clean and fast code. You want to give your site visitors a fast-loading website and experience. No one likes a slow site and to tie in with that, Google and the other search engines now take into account website speed as a ranking factor. As you can see from these speed results of the Mission Astro website, performance is right up there:

image 140

Website Design

We had previously worked with Sarah on her tuition website, Just Good Science. This design was used as the basis for Mission Astro and then built upon as the project progressed. Sarah also provided a number of sketch outlines to convey her vision for the site, such as:

mission astro home page design

These are great guides to ensure we do not stray too far from what our clients desire. As you can see from the finished Mission Astro site, the overall design isn't too far away from the initial intent.

Circles

Circles are a common shape in astronomy, and Sarah wanted circles to be used where possible in the design. Here are a few examples of where we used circles to enhance the page design and to meet the client brief:

image 141
Animated counters with a nice gradient which uses the brand colour palette.
image 142
Round icons with a round background. All our clients have access to a premium icon library to choose icons from.
image 143
Unique bullet points that depict an asteroid belt.

A Formula 1 grid of experts

One of the unique aspects of Mission Astro is that each lesson includes an expert interview with one or more specialists in the topic being discussed. Overall, there are more than 40 experts included in the full Mission Astro course. Sarah wanted each expert to be credited on the website and to have them displayed like "a Formula 1 starting grid". Here's the end result:

image 144
https://missionastro.org/experts/

Within WordPress, experts have been set up as a Custom Post Type (CPT) (using Metabox) with the attributes that you can see on each card. Sarah is able to add and delete experts herself and update any of the information, including the image to display herself.

Tickets to Mission Astro

The copy for Mission Astro talks about "getting your ticket for the Mission Astro rocket". Sarah wanted tickets to be visually displayed as something like a classic cinema or train ticket:

mission astro ticket design

These types of shapes are not standard web elements. They would either need to be created as an image or use some custom CSS (cascading style sheets) code. We took on the challenge of creating these in CSS. While this is the more complex route, it provides two key benefits. They are more lightweight than an image, which means the page loads faster. And they are easier to update in the future. Just need to change the text rather than producing entirely new images. Here's the result from the Mission Astro signup page which we are quite pleased with:

image 145

Selling Mission Astro courses with WooCommerce

Mission Astro offers a free astronomy "taster" course as well as the paid-for main course. The main course is discounted for those in full-time education. In order to sell the courses, WooCommerce, the leading WordPress eCommerce solution was chosen. This may be a little overkill for the initial needs of Mission Astro, but it offers the following advantages:

  • Tight integration with WordPress and Oxygen Builder
  • Tight integration with LearnDash, the chosen learning management system
  • Free to use for the main eCommerce use cases
  • Extremely extensible to cover future use cases such as group selling

You can signup for the free taster course or the full Mission Astro course here.

Built locally, selling globally

Mission Astro and Web X Design Studio are both UK-based organisations. The Mission Astro course is available to anyone globally with an interest in astronomy and who understands English. Pricing is initially in GBP (Great Britain Pounds). In order to make it easier for non-UK-based customers to purchase, a currency converter was added, so it is easy to see how much the course costs in their local currency. This was added using the free Currency Converter Plugin:

image 146
image 146

Mission Astro Gift Cards

For those customers looking for astronomy gifts, Sarah wanted to make Mission Astro gift cards available. So take an upfront payment in return for a digital gift card that the customer or their recipient redeeming against the full Mission Astro course.

Mission Astro gift cards are available on the main site. This functionality was created using the free Flexible Coupons PDF plugin:

image 147

Mission Astro is an astronomy course available to an international audience. It is aimed at those who are aged 13 or older, which is the digital age of consent in the UK and the USA (the age when someone does not need parental/guardian consent for their personal information to be collected). However, the digital age of consent varies from country to country. We needed to ensure we were compliant with digital laws internationally as there is a strong probability a keen child main sign up for Mission Astro.

WooCommerce does not support this check natively, so additional options were added to the checkout page (used for both the free and paid courses) asking if the customer was above the digital age of consent for their country, and if not, asking them to enter the name of their parent or guardian. At that point, the parent or guardian is emailed to let them know a child of their responsibility has signed up. They can then contact Mission Astro to revoke access if necessary.

image 148

To ensure customers know what the digital age of consent is for their country, a list of countries and ages has been added to the checkout page:

image 149

It should be noted, that Mission Astro treats all customers the same. Only essential information needed for processing the purchase and delivering the course is collected.

The additional field and logic required for the digital age of consent were added to the WooCommerce checkout pages using the Checkout Field Editor for WooCommerce plugin.

Building the Mission Astro Course with LearnDash

To build a course, a Learning Management System (LMS) is needed that hosts the course content, allows progressions through the course, gives quizzes and assessments, certificates on completion etc. Initially, we were going to use Tutor LMS. Tutor LMS is a newer offering to the market and claims good integration with Oxygen Builder. On testing Tutor LMS, it became apparent that while easy to use, the capabilities needed, particularly around course progression and group membership signup was not there.

We pivoted to LearnDash LMS which is the most popular Wordpress LMS. It's been around longer than Tutor, which shows with a slightly more dated backend, but capability-wise and extendability-wise, it is a better choice than Tutor for us. Even though it is more expensive than Tutor, we needed the strong foundations to be able to build on further in the future. Forward-thinking is a key decision-making criterion as you don't want to build on one platform and then six months down the road have to rebuild on another platform as the initial selection was flawed.

Self Management of Course Content

Most learning management systems will allow the delegation of course content creation to the course owner, and this is what LearnDash allows and what we have set up. Web X Design Studio built the course structure, and all content and quizzes are now entered by Sarah:

image 150
Building the Mission Astro Course structure
image 151
A simple WYSIWYG editor for entering course content

Adding latex formulas to LearnDash

Throughout the course and in the course quizzes and assessments, mathematical formulae need to be displayed to the students. WordPress and LearnDash do not support the display of mathematical formulae out of the box.

There is a standard for entering formulas in regular text and having them displayed correctly called latex. A number of WordPress plugs support the latex standard, but we found many were not compatible with LearnDash. After some trial and error, we settled on MathJax-Latex which works perfectly in Learndash, both for course content and within the quizzes.

image 152
Entering a question in latex format
image 153
Latex formulae displayed in a LearnDash question

Video Editing

Web X Design Studio is not just about producing great-looking websites that convert. We're also a dab hand at video editing. Mission Astro has more than 30 one-hour video lessons, each with an introduction, a learning session, one or more expert interviews and a wrapup. Web X Design Studio has produced every lesson along with a promotional video for Mission Astro.

Video editing with the free Davinci Resolve

Davinci Resolve is a wonderful video editing suite that we use at Web X Design Studio. It comes in both a free and a premium version. The free version is extremely powerful, and we've had no need to purchase the premium version while producing Mission Astro.

image 154
Creating Mission Astro videos with Davinci Resolve

Mission Astro promo video

As well as the course content videos, we produced the Mission Astro promotional video which you can see on the home page, or view here on youtube:

https://www.youtube.com/watch?v=aCxIwgBmr6Y&t

Green Screen Editing

Much of the video content has been recorded in front of a green screen allowing us to show any kind of background behind Sarah, whether that be an image or a video. Davinci Resolve makes it very easy to go from this:

image 155

to this:

image 156

Secure, fast and cheap video hosting with Bunny Stream from Bunny.Net

The video lessons needed to be restricted to only those customers who have signed up for Mission Astro. While YouTube allows for videos to be hosted for free, there is no means to restrict access totally or to prevent sharing of the videos.

A different video hosting platform was needed. Vimeo was our next choice, allowing for restricted content, but the monthly costs would be considerable for a startup organisation. Bunny Stream from Bunny.Net was ultimately chosen.

Bunny Stream allows:

  • Restricted videos viewable to only logged-in users
  • Prevents sharing of videos
  • Video hosting in multiple locations around the world (so videos play close to users)
  • No on-screen advertising or distractions
  • Combined with Presto Player, tight integration with LearnDash

Bunny charge for the video storage used as well as the bandwidth consumed to access them. Even with 300GB's of video being stored with them, we've calculated that this will only cost a few dollars per month.

image 157
Presto Player + Bunny Stream video hosting integrated with LearnDash

Conclusion

Web X Design Studio has allowed Sarah to fulfil her business dreams with our flexible payment plans, our design and development expertise, our video editing know-how and our overall full white-glove personalised services. If you're looking for a new website, delivering an online course or in need of some videos to be edited, do contact us for a no-obligation chat.

If you or someone you know has an interest in astronomy, then give Mission Astro a go. There's a free astronomy lesson available to all.

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram