Autonomy and Growth: How Headless CMS Redefined a Healthcare Company

Challenges

Before Klika's engagement, the client's website was basic and static, lacking essential functionality for their business domain. The client prioritized a consumer-facing digital presence and stored some of the content in AEM (Adobe Experience Manager).

Their primary goal was to get a clean and effective solution for a website that would serve as a healthcare finder while allowing them to publish articles and legal content. The client strongly desired flexibility and control in constructing and editing their website's pages. They wanted their marketing team to have complete autonomy in creating and modifying pages without technical assistance.

Therefore, they required a comprehensive set of building blocks that enabled their team to build pages from scratch using a drag-and-drop interface.

Additionally, they have underscored the significance of mobile responsiveness and the need for search engine optimization (SEO) to ensure the website ranks well in search engine results. 

Klika Solution

We selected Storyblok as our Headless CMS solution to meet the client's needs. Storyblok offers a variety of features that can enhance productivity and user experience. One notable feature is the real-time Visual Editor, which enables content editors to make visual edits and preview changes before publishing.

Storyblok follows the BEM (Block Element Modifier) methodology, providing a structure of nestable blocks and components that make the code more reusable and modular. The content is served via an API, which can be GraphQL or REST API in JSON format. Next.js is a web framework with built-in support for SEO optimization, making it an excellent choice for implementing the front-end side.

We used prerendering and server-side rendering of the pages, which allows any crawler to index them and speeds up the page load time, which is crucial for SEO. Furthermore, Next.js offers sitemap generation, which we enhanced to include dynamic pages from Storyblok. We also implemented the possibility to manage and customize meta tags on Storyblok, which are then added to the tag on the client side.

Image optimization is another strategic improvement that we made. We used the built-in Image component from next/image, which has various features like automatic image optimization, lazy loading, and more. To further improve image loading, we used the image optimization service provided by Storyblok, which resizes images for different devices. Since the images are delivered through Storyblok's CDN (Content Delivery Network), which means that the images are cached on multiple servers worldwide, the time to load the images is significantly reduced.

Content editors have complete flexibility over the content and the blocks. They can also improve the site’s SEO by structuring the content, adding metadata, using SEO-friendly URLs, adding schemas, adding FAQ sections, and more.

We have implemented many custom components, allowing the content editor to build a page from scratch independently. Health care finder has been implemented as a core functionality of the website, where the provider images are stored in Azure Blob Storage. Multiple contact forms are implemented using Dynamic forms. Azure App Services is used to build and host the website.  

Results

The client was provided with a practical and customized solution for their core business, which enabled them to offer their clients a seamless and unified experience in finding healthcare agencies.

By implementing a faster, streamlined solution, our client has reported a significant expansion in the number of care providers interested in partnering with them. This improvement has enhanced their operations' efficiency and attracted a broader range of providers, creating a more robust and dynamic network.

The strengthened caretaker network has proven crucial in delivering better outcomes for care seekers. With a broader and more diverse pool of care providers, care seekers now have access to more options, ensuring they can find the support that best meets their needs.

Addressing different SEO components has fully improved search results' ranking. The client's website was fully optimized for search engine visibility.

Lastly, integrating Headless CMS technology has allowed the client's marketing team to be fully independent. By integrating Headless CMS technology, we empowered the client's marketing team to be fully in charge during every marketing strategy step. They no longer needed to wait to execute marketing campaigns of any size, which led to more considerable exposure and reaching marketing OKRs.

Technology stack

React, Next.js, Storyblok, Dynamics 365, Radix-UI, ADO, Azure App Services, App Insights, .NET REST API, Key Vault