Transforming A Hospital's Patient Experience Using NextJS and Sanity

Client Background & Motivation

Regency Specialist Hospital serves a diverse community, providing world-class medical care across various specialties. Their existing WordPress website had grown cumbersome to maintain, especially for a site this large. While WordPress had served its purpose, the hospital’s IT team recognized the need to step into a more modern, scalable ecosystem.

Key motivations for this shift included:

Improved Content Management: The marketing and administrative teams wanted a more flexible, intuitive content system.
Better Performance: A hospital site with numerous pages, doctor profiles, and booking flows required faster load times and robust scalability.
Future-Proof Technology Stack: They needed to avoid plugin bloat and ensure the site could incorporate more advanced features without frequent overhauls.

Project Goals & Success Metrics

Seamless CMS Experience
Regency Specialist Hospital needed a CMS that allowed non-technical staff to update pages, specialist profiles, and event information in real-time—without the risk of “breaking” anything. Sanity CMS provided exactly that level of flexibility and security.
High Performance & Global Accessibility
From doctors’ profiles to patient resources, the site needed near-instant loading across devices. We aimed for sub-second page loads and fast in-site navigation, critical for a platform that prospective and existing patients rely on at all hours.
Booking & Payment Integration
A seamless booking flow was essential for both patients and internal staff. Integration with Regency’s existing calendar system and Billplz meant easy appointment booking and secure online payment processing.
Scalability & Future Expansion
Given the hospital’s growth, the site had to be built with a modern approach that could scale effortlessly, accommodating new departments, service lines, and digital offerings.

The Technology Stack

Next.js

Why Next.js?
Next.js offers server-side rendering (SSR) and static site generation (SSG) for high-performance page loads. Its flexibility in building modern, responsive interfaces made it ideal for an enterprise-level hospital site.

Sanity CMS

Why Sanity?
As a headless CMS, Sanity provides a clean, user-friendly interface for content editors. It also offers real-time collaboration features and schema flexibility, making it easier to tailor content structures for a large hospital system.

AWS Infrastructure

Lambda@Edge + CloudFront: Ensures global distribution and low-latency content delivery.
S3 + ACM: S3 for static asset hosting, and AWS Certificate Manager (ACM) for secure HTTPS.
CodePipeline + CodeBuild: Automates our build and deployment processes, allowing for continuous integration and delivery (CI/CD).
IAM + AWS CDK: Fine-grained access controls via IAM, while AWS CDK offers Infrastructure-as-Code for more efficient, repeatable deployments.

Why not AWS Amplify?

At the project’s inception, AWS Amplify did not fully support some of the cutting-edge Next.js features we needed. Thus, we opted for a customized AWS architecture that allowed maximum control and cost optimization.

Third-Party Integrations

Billplz: For secure payment processing directly on the site, ensuring patients can pay for bookings or services seamlessly.
HubSpot: For marketing automation and lead tracking, with custom APIs to link form submissions and payment confirmations directly into Regency’s CRM.

Implementation Highlights

Pixel-Perfect Frontend Development
Regency’s own UI/UX team supplied meticulously detailed Figma prototypes. Our development process was equally detailed, ensuring each page matched the designs for both desktop and mobile. Manual QA checks guaranteed everything from font sizes to button placements aligned perfectly with the Figma layouts.
Advanced Search Capabilities
With so many doctors and specialties, a robust search tool was crucial. We integrated a custom search feature within Next.js that pulls data from Sanity in real-time, ensuring users can quickly locate the right specialist or department.
Booking Flow & Payment Handling
- Custom Components for Forms: We developed reusable form components that handle validation and integrate with Billplz.
- Payment & Callback: After integrating with Billplz's payment system, API handlers were added to manage payment confirmations, automatically relaying that data into HubSpot for administrative follow-up.
- Calendar Integration: We embedded the hospital’s existing calendar system for real-time appointment scheduling.
Continuous Integration & Delivery (CI/CD)
Our setup with AWS CodePipeline and AWS CodeBuild automatically triggers builds every time new code is pushed to the repository. This ensures rapid iteration and zero-downtime deployments, essential for a dynamic hospital site.
Security & Compliance
Hospitals often have stringent privacy requirements (e.g., PDPA in certain regions). Although the content on Regency’s site is primarily informational, we still implemented best practices for securing user data—especially around form submissions and payment details.
Weekly Cadence & Communication
We held weekly milestone reviews with the Regency Specialist Hospital IT team, addressing any feedback immediately. This approach minimized surprises and kept the project aligned with the hospital’s evolving needs.

Challenges & How We Addressed Them

Large Site with Multiple Integrations: With multiple departments, doctor listings, and booking flows, the site had many “moving parts.” We tackled this by thoroughly documenting each third-party integration and mapping out data flows early in the process.
Ensuring Pixel-Perfect Quality: Without advanced automated tools, our QA team performed meticulous manual testing to replicate real-world usage scenarios—on desktop and mobile alike.
Time-Consuming Integrations: While not overly difficult, integrating multiple systems (calendar, Billplz, HubSpot) was detail-intensive. By creating modular components, we streamlined each integration step and tested them separately before merging everything together.

Results

Faster Page Loads: Although we don’t have exact before-and-after metrics, the shift to a Jamstack architecture on AWS CloudFront and Lambda@Edge has provided a noticeably snappier user experience.
Intuitive Content Management: The administrative team at Regency can now update pages, add new specialists, and modify content quickly, thanks to Sanity CMS’s straightforward interface.
Seamless Booking & Payment: Patients can book appointments and pay online with confidence, and the hospital’s internal teams have clear visibility into appointments via HubSpot.
Global Scalability: The site is distributed globally through AWS, ensuring minimal latency regardless of where the patient or admin is located.

Key Takeaways

Working on a mega-sized hospital site underscored several important lessons:

Thorough Planning of Third-Party Integrations: Clear data flow diagrams and modular architecture help in managing multiple integrations without drowning in complexity.
End-to-End Testing is Critical: Manual QA, although time-consuming, remains invaluable for ensuring a polished user interface that truly matches design specifications.
Future-Proof Technologies Pay Off: By selecting modern tools like Next.js, Sanity CMS, and a custom AWS architecture, we avoided constraints of older platforms and ensured the site can scale well into the future.

Conclusion

For Regency Specialist Hospital, the website revamp was more than just a cosmetic update—it was a strategic upgrade to a headless, high-performance platform that streamlines content management and elevates patient engagement. By leveraging Next.js, Sanity CMS, and AWS services, we delivered a modern, fast, and secure solution that can grow alongside the hospital’s evolving needs.

As a web development agency with expertise in UX/UI design services, ecommerce store setup and maintenance, web application development, and landing page development, we are thrilled to have helped Regency Specialist Hospital take this critical leap forward. The result is a resilient, scalable, and user-friendly site that enhances both administrative efficiency and patient satisfaction.

Case Study