Learn how documentation streamlined workflows and improved efficiency for PHS developers and content editors.
Presbyterian Healthcare Services (PHS), a cornerstone of New Mexico's healthcare landscape, has been delivering top-notch medical care for over a century. As a not-for-profit healthcare system, Presbyterian operates nine hospitals, a statewide health plan, and an extensive network of clinics and care facilities. PHS has over 13,000 employees, including more than 1,100 physicians and advanced practice clinicians, and serves nearly 650,000 patients annually.
Before partnering with Webstacks, Presbyterian Healthcare Services was grappling with an outdated tech stack that hadn't seen an update in over a decade. This led to a substantial accumulation of technical debt, with PHS managing its network of six hospital sub sites in isolation, all running on SharePoint CMS. Over, time the increasing complexities of this setup made content management and publication exceedingly challenging.
Ultimately, we recommended migrating and consolidating their website to a more scalable and future-proof solution. Our goals were to streamline website operations, enhance patient digital experience, and ensure PHS's website infrastructure could evolve with their organization long into the future.
The PHS website got a refresh that modernized its design and enhanced user experience while maintaining its brand identity and site architecture.
PHS required an enterprise-grade tech stack that could handle the scale and complexity of its website.
Important factors:
Contentful is an enterprise-level, headless content management system suitable for PHS’s sub site network while providing omnichannel delivery, and high performance through its API-first approach.
Next.js' static site generation would decrease loading speeds, improve SEO performance, and enhance the overall user experience with faster and more dynamic web pages.
Vercel ensures lightning-fast deployment, scalability, and seamless integration with Next.js, enhancing the overall performance and reliability of PHS’s digital infrastructure.
Equipped with the renovated website, PHS was eager to get their dedicated technical team up to speed with the new setup and archive their complete component library. Since the original project was operating under a strict timeline, documentation could not be included in the scope of work. However, it was a significant fast-follow knowing the value it would add to their website in the long-term.
To create thorough documentation for the new site, Webstacks helped Presbyterian Healthcare Services implement Storybook.
Storybook bridges the gaps between design, development, and content editing. It allows PHS to maintain a central repository of consistent, high-quality UI components that can be easily managed, tested, and updated.
Think of it as the single source of truth of your website’s UI. With PHS, each UI component is stored in this library and is accompanied by detailed documentation outlining exactly how things work, where they can be used, and other valuable information related to each component.
This organization of UI components becomes even more important when you reach the scale of enterprise web operations, like PHS. Whether you have a large team, hundreds of design elements, or multiple websites, documentation is a tremendous help in organizing and accounting for the website’s UI.
Another important feature is that components can be tested and manipulated within Storybook. This way, developers and content editors can make changes to components in isolation, without having to edit the CMS or live website.
Below, you can see the Heading Component Documentation in Storybook.
Any user can go in and alter the component with any variations it is developed with. In this instance, a content editor or developer can play with controls such as the heading type, heading color, and alignment. All these changes can be observed in real-time, in isolation, in Storybook.
So how do developers use Storybook?
Why is Storybook beneficial to content editors?
Creating thorough and effective documentation is no simple task.
We often hear our developers say that great documentation is priceless, while inaccurate, unfinished, or outdated documentation may oftentimes be worse than not having any documentation in the first place.
Documentation requires meticulous attention to detail and a commitment to clarity and consistency. For Presbyterian Healthcare Services (PHS), proper documentation is essential to ensure that their website remains robust, user-friendly, and easy to maintain.
By using shared tools and a unified language, the PHS UI Library lays the groundwork for managing and expanding the design and functionality of the PHS website.
Examples of Documentation for Entities and SEO in the CMS (Contentful)
Examples of Documentation for Atoms, Molecules, & Components
We asked Webstacks developer, Erica Snyder, about what made the PHS documentation so valuable for their team.
PHS has established a central reference point for the inner workings of its website’s UI. Content editors now have access to a comprehensive collection of all components, along with definitive information outlining exactly how elements are meant to function.
Content editors are also equipped with a manual that explains the tools available to them and how they are supposed to function.
This centralized documentation answers questions such as “Does this component already exist?”, “How is this component supposed to look?”, or even “What component should I use to display this content best?”. All in all, these docs result in higher quality components and consistency throughout the entire website.
Storybook bridges the gaps between design, development, and marketing teams. By providing a comprehensive and adaptable platform that is readily available to all relevant parties, Storybook fosters seamless collaboration across different members of the organization. This integrated approach ensures that everyone is on the same page, leading to more cohesive and efficient execution.
Storybook simplifies the offboarding process when transitioning the website to the client. With detailed records of everything built, PHS can confidently take full ownership of the website and utilize it to its fullest extent.
Then, when PHS hires new developers or content editors, these team members can quickly dive into the documentation, significantly reducing the time and resources required for training.
From our agency’s standpoint, Storybook is also a super valuable development resource. It significantly speeds up onboarding when we are bringing new developers onto an ongoing client engagement.
The value of Storybook for content editors cannot be understated. Storybook significantly reduced PHS’ reliance on developers to make updates to the website. Many of their questions can be answered with the documentation, which in turn allows them to publish more content, faster.
Content editors also find value in Storybook by using it as a playground for testing and experimenting with UI elements. This hands-on approach helps them understand the capabilities and limitations of the website. When they identify a bug, need an update, or want a new feature, they can submit a request to their developers, and the bug will be resolved in Storybook, and on the live site. This empowerment leads to a more dynamic and responsive content management process.
Webstacks gave PHS a new, modern tech stack which has helped contribute to faster page load times and an improved user experience, all while being adopted by their internal team to continue into the future. The implementation of Storybook has become an essential component of Presbyterian Healthcare Services’ new website.
PHS content editors now have a playground to interact with components in complete isolation. They can experiment with the UI without touching the CMS and live website. If they’re unsure how a specific component is supposed to look, or what a certain field does, a concrete answer can be found in just a matter of minutes in the documentation. Moreover, content editors are empowered to discover the full potential of the complete library of components at their disposal, and the exhaustive modifications possible for each.
In managing a modern, enterprise-level website, systematic UI component management significantly simplifies scaling and operational efficiency. For an extensive healthcare system like PHS or any organization seeking to enhance the organization of their UI, Storybook is an indispensable tool for achieving excellence in web operations.
Presbyterian Healthcare Services is a private not-for-profit health care system and health care provider in the State of New Mexico.
Albuquerque, NM
Healthcare
Enterprise (200+ employees)
