Many businesses have suffered a harsh impact on operations since the pandemic arrived on earth. For the Education industry relying on physical classroom environments for centuries, this needed an especially flexible adaptation to survive. With teachers and students staying at home, the entire education system was over-reliant on video conferencing through Zoom/Skype, but they were not desirably scalable. Ed-Tech enterprises & startups have been supporting educational institutions by developing the technological infrastructure needed to fill this gap.
The problem with traditional web development
Legacy websites use a complex system of web servers (like Apache), applications (like WordPress) and databases (like MySQL). Such a website will be needlessly slow, have many security vulnerabilities, and are expensive and time-consuming to scale.
Especially for the Education industry, it is becoming increasingly difficult to survive on video calling platforms not built for a class of 50+ students. Ed-tech firms looking to solve for the lack of physical classroom experience need a solid tech foundation and it starts with their website which is the front of customer acquisition.
The legacy web is slow, vulnerable to attack and expensive to scale.
Our strategy for a faster and scalable solution
To provide a scalable and flexible platform, we needed a secure, accessible, and high-performance website for an emerging EdTech company that wanted to pivot its business model from B2B to B2C. Our development goal was to provide a delightful customer experience with a frictionless customer journey based on intuitive UI/UX design. The backend architecture was required to be manageable even by non-tech marketing specialists from any domain to be able to modify the content with ease of use.
To meet these specific requirements of having a highly scalable, easily manageable framework that can also be controlled via a Content Management System (headless CMS), we had to choose the best fit from the latest technology. The dev stack of choice should be able to deploy sites directly to CDN without traditional server dependency. For seamless UX, webpages must be pre-rendered for speed instead of building content at runtime every time the page loads. Finally, adopting a more modular process where we can decouple the frontend from backend was strategized for scaling up & taking advantage of 3rd party frameworks.
Pre-rendered webpages for speed. Direct CDN deployment to overcome server limitations. Decoupled frontend and backend for scalability.
How our developers did it?
After analyzing the EdTech firm's business needs, we recommend using Jamstack with a combination of Gatsby (a React-based frontend framework) and Drupal, as a de-coupled & headless CMS. The core benefit of this tech stack is fast-loading content served directly from a CDN which reduces the cost, complexity, and security risks of traditional servers (pre-rendering). They also provide an adaptable atmosphere across platforms which enables sites to be delivered with greater confidence and resilience.
Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs. We implemented the Jamstack, Gatsby, Drupal combination for the following benefits:
• High Performance – Due to lowering dependency on the server and heavy-lifting at the browser side, we can have faster-loading pages. Thus, providing higher performance numbers from the landing page than usual.
• Easily Scalable – Selecting the right cloud platform that could easily be scaled putting to use a mix of leasing technologies like Amazon S3 and a CDN (CloudFront). Therefore, the static sites automatically become scalable.
• Higher Security – Jamstack supports ensuring better authentication standards for users like OAuth, using micro-service APIs, etc. which reduces surface areas for attacks.
• Compatible with easy-to-use CMS – Drupal was used as a headless CMS, a content management system that provides a way to author content, but instead of having the content coupled to a particular output (like web page rendering), it provides content as data over an API. Therefore, eliminating the need to keep a different stack for marketing and content.
• Huge Developer Community of Gatsby – From a plethora of plugins available and contributed on the community, we could take advantage of third-party tools that support the website functionality we need. For instance, with the provision of “Image”, a plugin of Gatsby, we were able to optimize images on every device. It provides a fast, uniform user experience resulting in higher conversion rates for landing page.
The Marketing & Business Impact
We finalized the tech stack only after carefully weighing the business & marketing benefits against other technology options. Our long-term business value-add was the cost & time efficiencies from the scalable and secure setup. Our marketing impact was more immediate in providing a faster-loading landing page resulting in higher conversion rate and reduced bounces. The image and page content optimization for different devices were crucial factors in improving the technical SEO of the website for organic growth and discoverability.
If you have a similar (or even quite different) business/marketing challenge and are wondering how to approach the technology evaluation and implementation, we never shy away from a MarTech challenge:) Our project managers are just a click away.
Contact us for a free technical consultation with our specialists to help you select and implement the right technologies for your business growth.
Authored by:
