Learn Squared
Migrating an outdated e-learning platform from Drupal to Jamstack
About The Client
Learn Squared is an e-learning platform offering a wide range of art courses. It has helped over 20,000 students from around the world level up their artistic skills, and break into their desired industries.
The platform provides professional courses that equip individuals with the skills required to secure dream job positions in established companies.
Challenge
Outgrowing Monolithic Drupal
Working with outdated technology can be frustrating and time-consuming due to compatibility issues, limited functionality, and the need for workarounds or manual interventions. What’s more, it’s not cost-efficient, considering how much time you have to spend rethinking the way to improve the platform. Paying for something, that’s not supported even by the provider, is just a waste of money.
And that’s why Learn Squared was looking for a way to get rid of Drupal 7.
They faced many challenges arising from the monolithic Drupal platform they were using. The inflexible nature of the platform made it complicated and time-consuming to create new features, delaying the project's ability to stay competitive and adapt to market demands.
The outdated tech stack limited the platform’s potential for innovation and scalability. Learn Squared experienced noteworthy issues with website performance, impacting the user experience. Moreover, Drupal 7 no longer receives updates and security patches from the provider, so the project was exposed to security risks and compatibility issues.
Another problem was a non-intuitive checkout process which influenced smooth and efficient purchases, leading to abandoned carts and lost revenue opportunities.
Learn Squared was looking for a custom solution that would provide higher performance, improved user experience, enhanced flexibility for feature development, and an intuitive checkout process.
Solution
To address those challenges, our team proposed a comprehensive solution, offering a full-house service that included:
to run technical feasibility and choose the best and the most efficient tech stack, as well as the delivery scope
which included migration to a new platform and integration with a new e-commerce platform
to support the product after its release, continue working on new features, implement users' feedback and quickly respond to any problems or bugs
"To address the Learn Squared’s challenges we provide a holistic approach. After the Discovery Phase, we gained a total understanding of the project and were able to ensure a seamless development process from start to finish. By actively involving the team in the planning process, we ensured total familiarity with the challenges and objectives, eliminating communication friction.
Moreover, with our post-release support, Learn Squared can rely on a team that knows the product inside out and can quickly respond to any needs or issues, allowing for fast execution without the time-consuming onboarding of the new people into the project.”
Chris Lojniewski, CEO & CTO at Pagepro
DISCOVERY PHASE
The discovery phase played a crucial role in understanding the current website functionalities and identifying areas for improvement. It involved an in-depth investigation and analysis of the existing setup and an exploration of suitable solutions.
Understanding the data structure in Drupal was quite challenging. Despite having a relational database, Drupal 7 doesn’t have built-in support for foreign keys in its database schema.
Furthermore, the custom-built and customized Drupal system, developed over the years without proper technical documentation, added complexity to the migration process. As a result, analyzing data relationships based on content became necessary.
We run a special session with the project owner and the internal developer to understand the whole website structure.
Following that, we were designing a new structure that would allow for data migration from Drupal, while also aligning with the capabilities of the new tech stack. We decided to migrate the platform from Drupal to Strapi and integrate it with Shopify (to provide full support for the e-commerce functionalities) and marketing tools, necessary to run proper advertising and analyse marketing activities.
To provide frictionless development, we choose a team of 5 to run the project: Full-stack Developer, 2 x Front-end Devs, Project Manager and a Tester. Our CTO was available for any technical consultation the customer required during the process.
Want to Migrate Your Website?
Tell us about your challenge, and let's get the ball rolling.
Tech stack
Next.js for UI / Front-end Development
We chose Next.js for building the front end. It simplified the development process and ensured optimal performance for the website. As an e-learning platform, Learn Squared requires dynamic content generation and personalised user experiences. Next.js offers server-side rendering, allowing content to be rendered on the server and sent to the client as fully rendered HTML. This improves performance and ensures that content loads quickly, providing a seamless and interactive learning experience.
Additionally, Next.js allows for quick and smooth integration with third-party tools, which are an integral part of e-learning platforms. In this project, among others, we integrated JWPlayer to properly display the content in each course.
One of the customised sections we built was the dynamic form for homework. Here, the student can upload various types of files that are required to finish the courses. Just take a look at how user-friendly the form is right now:
The initial plan was to migrate the whole platform exactly how it looked like in Drupal, but during the development, the customer decided to improve it a little bit. The customer provided us with all the designs, and by using Next.js we could implement it without any friction.
Hosting on Vercel
The website is hosted on Vercel because it’s specifically designed for Next.js applications, offering seamless integration and optimal performance. Vercel's support for incremental static regeneration allows for efficient generation and delivery of static content, ensuring that the website loads quickly and provides an exceptional user experience even with resource-intensive media files. And this is particularly important for projects like this one, that involve high-quality images and videos.
Shopify as a Headless CMS
For the e-commerce functionality, our team recommended Shopify. The customer mentioned it during our first meeting because it boasts a vast collection of plugins and add-ons that enhance the functionality of an e-learning platform. These plugins enable integration with the learning management systems, and video hosting platforms, providing flexibility and customization options.
What’s more, Shopify provides a robust Storefront API, allowing developers to create tailored front-end experiences for e-learning platforms. This flexibility enables seamless integration with existing branding guidelines, design elements, and user experience considerations, providing a consistent and cohesive learning environment for students.
“Many customers are convinced that using Shopify means keeping the whole shop on one platform and building it exactly the way others do. And that’s not true. You can deliver the whole buying experience on your website and redirect the customer to Shopify only for payment. This way you can build the user interface however you like, using the tools you want. That’s a great way to stand out from the crowd of looking-alike online shops or, like here - e-learning platforms.”
Adrian Dudko, Project Manager at Pagepro
And that’s the way we did it for Learn Squared - we’ve connected Shopify through API and built the whole buying process on their website, so the customer is redirected to Shopify only for the payment. Thanks to this we could make a unique frontend, accordingly to the customer’s designs.
Learn Squared had two more requirements from Shopify - to provide a clear refunding process and detailed reporting, which was crucial for determining payroll for their partners. To guarantee that, we opted for the second pricing plan, which provided enhanced reporting capabilities while maintaining cost efficiency.
Strapi for backend and content management
In addition to Shopify, we utilised Strapi as the chosen headless CMS. While the initial plan involved using Sanity, we found that Strapi better suited the project's needs. Strapi not only provided an admin panel for easy content management but also offered a comprehensive API framework for integrating custom logic and creating a flexible and scalable architecture.
To align the CMS with the unique customer requirements, we customized it and add features like:
Automated Course Access Based on Shopify Purchases/Refunds
To streamline the user journey, we integrated Strapi with Shopify, allowing for automatic granting and revoking of course access based on purchase or refund transactions. This automated process ensures that users gain immediate access to their courses and are promptly removed from the course upon refund, providing a seamless and efficient learning experience.
Mailchimp Integration for Automated Contact Data Updates
This integration enables automatic updates of contact information based on user actions on the website, such as editing basic details or capturing information about recent purchases. By synchronizing data between Strapi and Mailchimp, our customer can effortlessly maintain accurate and up-to-date contact records, enabling targeted and relevant email marketing campaigns.
Discord Bot Integration for Exclusive Course Discussions
Users who purchased a course are automatically granted access to a private Discord channel dedicated to course discussions. This integration fostered a sense of community, allowing participants to interact, share insights, and collaborate with fellow learners, enhancing the overall learning experience.
External Partner Program Integration
We integrated the Learn Squared platform with Kitbash3D's system. As a result, users who made purchases gained access to exclusive discount codes, broadening the range of resources available to them.
Even though the project was very complex, we followed a fixed-price approach, to ensure transparency and cost control for the customer.
To accommodate specific requirements and additional requests, we agreed to handle "out of scope" work on demand, allowing for flexibility and customization as needed.
AWS for Strapi Hosting
We decided to use AWS mostly because it enhanced the performance and scalability of the Node.js app, which Strapi is.
After the load tests, we realize that the initial efficiency of the platform can be not enough for the higher user engagement, which happens on e-learning platforms in the US, especially on days like Black Friday. The tests help us choose the best hosting parameters, and optimize the quality and costs.
By implementing containerization, our developers created a consistent and isolated environment, simplifying setup and configuration processes, and enabling faster deployment cycles. This allowed us to deliver efficient and scalable application development, ensuring an enhanced experience for our customers.
Additionally, the execution of a well-structured CI/CD pipeline ensured a seamless deployment of updates, further optimizing the delivery of new features and improvements.
Jamstack Development
The development process was divided into 13 2-week sprints, with a demo held each week to showcase the progress. Also, we send daily updates to keep the customer on track.
APP1 Kick Off
Sprint 1
Static Components
Sprint 2
APP3 Kick Off & Data Models
Sprint 3
APP3 Data Migration
Sprint 4
CMS Pages
Sprint 5
Courses
Sprint 6
Authorization & Integrations
Sprint 7
Sprint 8
Shopify Integration Start
Sprint 9
Courses
Sprint 10
Authors & Reporting
Sprint 11
Last Data Migration, Integrations
Sprint 12
Last Data Migration, Integrations
Sprint 13
Release
APP1 Kick Off
Sprint 1
SPRINT 1
APP1: Project boilerplate (NextJS, TypeScript, Storybook)
Repository, Vercel test version and CI/CD implemented
Static components library with Storybook Part I
Static Components
Sprint 2
SPRINT 2
Static components library with Storybook Part II
Drupal Backoffice investigation, plan for data export
APP3 Kick Off & Data Models
Sprint 3
SPRINT 3
APP3: Project boilerplate (Strapi)
Repositories, AWS Configuration
APP3: Preparing API data models
Static components library with Storybook Part III
APP3 Data Migration
Sprint 4
SPRINT 4
APP3: Preparing scripts for data migration (Drupal -> Strapi)
APP3: Users
Static components library with Storybook Part IV
CMS Pages
Sprint 5
SPRINT 5
APP3: CMS Pages / Landing Pages
APP1: CMS Pages / Landing Pages
APP3: Lessons
APP3: Courses
Courses
Sprint 6
SPRINT 6
APP1: Courses List & Course Details
APP1: Lesson Experience
APP3: Orders & Invoices
Authorization & Integrations
Sprint 7
SPRINT 7
APP1: Authorization & User Accounts
APP3: Integrations (JWPlayer, MAIL)
Shopify Integration Start
Sprint 8
SPRINT 8
APP1: After Login Functionalities
APP2: Shopify Configuration & Data Migration
Courses
Sprint 9
SPRINT 9
APP3: Licences
Speed & SEO Optimisation
APP1: eCommerce Functionalities
Authors & Reporting
Sprint 10
SPRINT 10
APP1: Authors & Reporting
APP1: eCommerce Functionalities
Last Data Migration, Integrations
Sprint 11
SPRINT 11
Custom URL Redirects
Enterprise Plans and Affiliate Access
Advanced Coupons Support
Last Data Migration, Integrations
Sprint 12
SPRINT 12
APP3: Email notifications
Another Data Migration
APP1: Integrations (Newsletter, GTM, GA)
Release
Sprint 13
SPRINT 13
Setting Up Servers & Deployments (PROD)
Image crop / Focal Point
PDF Invoices
Analytics Tools Update (GA)
Production Release
Release
Data migration from the existing website was, as always, a critical aspect of the project, ensuring everything remained up-to-date. This process required synchronisation with the client and considering varying time zones. In fact, the time difference resulted in a shorter website shutdown - when we were migrating the data from Poland, in the US was night, and the traffic on the website was minor.
Together with the client we chose the date for the content freeze when he couldn’t change anything in the content. Then we could migrate the courses and pages exactly how they were on the previous website and give the customer time to check out if it is as it should.
By the release day, we didn’t migrate any user-related data, because it changes constantly - the users are taking lessons, subscribing to new courses etc. So only on the launch day, once the website was set into read-only mode, and the users had restricted options in managing their accounts, we migrated the customers related data from Drupal to Strapi.
Thanks to the effort of the whole team, active collaboration with the customer and a defined plan for release, the launch process took us no longer than 4 hours so the platform was back for users quickly.
Results
The project benefits from the migration from the outdated Drupal platform to Jamstack in many ways:
Website Performance: Our customer admits, that the website performance is the single largest improvement since the new platform launch. He says: "The site is incredibly fast and responsive now, and makes navigating the platform much more satisfying."
Superior User Experience & Conversion Rates: The improved website performance delivers a seamless and satisfying user experience. Faster loading times, heigher website performance, and an intuitive interface provide users with an enriched and dynamic learning experience. This has resulted in a notable 4% decrease in the bounce rate and a 24.35% increase in revenue within the first 26 days since launch. (It's important to consider that additional factors like recent sales and new course launches may have also influenced this metric.)
Unrivalled Flexibility & Speedy Development: Our migration from the outdated Drupal platform to a modern Jamstack solution provided maximum flexibility, enabling smooth integration of new features and enabling the platform's rapid evolution in response to changing market demands. This adaptability greatly decreased development time, supporting faster iterations and expedited delivery of enhancements. Our customer admits that: "I don't really have a number of hours to represent that increase, but as the one who oversees operations of development, I can confirm the turnaround time from ideation to feature launch has been a marked improvement upon our previous development solution."
Guaranteed Compatibility & Higher Security: The migration ensures full compatibility, forced security, safeguarding and establishing a robust and future-proof infrastructure. This guarantees a reliable and safe learning environment for the users. Additionally, the reduced maintenance enables our customers to allocate resources more efficiently.
Top-Tier Technologies & Enhanced Security: The choice of cutting-edge technologies — each backed by established providers, vast communities, and a commitment to continuous improvement has enhanced the platform's capabilities. It provides peace of mind for both the users and administrators. The valuable data remains protected, while the platform benefits from regular updates and continuous improvement.
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
We've absolutely seen an increase in development velocity with the Pagepro team, through initial development and even into the initial weeks of our first SLA. I don't really have a number of hours to represent that increase, but as the one who oversees operations of development, I can confirm the turnaround time from ideation to feature launch has been a marked improvement upon our previous development solution.
Andrew HawrylukCo-founder, Learn Squared
HAVE A PROJECT?
LET’S TALK ABOUT IT!
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
Tell us more about your project
Please provide detailed information about your challenge, and our tech team will promptly review your submission. Expect to hear from us within 24 hours with tailored next steps and insights based on your request.
Book a Meeting With Our CEO
Upon receiving your form, we typically recommend a briefing meeting with our CEO to explore the specifics of your project. Schedule your meeting now to kickstart a tailored approach.
Chris Lojniewski
CEO & CGO