Project challenges
Rigid page builder slowed publishing throughput
The new magazine aims to attract substantial traffic with a large number of articles, which should eventually increase bookings on the HolidayCheck website. As editors came up with ideas for new content, they felt the editorial limitations of the legacy CMS.
The legacy CMS could only create page-based content, preventing editors from structuring articles modularly and reusing the same elements across articles. As a result, content could only have predetermined shapes, and editors could not add CTAs wherever necessary, which was vital for increasing conversions. When editors needed new types of pages, they had to ask the engineering team to create them from scratch instead of modifying component-like parts. This meant tasks generally in the marketing scope became the engineers' responsibility, slowing production timelines.
Technical dependencies with legacy systems hindered scalability
HolidayCheck developers also faced challenges with the previous system. After building an interim magazine solution based on the legacy CMS, it quickly proved unscalable. Scaling the content would have quickly become expensive, adding to the technical blockers developers encountered, such as field limitations and challenges adding new frontend features.
There was also a disconnect between magazine and website content. HolidayCheck wanted to make its content more interconnected so magazine content could better align with hotel offers. Overall, the development team needed a scalable solution for reducing technical dependencies and giving editors complete control over the content, allowing them to use sections and components to build pages without tech support.
Project objectives
Build pages with modular content blocks
To achieve HolidayCheck's ambitious organic traffic goals, editors must drastically decrease the time spent on publishing and produce more content in less time. Due to the traditional content elements of magazine articles, such as headlines, text, hotel offers, and calls to action, a component-based approach is an effective method to streamline content creation.
Choosing which components to add to different page sections assists editors in creating content faster and more efficiently, since they won't have to go to developers every time they want to shape content differently. Content elements should also be reusable across multiple pages, enabling interconnected content relations, therefore improving publishing efficiency.
Ultimately, HolidayCheck magazine aims to convince site visitors to make travel bookings. Hence, dynamically placing calls to action throughout articles is essential. Magazine content should give vacationers plenty of destination ideas, enabling them to imagine, engage, and convert from the page. This emphasizes the importance of a component-based approach to flexibly place CTAs alongside engaging content to convert users.
Hygraph’s solution
After weighing a variety of content management tools, HolidayCheck landed on Hygraph. “The biggest difference between Hygraph and the other CMSs is the component-based system. Components do not count as entries but as a way of building the page, so it fits very well with our concept”. Said Álvaro Nistal Valbuena, Team Lead Traffic & Apps at HolidayCheck.
Hygraph has provided HolidayCheck with an excellent experience both in terms of development and content. The intuitive system and detailed documentation ensured the team could use the system without hiccups. HolidayCheck also appreciated Hygraph's great support. Any time they needed something, Hygraph was there to help.
Hygraph's API-first, composable features are taking HolidayCheck’s content to new heights.
Easily create content with Components
Using Hygrpah’s Components Field, developers built various models for sections, CTAs, and other elements inside articles. Editors can arrange sections flexibly and dynamically place CTAs where they see a conversion fit. Since components don’t count as entries, development support is only needed when a structural change or new element is requested. In that case, developers create a new React component connected to the Hygraph model. From then on, the component is available in Hygraph for editors to add new entries. This drastically reduces the time to create content.
Seamlessly reuse content with References
Aside from leveraging components for structure reuse, HolidayCheck also uses References to pull the same content across articles. A reference in Hygraph is a relation between two or more content entries, which can be reused by connecting them. For example, there’s a teaser called “Inspiring Posts” to cross-link similar articles at the bottom of the page. HolidayCheck editors also link articles to related destinations and content offerings to inspire visitors for their travels.
Robust GraphQL APIs
The transition to Hygraph was straightforward and seamless, thanks to Hygraph's robust GraphQL APIs. Hygraph integrates with the rest of the system via the GraphQL API – HolidayCheck’s API of choice. It was almost a one-to-one fit between the integration and the service HolidayCheck was building. Developers enjoy working with the API playground inside Hygraph's UI to play around with queries before converting them to code.
Intuitive UI that makes content production a breeze
Editors are more productive and efficient when they know the CMS inside-out. HolidayCheck editors find the Hygraph UI easy to use, and features like the search function and page duplication are highly intuitive, making their job a breeze. HolidayCheck developers also appreciate the simplicity of creating different content models that the content team can later use for building various page types.
The tech stack
As part of HolidayCheck's architecture, hotel content is retrieved via APIs from providers, Hygraph hosts the magazine content, and Cloudinary is used for asset management, integrated with Hygraph.
HolidayCheck uses the React framework on the frontend. The frontend requests a NodeJS service that connects to Hygraph. The service requests content from Hygraph and other external services and assembles responses sent back to the frontend in React.
The page sections and components within those sections are connected to React components. This means that when you give a section a particular placement using Hygraph, it will be shown in the same spot in the frontend through React. It's either built by React and displayed on the frontend or placed in a specific location using React.
The results and key benefits
The integration of Hygraph has proven to be an instant game-changer for HolidayCheck. Prior to the magazine launch, the company aimed to publish an article within 20 minutes, a goal that is now consistently met. HolidayCheck now reports an impressive 125% increase on the magazine traffic, underlining the impact of its content strategy.
Here are some key benefits experienced by HolidayCheck:
Faster publishing cycle
One of the standout victories is the increase in speed. With the newfound efficiency, HolidayCheck now produces around 100 articles per month, demonstrating the ability to generate substantial content in a short timeframe.
New Marketing Channel
Embracing Hygraph has opened up new horizons for HolidayCheck in marketing. The influx of articles has significantly boosted website traffic, and the platform has successfully tapped into Google Discover as a valuable source of new visitors. Additionally, integrating an RSS feed has allowed HolidayCheck to re-engage with Pinterest, further expanding its reach through clever push strategies.