Presbyterian Healthcare ServicesPresbyterian Healthcare Services

Implementing a Storybook UI Library for Presbyterian Healthcare Services

Learn how documentation streamlined workflows and improved efficiency for PHS developers and content editors.

Implementing a Storybook UI Library for Presbyterian Healthcare ServicesImplementing a Storybook UI Library for Presbyterian Healthcare Services
350%increase in organic search impressions
3Xin clickthrough rate

Who is Presbyterian Healthcare Services?

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.

Background of the Engagement

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.

Design Improvements

The PHS website got a refresh that modernized its design and enhanced user experience while maintaining its brand identity and site architecture.

A scalable, modular design system critical for consistency across thousands of pages

Restructuring of page layouts to establish a hierarchy of information

A revamped navigation menu greatly improving accessibility

Development Upgrades

PHS required an enterprise-grade tech stack that could handle the scale and complexity of its website. 

Important factors:

  • The monolithic tech stack was highly inflexible and outdated, which had a direct impact on site performance.
  • PHS had multiple sub sites, existing in separate CMS environments and utilizing distinct page layouts and templates.
  • There were over 1,000 existing web pages that needed to be migrated.

Content Management: Contentful

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.

Front-end Framework: Next.js

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.

Hosting

Vercel ensures lightning-fast deployment, scalability, and seamless integration with Next.js, enhancing the overall performance and reliability of PHS’s digital infrastructure.

Implementation of Storybook

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.

What is 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.

Storybook for Developers

So, how do developers use Storybook?

  • Developers create detailed, up-to-date, documentation for how things are built and meant to function.
  • Developers (especially developers who are new to the codebase) can reference Storybook to understand what components exist and how they were programmed.

Storybook for Content Editors

Why is Storybook beneficial to content editors?

  • Content editors get access to an instruction manual for their entire website’s UI, and can learn about everything at their disposal.
  • Previews show how UI components (such as buttons, forms, or card decks) will look - all without making changes in the CMS.
  • Content editors can review UI components and provide developers with feedback such as bugs, changes, or functionality requests directly in Storybook.

The Art of Documentation

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.

  • Clear and Consistent Language: Vocabulary used throughout the docs must be intuitive for all stakeholders. It must be written like instructions, coherently and succinctly conveying how things are supposed to work.
  • Citations: All elements/concepts referenced within the documentation are internally linked. This provides meaningful context if users are curious to dive deeper into a particular topic.
  • Visuals: Imagery such as static screenshots and gifs should be incorporated to supply important visual cues.
  • Totality: Documentation must be exhaustive, leaving no aspect of the website UI left out.
  • Continuous Maintenance: For documentation to remain valuable and applicable, it must be updated to stay in parallel with the live website. It should fit seamlessly into the development workflow so that it doesn’t become an afterthought.

4 Massive Value-Adds of Storybook for PHS

#1. Single Source of Truth

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.

#2. Collaboration

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.

#3. Streamlined Onboarding

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.

#4. Content Editor Enablement

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.

Wrap-Up

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
About

Presbyterian Healthcare Services is a private not-for-profit health care system and health care provider in the State of New Mexico.

Location

Albuquerque, NM

Industry

Healthcare

Company size

Enterprise (200+ employees)

Tech stack
Contentful
Storybook
Vercel
Algolia