GPnotebook
Scaling a 100K+ Page Medical Platform with Next.js & Sanity
)
About The Client
OmniaMed is a leading medical communications agency. They’ve been at the forefront of clinical education and professional development since 1995.
Having initially pivoted their content and marketing solutions around publications and events, the last decade has seen them increasingly focus on global digital channels and services, with operational teams based in the US, Australia, and the UK & Ireland.
)
GPnotebook was started by a group of UK doctors in the early 1990s while they were medical students at Oxford University.
They developed the site as a distillation of their medical knowledge, and over time have built it into a “clinical archive” of more than 40,000 pages of content.
It's one of the most popular clinical reference tools used by GPs and other primary care professionals. Reflecting its “heritage”, the site’s primary userbase is in the UK; however, over time, the site has gained popularity in other regions and is also available in French, German, and Spanish.
Challenge
A Legacy System That Couldn’t Support Scale, Speed, or Sub-Brands
GPnotebook provides specialised content for medical professionals. They learn from it and use it as proof of their speciality, which can be demonstrated by automatic tracking of a user’s activity on the site. However, the outdated infrastructure and the limitations of its custom Content Management System (CMS) posed a challenge in maintaining its website.
To add to the problem, the UK requires Continuous Professional Development (CPD) learning for medical specialists, meaning the content on the site had to be regularly updated to keep up with their needs. Unfortunately, content managers at OmniaMed couldn’t update the page by themselves. Each update required developers' involvement, a costly and time-inefficient affair.
The seriousness of the issue was exacerbated by the project's size. It comprises more than 30,000 concise, interlinked clinical reference articles, each covering a specific clinical topic, so efficient content management is crucial to success.
Another reason why our client wanted to migrate the website was to move all its sub-brands and sub-sites under the same domain and tech stack. As it was growing through the years, GPnotebook created several “sub-brands” on separate websites, like GPnotebook TV or GPnotebook Podcast. They were launched as separate entities for two reasons:
Each sub-brand was launched as a proof-of-concept to test the idea with users and clients.
The outdated and limited infrastructure on the current GPnotebook.com domain didn’t allow for fast development, customisability, and content management.
The challenge of inefficient content management is very common across various industries, and to be honest, it was also our challenge some time ago. Every content update required the help of our developers, making it a tiring and lengthy process.
That’s why, after discussing it with OmniaMed, we suggested a move to composable architecture to be the best course of action.
Solution
OmniaMed agreed with our assessment that migrating to a modern tech stack would allow them to manage the content more easily and let contributors work independently from the development team.
The choice of technology for this project was crucial, as the client wanted to build an in-house team for platform management in the future. To that end, they were interested in creating a front end with Next.js.
To complement migration to a new and future-proofed tech stack, OmniaMed also decided to redesign the platform to make it more user-friendly.
Business Impact of the Decision:
Supporting Global Expansion: Enabling dynamic content management across different regions would help Omiamed reach new user bases.
Lower Costs of the Platform Maintenance: Reducing reliance on developer intervention in content updates would lead to faster time-to-market for new content and features.
Unifying Sub-Brands: All brands could be united under a single platform for better brand recognition and user experience.
Easier Solution Scalability: Thanks to the flexible architecture, the client wouldn't need to build separate sub-brands on other domains. Instead, they can easily incorporate them into the existing platform.
Supporting Long-Term Vision: Choosing a modern tech stack supported by established companies would allow OmniaMed to position itself for long-term growth.
Pagepro & Omniamed Cooperation
DISCOVERY PHASE
We started our cooperation with a thorough technical discovery phase and workshops with the client. It allowed our developers to learn all about the project, discover the potential risks and issues that may appear along the way, define the most efficient approach to the project, and choose the right tech stack to meet all of the business and technical requirements.
Below you can see the comparison of the four most suitable CMS’es: Sanity, Contentful, Storyblok, and Prismic, which we presented to the customer during the discovery phase.
Content Management System | Advantages | Disadvantages | Price* | No. of Users |
Sanity |
|
| $99 + per month |
|
Contentful |
|
| $489 + per month |
|
Storyblok |
|
| $7 to $21 per user monthly |
|
Prismic.io |
|
| $7 to $500 per month |
|
* The current pricing may differ
Want to Switch CMS?
Tell us what you need, and we'll make it happen.
Project Management Approach: Scrum
Adopting a Scrum approach was the best choice due to the project's complexity and the numerous variables involved. The team was interdisciplinary, combining experts in UI and backend development, supported by crucial input from the client's side, especially for integrating necessary APIs for authorization. Using Scrum was essential for encouraging discussions across various teams but also for ensuring flexibility in our workflow. This allowed us to adjust and refine functionalities as needed.
With the project's scope, a traditional waterfall methodology would have been ineffective. It would have required a disproportionate amount of time dedicated to estimations and documentation, hindering our progress. Our goal was to maintain the ability to introduce changes to initial plans, ensuring our approach remained adaptive and responsive to evolving project needs.
Next.js Development
Given the requirements and expectations for the GPnotebook website, we suggested Next.js development as the most effective solution. OmniaMed was interested in serverless solutions and React, so Next.js was the best choice. It meets the GPnotebook requirements for:
Speed - Page load time was important for GPnotebook users - students, trainees, and doctors - as they are often in a rush. This not only saves their time but also improves the user experience.
Performance - OmniaMed pays attention to good SEO. The great performance provided by Next.js helps achieve high-ranking positions and good visibility online.
Readiness for high traffic - Medical databases are usually of great interest. OmniaMed expects high traffic to the site on weekdays (Mon - Fri) from 6 am to 6 pm. Thanks to using Next.js, the platform can easily handle possible peaks and it won't affect speed and performance. Users will not experience any negative effects of high traffic, and thus, it will encourage them to continue using the site.
Greater Security - A website like GPnotebook contains a lot of sensitive data, as well as authorship work from thousands of people. Using Next.js increases the protection of any data on the site because there is no active connection between a static site and any database or server-side software. Consequently, there are no vulnerabilities for hackers to exploit and data or other sensitive information to possess.
Omnichannel - Because the GPNotebook users often use mobile devices, e.g. when they are in rural areas doing house calls, the website must be mobile-responsive. The use of Next.js guarantees all of the above.
Unique User Experience - User experience is really important to OmniaMed. The GPNotebook users need clear and intuitive navigation to be able to quickly and easily find the information. Because Next.js is giving total customization freedom, you can build a website that truly represents your website's possibilities, and resonates with your users.
Better Developer Experience - In the future, OmniaMed plans to hire its own internal team to take care of website support and maintenance. Thanks to Next.js, developers can easily take over the website, and use the component library, which makes their work much faster and easier. What’s more, being the most popular web framework right now, Next.js guarantees a big pool of developers available on the market.
In Next.js projects, the backend applications and databases are separated from the frontend pages and user interface which enables us to choose the best tech stack that suits the unique project requirements.
Tackling Scale and Speed Challenges
)
With over 100,000 subpages and dense interlinking between clinical topics, optimizing performance at scale was one of the most demanding parts of this project. We needed to ensure the platform remained fast and responsive without compromising on content quality, SEO, or user experience.
To begin with, we significantly reduced the bundle size by removing unnecessary packages, limiting some to server-only use, and replacing heavy libraries with lightweight, custom-built alternatives. We also replaced SCSS with Tailwind to ensure a single, optimized CSS file was loaded, eliminating unnecessary recalculations on the client side.
We moved as much logic as possible to the server on the data side to minimize the amount of information sent to the client and keep the initial HTML light. Where possible, data fetching was shifted to the server or handled at build time, reducing client-side overhead and improving SEO.
Rendering performance was another major focus. We used the content-visibility CSS property to defer rendering of off-screen elements. It helped us lower memory usage and improve perceived speed. DOM updates were batched using the fast-dom library to avoid layout thrashing, and unnecessary HTML elements were removed to limit reflow costs in high-impact components like the header.
Reducing component re-renders through memoization and careful state management allowed us to make rendering more efficient. Features like modals, banners, and third-party packages were dynamically loaded only when needed using next/dynamic, keeping the initial load clean.
Visual performance was addressed too. Skeleton loaders were reworked to use GPU-accelerated transform animations instead of background-position, making them smoother and less costly. The Material Icons font was slimmed down using a custom script to include only the icons actually used, which improved LCP scores and reduced Vercel bandwidth usage.
Finally, we addressed a major interaction bottleneck identified via Vercel’s Speed Insights. The cookie notice was responsible for poor INP scores, so we replaced it with a more performant solution using UserCentrics, bringing the INP down from 260ms to 80ms.
These improvements ensured that the platform performs efficiently at scale, providing a fast experience for a demanding and time-sensitive user base.
Tech stack
Sanity
Next.js
Algolia
Node.JS
Headless CMS - Sanity
GPnotebook content team wanted to have full flexibility in creating and managing the content. To fit their needs, the CMS should support multiple roles (users) and provide Intl (multiple languages/locales).
The company provided us with a list of features from the old CMS that had to be migrated and some requirements for new ones.
Features that needed to be retained in any new CMS:
Assigning each content page to established categories known as “clinical chapters”.
Quickly including links to other related GPnotebook pages at the foot of each content page via a “tagging” function.
Ability to control which pages are included/excluded from the site’s search engine index.
In addition to the above, the new should CMS provide new features:
The new CMS should enable the editorial team to include images, tables, and external links within content pages.
A CMS should enable the creation of multiple-choice question quizzes. These are created once a month and are a popular resource for CPD among users and were previously created in a completely separate CMS.
Bespoke publishing workflows with associated roles – e.g. author vs editor vs approver etc.
Ability to target specific pieces of content to particular variants of GPnotebook according to geography (e.g. page X is included on the UK version of GPnotebook but not the Australian version)
Ability to retrieve reference citation details from the PubMed bibliographic database (to prevent manual copying and pasting as at present).
New CMS also needs to be able to determine which videos are accessible by Pro members and which are “trackable” in the Pro dashboard
Targeting videos to different localisations is also desirable
New CMS needs to be able to determine on a per-episode basis which episodes of the podcast are included in the RSS feed to third-party platforms.
Restrict certain podcast episodes to Pro subscribers only, and have a separate Pro subscribers RSS feed that will enable Pro users to download Pro episodes on their preferred podcast platform/app.
Targeting episodes to different GPnotebook localisations is also desirable.
Pro features (as these are generated by user actions on the sites) should be controlled from the CMS .
Enable to add and create events for users.
Reporting on attendee numbers etc.
Stripe integrations.
After reviewing both lists, we strongly recommended Sanity as it uniquely fulfills all the project's requirements, addressing both broad needs and client-specific challenges:
High-Level Customization: According to the requirement list, the new CMS had to be highly customisable for our customers. Sanity was the ideal choice because of its flexibility. This allows for tailoring the CMS to specific business requirements and managing content across different localizations. For our client, the ability to adjust content by region while maintaining a unified but adaptable platform was critical. Sanity enables easily adapting the content for regional nuances, which ensures relevancy and engagement across all user bases.
Multiple Roles Support: Sanity's capability to support various user roles was crucial. It allows for effective collaboration and access control, a necessity for our client's team structure. Sanity also enabled us to create various workflows for document approval (according to their position and experience).
Internationalisation (Intl): Given our client's requirement for a CMS that can manage content across global and regional sites, including specific localizations for the UK, Ireland, Australia, and the US, with the US content under a separate domain, built-in support for multiple languages and locales was a key factor. Thanks to this feature, each page may be set as global or local separately, supporting the project's goal of catering to an international audience.
)
Database Functionality: Acting as a robust database, Sanity ensures comprehensive content storage and retrieval. This was particularly important for our client's dynamic content needs, supporting a variety of content types and their complex website architecture.
Granular Control over the ads: Sanity allows for building a customizable ad management process. We gave the content managers full control over the ad’s placements, whether it’s the pages, locations or users that should see the ad.
Next.js for Web App Development
The adoption of Next.js as our development framework was instrumental in elevating the website's speed and overall user experience. Maintaining a responsive and engaging user interface is important, especially for a site with such an extensive content library.
Next.js's capability to seamlessly integrate Static Site Generation (SSG) and Server-Side Rendering (SSR) allowed us to optimize each page's loading times. This way, we can serve pre-rendered pages to users for faster initial load times while still providing dynamic content as needed through SSR.
OmniaMed put a huge emphasis on GPnotebook website SEO. That’s when Next.js also proved itself irreplaceable by providing the users and Google bots pre-generated SSG pages.
Aside from that, Next.js gave us the flexibility to build back-end logistics tailored to the client's specific needs. We were able to develop server-side logic and API endpoints directly within the Next.js framework, thanks to the API routes feature. It made the process of fetching, processing, and displaying content from various sources easier, reducing the website's reliance on external servers for rendering dynamic content.
Due to the unique project requirements, we needed to create APIs that allowed for efficient website operation and provided a completely user-friendly interface:
Tracking API: The GPnotebook system is prepared for the medical professionals who are obliged to the Continuing Professional Development, which needs to be proved regularly. To address that, we built the API that tracks their activity in the portal, counts the points they achieve while reading/watching the materials, and a separate API using the data from the tracking database that generates the PDF that proves their knowledge gain.
)
)
)
Notes & Reflections API: The medical professionals must also reflect on what they have learnt from the CPD activities and record whether the CPD has had any impact (or is expected to have any impact) on their performance and practice. To help the users to track their progress, GPnotebook implemented Notes and Reflections, which can be added in the PDF Report.
)
)
Algolia for Search
The search engine on the GPnotebook website is its heart and a motor for quick and effective knowledge search. The way that content is presented on GPnotebook is a different from other medical sources.
The site content is shown in numerous “mini-articles” with text often structured as simple bullet points. Each mini-article is designed to answer a specific clinical question that a GP may have. Their tiles are easily retrievable from the site search engine (or external search engines) based on the keywords a GP doctor is likely to use.
OmniaMed's busy audience finds the site incredibly useful for finding quick answers during their working day, and it is one of the few online resources that GPs use during consultation time with their patients. To function properly, the website needed a highly efficient search engine.
We recommended Algolia for its great search capabilities and integration with static site architectures. It stood out compared to other engines due to several factors:
Integration with Algolia Search: Its integration capabilities, especially with static sites, allow for the efficient indexing of pages directly within Algolia. All content is readily searchable and accessible.
React Components Support: Algolia’s React components facilitate advanced search functionalities, including support for pagination. It's crucial for handling the vast amount of content our client offers and to make navigation intuitive and user-friendly.
Unified Indexing: With Algolia, we can create a common index for all content models, be it articles, podcasts, or videos. It reduces the number of search requests, which has a positive impact on performance and UX.
Dynamic Content Indexing: The ability to update indexes dynamically after any content change (adding, updating, or removing content) means the search results are always accurate and up-to-date.
Efficient Search Engine: Algolia's efficiency and speed in indexing and serving search queries are unmatched for a website with such a huge number of pages. All data is maintained within, providing a scalable solution that keeps search performance at its peak, regardless of the website's growing content volume.
Since users can quickly and easily find the content they're looking for, their engagement and satisfaction grow naturally, all thanks to Algolia.
Stripe for Subscription Payments
To access the full benefits of the GPnotebook, the users can purchase access to the whole platform. Stripe was carried over from the previous version of the website for payment purposes, as our client was satisfied with it and its ability to support Apple Pay, Google Pay, and credit cards.
Node.js
To complement this project's unique requirements, we decided to add Node.js to the tech stack for a few reasons:
Unified JavaScript Development: The project leveraged a JavaScript stack across both frontend and backend, simplifying development and reducing the learning curve. Node.js enabled a cohesive development experience, streamlining the process and fostering better integration between server-side and client-side logic.
Custom API Creation: Given the project's need for custom solutions, Node.js's flexibility and ease of use in API development were essential. Its ability to handle asynchronous operations made it ideal for these functionalities.
Real-time Data Handling: The project required efficient management of real-time interactions and data updates, especially for the custom APIs created for content engagement tracking and document change history. Node.js's event-driven architecture ensured high performance in real-time data processing.
Scalable Infrastructure: With the project catering to a large audience and handling over 100,000 subpages, Node.js's scalability was a key factor. Its non-blocking I/O model allowed the project to efficiently handle numerous simultaneous connections without compromising on performance.
Legal and Compliance Requirements: Node.js supported the development of custom solutions to meet specific legal requirements, such as the need for a document change history API that could store data for up to five years, addressing a critical compliance need with a custom solution.
Development
Once we established the plan and estimated our actions, we were able to run the development process.
Setup
Epic 1
Global Navigation
Epic 2
TV
EPIC 3
Podcast
Epic 4
Clinical Pages
Epic 5
Quiz
Epic 6
Shortcuts
Epic 7
Homepage & Education Homepage
Epic 8/9
User Account Management
Epic 10
Account Details & Subscription Management
Epic 11
CPD Dashboard
Epic 12
Epic 13
Authors / Speakers
Epic 14
Events
Epic 15
Search Functionality
Epic 16
Contact
Epic 17
Other Pages and Components
Epic 18
SEO Enhancements
Epic 19
Third-Party Integrations & API Development
Epic 20
Selected CMS Functionalities
Epic 21
Content & Migration
Setup
Epic 1
EPIC 1
Configuration of development infrastructure and core tools
Global Navigation
Epic 2
EPIC 2
Implementation of a comprehensive navigation system.
TV
EPIC 3
EPIC 3
Development of TV content features and navigation.
Podcast
Epic 4
EPIC 4
Integration of podcast playback and navigation functionalities.
Clinical Pages
Epic 5
EPIC 5
Creation of clinical content pages and features.
Quiz
Epic 6
EPIC 6
Development of interactive quiz features.
Shortcuts
Epic 7
EPIC 7
Setup of shortcut listings and navigation.
Homepage & Education Homepage
Epic 8/9
EPIC 8/9
Design and development of the homepage with dynamic content and navigation & Integration and setup of educational content home page.
User Account Management
Epic 10
EPIC 10
Streamlining user access and account management, including:
Sign-in/up processes
Password management
Registration steps
Account activation
Account Details & Subscription Management
Epic 11
EPIC 11
Implementation of account personalization and subscription details management
CPD Dashboard
Epic 12
EPIC 12
Development of a comprehensive CPD Dashboard for tracking and managing continuing professional development activities.
Authors / Speakers
Epic 13
EPIC 13
Establishment of author and speaker profiles, including:
Listings
Details
Social media integration
Events
Epic 14
Epic 14
Creation of an events management system, from listing to detailed view, including:
Session selection
Payment integration.
Search Functionality
Epic 15
EPIC 15
Implementation of a global search feature with advanced filtering and result selection capabilities.
Contact
Epic 16
EPIC 16
Setup of a contact form and related user interaction components.
Other Pages and Components
Epic 17
EPIC 17
Development of miscellaneous pages and components, including:
About us
Nursing notebook functionalities
SEO Enhancements
Epic 18
EPIC 18
Optimization of site SEO through sitemap generation, pagespeed improvements, and structured data addition.
Third-Party Integrations & API Development
Epic 19
EPIC 19
Integration of third-party services for analytics, payment processing, and customer support.
Development of backend APIs for tracking, session management, and content interaction functionalities.
Selected CMS Functionalities
Epic 20
EPIC 20
Enhancement of CMS capabilities for content management, editorial workflow, and content auditing.
Content & Migration
Epic 21
EPIC 21
Migration of various content types, including:
Clinical details
Multimedia content
Event information
Transfer of essential user and interaction data, ensuring continuity and integrity.
Results
Migrating to the new tech stack moved our customers’ operational capabilities forward, enabling a more dynamic and responsive content management process. We've streamlined the content approval and publication process by integrating advanced user roles and workflows. The time-to-market for new content and updates was dramatically reduced as a result, directly contributing to OmniaMed's leadership position in the medical education sector. Their knowledge reporistory is current, relevant, and of the highest quality.
The process has laid a strong foundation for future scalability and innovation. A prime example is the integration of AI-powered translation services through DeepL, which was implemented immediately after the launch. Its fast and accurate translations improve localisation efforts and support the company's global reach. Adopting modern technologies prepares GPnotebook for continuous growth and advancements.
On the business side, we've helped our customer achieve additional goals:
Lower Content Management Costs: The adoption of Sanity for the project's requirements has empowered the client to manage their content more strategically and with lower involvement of developers, which decreased the time spent on its updates.
Redesign Implementation: The transition to the new design was a visual upgrade and an enhancement of the site's usability and accessibility. Its redesign was executed fully by our team in strict adherence to the client's specifications and design files, reflecting OmniaMed's vision and brand identity.
Reaching the Global Market: Customising content for different localizations directly within the CMS allows the website to serve users based in different locations, reaching wider audiences.
Revenue Optimization Through Targeted Advertising: Applying granular control over advertisement placements within the CMS helped the client's marketing and sales teams position ads across different categories and pages.
Currently, we're working on further project development on features that weren’t required for the website launch.
HAVE A PROJECT?
LET’S TALK ABOUT IT!
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
Tell us more about your project
Please provide detailed information about your challenge, and our tech team will promptly review your submission. Expect to hear from us within 24 hours with tailored next steps and insights based on your request.
Book a Meeting With Our CEO
Upon receiving your form, we typically recommend a briefing meeting with our CEO to explore the specifics of your project. Schedule your meeting now to kickstart a tailored approach.
)
Chris Lojniewski
CEO & CGO