About SafetyChain Software
SafetyChain Software provides a platform to help food manufacturing companies ensure their production processes are efficient and safe.
Led by Derrick Threatt, Director of Marketing Operations, SafetyChain undertook a project to transition their website from WordPress to DatoCMS. We caught up to discuss the challenges faced, implementation, and the results achieved throughout this project.
SafetyChain’s primary objectives were to develop a new marketing website that was scalable, secure, and easy to manage, and the project encapsulated:
Improving website performance and speed,
Enhance the website’s overall security,
Simplify content management for the editorial team, and
Ensure flexibility for future growth and integrations, potentially migrating to Next.js
TLDR
Performance and Security: Transitioning from WordPress to DatoCMS enhanced website speed and security, addressing major pain points around plugins, content structure, and general scalability.
Content Process: Modular Content, Blocks, and Dato’s intuitive interface simplified content creation and editing, reducing the need for training and ensuring consistency. Modular content allowed enough “guardrails” to be established for content to independently create new pages and posts with ease.
Customizable and Flexible Integration: The new stack, including Astro, Tailwind, and GraphQL, integrated seamlessly with DatoCMS, allowing for flexible and dynamic content management, with the CDA playground providing a great testing ground for complex queries.
Support and Reliability: Minimal downtime and prompt support from DatoCMS ensured a smooth project completion.
Future-Ready Infrastructure: Plans for localization and exploring migrating to Next.js for live previews and server-side rendering highlight SafetyChain’s plans for growing their website and introducing new enhancements for their content team.
Challenges
SafetyChain’s original website was on WordPress, and several challenges led them to exploring a move towards Headless:
Performance Issues: The existing WordPress site experienced significant slowdowns, affecting user experience and SEO performance.
Security Concerns: Frequent security vulnerabilities in WordPress posed risks that were a concern for SafetyChain, particularly when considering their plugin ecosystem.
Complexity and Flexibility: WordPress's UI felt overly complex for the editorial team with their implementation, making new additions and customizations difficult and time-consuming from an engineering standpoint.
Plugin Problems: The WordPress ecosystem’s reliance on numerous plugins led to compatibility issues and maintenance headaches for the team.
Implementation and Solution
After evaluating several options, including WordPress, Headless WordPress, and other Headless CMS, SafetyChain selected DatoCMS for a variety of reasons:
Speed: DatoCMS significantly improved website performance, addressing the critical issue of slow load times experienced with WordPress.
Security: Aside from API security and tokens for access, the team noticed a lack of security “dependencies” since there weren’t any 3rd party dependencies when it came to plugins and functionality.
Flexibility and Simplicity: DatoCMS allowed for a more user-friendly setup, where only necessary elements were exposed to the content editors, thereby simplifying their workflow. In fact, one point that stood out was the lack of “handholding” needed for the content team – once changes were implemented, the platform was intuitive enough that the team just “got it”.
Customizable Plugins: The ability to develop custom plugins ensured that SafetyChain could tailor the CMS to their specific needs without relying on potentially unreliable third-party plugins. Between the library of community plugins and the ability for SafetyChain to build their own private ones (for example, a plugin for videos from Wistia), they preferred the approach to customizing the CMS in comparison to WordPress.
The implementation process was extremely smooth, given it was well planned and broken down into concrete milestones.
Once their evaluation of multiple CMS platforms was complete, they proceeded to build out their website with Astro, Tailwind, and GraphQL at the core of their stack. Gradually, they began to introduce their key integrations like HubSpot and Wistia.
The transition to GraphQL from Markdown and JS files was facilitated by DatoCMS’s API playground, which simplified the process of building queries – a particularly used feature throughout the implementation to test out and validate complex queries.
They adopted an iterative development approach using environments to ensure every stage and deployment went smoothly, using staging and production environments to test and roll out changes without disrupting the live site. This approach minimised downtime and allowed for efficient troubleshooting and updates.
Results and Looking Ahead
Once everything was live in production and the entire sitemap migrated, one of the first things they noticed was that the new setup reduced their build times significantly. With a project comprising over 1,000 pages, deployments only took about 80sec to complete with Cloudflare added into the mix.
The editorial team, on the other hand, found DatoCMS extremely intuitive and easy to use, which drastically reduced the need for training. Editors could now create and modify pages with ease, maintaining brand consistency and ensuring a high-quality user experience.
Modular Content and Blocks allowed editors to build pages from scratch, offering flexibility without sacrificing simplicity – giving them a very WYSIWYG feel. This allowed them to make changes quickly and efficiently, without the risk of breaking the site’s design or functionality, since the content models had enough flexibility with “guardrails” attached.
Derrick also attributes the overall success of the project to some key features that are heavily used, giving the dev and editorial team the best possible experience with Dato:
Modular Content Blocks: These enabled flexible page creation and editing, allowing editors to build and customize pages dynamically.
CDA Playground: Facilitated the building and testing of GraphQL queries, making the development process more efficient.
Custom Plugins: SafetyChain developed custom plugins, such as one for Wistia, and are working on one for HubSpot.
Environment Management: Utilized staging and development environments to ensure safe deployment of changes, minimizing the risk of errors on the live site.
Their plans for the future include increasing their Dato adoption by introducing localization – particularly in Spanish and French to better serve their Mexican and Canadian markets. They’re also considering a switch to Next.js to leverage server-side rendering and live-preview capabilities to let editors make faster changes.