Regional Health Organization

Background

This Headless CMS Site was built for a Regional health organization seeking to modernize their website. It shall remain unnamed in this case study, but it demonstrates the significant value that a Headless CMS architecture can provide to businesses with several categories of content to manage.

Challenges

Separation of Engineering and Content Teams

1. The engineering team is on the agency side and the content team is on the client side, so engineers need to account for this split in the architecture.
2. This project requires flexible, reusable components that content authors can use in a variety of pages and contexts with the confidence that they will always be styled consistently with the brand guidelines.

Regular Demos of New Components

1. The client would like to see progress updates on a biweekly cadence which means version control will be a key issue on this project.
2. Engineers need to be able to seamlessly deploy new features to a testing environment for QA review, then deploy up to a higher client-visible environment for demo purposes.

Complete Handoff After Launch

1. When the site goes live, the client will continue to own and mantain content without agency oversight.
2. Components must be future-proofed and thoroughly tested to ensure long-term reusability as the client continues to add content to the site.
3. The client needs documentation for all the components and their different use cases that they can refer to long-term without agency assistance.

Choice of Tech Stack

Separation of Concerns

1. Separation of concerns helps each person on the team focus on their area of expertise without worrying about how they might adversely impact other team members' work.
2. Headless CMS architecture allows engineers to build reusable components for the Sitecore CMS component library. Content authors can then access this library as they build out pages on the site with confidence that they will look and function consistently in each of the use cases.
3. Storybook provides interactive documentation for the components in the component library. The client can view their options of available components and interact with them on the page to help make decisions on how they'll build new pages.

Performance

1. Next.js allows each component to get its server-side props from the Sitecore CMS at build time. This enables lightning-fast page load speeds without heavy client-side API calls to populate content at runtime.
2. GraphQL streamlines API calls so that only the relevant fields are included in the query and the reponse. This significantly improves performance of features with heavy data requests such as the Find a Doctor, Find a Location, and Blog & News Search.

Styling

1. Tailwind CSS helps solve “one of the hardest problems in computer science”: naming things. CSS/SCSS requires a thoughtful and consistent approach to class name taxonomy to be done correctly. Tailwind Utility Classes eliminate this concern by keepingstyling directly within TSX components.