Building a More Flexible, Faster Edutopia

A Flexible Content Strategy for Designers, Editors, and Developers

Edutopia's information architecture had evolved organically over many years and no longer reflected the organization's needs. We worked closely with Edutopia's design, technical, and editorial teams to streamline its content types and create a structure better suited to how the organization actually worked.

We also developed a component-based system for building landing pages. Editors could create and customize layouts using reusable components without sacrificing the structure needed to maintain a consistent experience across devices.

The result gave editors more control over how they presented content while providing designers and developers with a predictable, maintainable system.

A Decoupled CMS Built for Flexibility

Edutopia wanted greater control over the performance and user experience of its front end while retaining a mature CMS to manage a large and complex body of content.

We helped the team evaluate its options and choose a decoupled architecture using Drupal as the content management system and React for the frontend. We then built the APIs, integrations, and templates needed to connect the two and apply Edutopia's existing visual design system to the new experience.

We also created custom endpoints for landing-page content and extended the API to support revisions, laying the foundation for an important editorial capability: previewing content before publication.

A Preview System Editors Love

The Edutopia editorial team requires real-time previews of content as it goes through the production process, so we built them a new decoupled system to do just that. This system allows them to author or revise content in Drupal and then view it in their front-end React application with a single click. Landing pages can also be previewed, allowing editors to experiment with potential layouts and component combinations of components before going live.

Migrating 16 Years of Content

More than 10,000 pieces of content were spread across multiple content types, some of which were split, merged, or otherwise manipulated during the migration. An additional 14,000+ media items (videos, files, images) also existed throughout the site’s content, often embedded in the body of legacy articles. These embedded media items needed structured representations in the new system to work within the constraints of the new API and decoupled front end.

Leveraging the Framework

We also helped Edutopia leverage the framework by shifting from loading full HTML pages on every click to loading only the data required for an application. A Redux data store holds the page data in the browser so that when a page is accessed more than once, the page load is instantaneous. This creates a snappy feeling for the website and opens up new options for the future, such as offline reading and personalization.

Edutopia.org required the careful juggling of many different pieces: editorial tools that provide flexibility while retaining structure for the sake of the API, remote media integration, careful data migration, and the marriage of two very different technology stacks to create a unified, extremely fast browsing experience for educators, no matter what device they’re using.

Lullabot infused our team with expertise about many new technologies including Drupal 8 and React.  They put together a rock-solid team that integrated well with our staff. We’re really pleased with the outcome of our work together -- a major upgrade to our online capabilities, which will bring benefits for years to come. 
Eric Hestenes, Director of Engineering, Edutopia​