EducationEducation First

EF provides life-changing education for global citizens. For over 50 years, their mission has been to give confidence and freedom to people of all ages, nationalities, and backgrounds. EF opens up a world of possibilities. EF is based upon its global presence bringing a suite of educational products, their schools and destinations, accreditations, and most importantly, being an international language school based in 55 countries worldwide.

Education First built and created an entire global site with more than 9000 pages, containing over 54 language variations, that could be generated and published to QA in an hour and promote those generated pages to production environments within minutes. Education First developed a brand new, global multilingual enterprise-level site in just eight weeks, compared to the previous 4 to 6 months.

The Origin Story & Challenges

Education First’s journey to Storyblok spans the last 4 years in a 7-year story where the organization was heavily invested in an enterprise CMS. Functionality-wise, Education First (EF) thought they had a good fit for the company, yet somehow, with years of usage, the team felt they were slow on deliveries. Every time they took a closer look as to why that was, the team resoundingly pointed to the overall user experience.

Education First spoke with other product teams to make sure it was not just an isolated problem. Together, they all saw that roles from editors, frontend and backend developers, as well as stakeholders, all shared a resounding issue. There was a steep learning curve of the system that included insufficient documentation and only certified personnel to use the system that consequently was only the ‘tip of the iceberg’. At that point, it was also really hard to get truly specialized knowledge that could lead to innovation within the organization. EF had to work with certified contractors of the system, meaning there was only a very small pool of registered professionals to work collaboratively. Any change in content, update, and end code, meaning that everything on the frontend was also consequently slow. The CMS was quoted several times as the reason why, across multiple teams, projects were not delivered on time.

There were challenges across the board, but at its root, delivery speed was the main resounding issue amongst Education First that needed to be addressed and solved first. Having considered all of these factors, EF’s main ambition at the time, and still is a continuous focus for them now, is the ability to tap into content personalization. Having grown and evolved these pages on a major full-CMS, EF considered the technology stack and requirements for its next-generation websites.

Why did Education First choose Storyblok and adopt a Next.js framework?

Education First was not ‘blind’ to the growing presence of headless CMSs on the market, and that in itself was the catalytic authority to create the move to a headless setup.

The organization understood that they needed the flexibility of accessing an API that would restructure content and target different mediums. This created a new sort of ‘breath’ in their structure to tackle new projects.

When EF first looked into the option, they realized that going headless would not only give them the structure of a ‘traditional CMS,’ meaning structuring and modeling data around routes to create a website or an app, but also content repositories when it fits the specific product that they need. This meant that the scheme they were looking to adopt was not limited to just one medium output, but the ability to output across cross-teams, products and mediums - i.e., modeling your content once and using it across multiple mediums and devices. In the same manner, EF was attracted to graphing the content repositories to create new ones that would be specialized towards a specific market meta.

Consequently, having a programmatic API that could hook them up to and handle component schemas and content migrations, was one of the unique attributes that EF uses in handling automation (one of their previous requirements).

Telmo Dias (Solution Architect at Education First) cited that having a headless setup allows the organization to choose the templating frameworks for each individual team project across the company that synergizes with the current developer pool EF has been using React and Next.js. As a result, projects were spun out and developed faster using frameworks that developers are already familiar with rather than relearning a new one.

During the evaluation process of coming to headless, Telmo’s team saw that headless was relatively hands-off and did not require the gathering of too much responsibility amongst integrations, something to keep in mind when needing to build components or apps in a more traditional setting. One thing that Telmo’s team was repeatedly seeing amongst other systems was the gathering of responsibility that arguably could or could not be compatible with the CMS, such as analytics, A/B testing, or personalization. It was essential to Education First to find a setup that allowed them to use the best-of-breed integrations and technologies.

Another vital factor Education First considered was having a UI (user interface) that allowed the previewing of content as you went along your content experience - something that could be easily used across different team members and departments within the company.

For example, EF’s more significant product site has around 211 registered editors across 60 markets in different roles from sales, marketing, developers, and more. Having a UI that allows such previewing as the visual editor makes it easier for cross-team to present and collaborate on various projects.

Results, Learnings & Progress

An entire global site with more than 9,000 pages containing 54 language variations (486,000 pages) can be generated and published to QA in 1 hour. Promotion of the generated pages to production environments is then achieved in minutes.

Around a year ago, Education First migrated a large portion of their product websites to be static-rendered from a previous server-side setup. This project was started later on compared to their other projects, as there were set requisites within the business and features pending in the CMS that needed to be met first. Overall, the project was completed with confidence in its start as EF knew the CMS could handle the needs they were looking for.

Despite having multiple projects that used server-side-rendering to provide editors with a real-time preview, and the changes that were done in spite of being static-rendered was a driving factor towards EF’s learning curve.

EF also recently delivered a project centered around personalization that uses Storyblok, allowing them to deliver enhancements in real-time to their website based on a customer’s actions and attributes. With this happening in real-time, despite having an inherent static nature, the organization can enrich as they need, when they need.

Another pinpoint for the organization recently was the development of their recent ‘project information management system’ around Storyblok with an API facade around it while using a frontend UI with Next.js. This brought a richer content experience for their content editors that could efficiently distribute to multiple platforms. The team noted having more time to focus on front-end development, web development, or back-end development in improving their developmental experience.

Conclusion

Telmo cites that their key learnings were rooted in using the best-of-breed technologies for the best possible outcome, whether through integrations or APIs. As a result, Education First saw agility within their practices and processes, making it easier to breach silos, retrieve content from different products and teams, and automate. Education First consequently also has an internal push for infrastructure code that enables their teams to streamline together.