Children's National Health System

Leading National Children's Hospital Provides State-of-the-Art, With a Heart

A Leading Site, in 12 Months!

A Leading Site, in 12 Months!

Today, one finds many hospital systems that are three years into a redesign, and already feeling behind the curve of changing technologies and user expectations, about to launch something already outdated. Not so with Children's National Health System, who chose TBG and Sitecore to redesign and relaunch their website in 12 months. The end result is a state-of-the-art, fully Responsive, highly automated site that virtually defines best practices for children's hospitals on the Web. The new Children's National site makes the case for what is possible when the right institution meets the right digital agency, with the right vision.

hands holding a tablet
Content Strategy & Marketing

Content Strategy & Marketing

From patient experience videos to a reengineering of basic visitor logistical content, this relaunch focused on creating a deeply appropriate, high value experience for all types of visitors. Working with TBG, Children's National developed a comprehensive plan for a transformation of the site that went far beyond UX and technology to improve the brand impact of all site content. A completely rethought information architecture focused on developing key content for distinct audiences and creating a new site structure to power Sitecore's targeted content capabilities in the future.  The strength of ongoing content development also positions Children's National for more significant content marketing, based on stronger human stories and more clearly articulated and differentiating experience and capabilities.

video page screenshot
Real-time Emergency Room Wait Times, Physician Search, Video Patient Stories, & More

Real-time Emergency Room Wait Times, Physician Search, Video Patient Stories, & More

The feature-rich site makes great use of modern best practices, including showing patients current Emergency Room wait times up front, advanced social media integration, moving multimedia patient stories, deep approaches to finding physicians and locations, leveraging metadata taxonomy to enable automated related links, and many others—all with an eye towards the highest standards of advanced customer service and streamlined usability to orient families and referring physicians.

cellphone in hand
Interactive Floor Plan & Maps

Interactive Floor Plan & Maps

For visitors to any hospital, getting oriented in the building can be a challenge—especially under stressful circumstances like having a child sick or determining visiting hours. For that reason, Children's National and TBG chose to focus on creating an interactive (HTML 5) map that would allow users to quickly understand their position and options on each floor of the hospital—and, notably, one that would work on all devices, even cell phones used in the hospital itself.

hands holding a tablet

TBG & Children's National Health System

The Children's National Health System website is not only one of TBG's favorite projects to date—it also is easily one of the best children's hospital websites of the present day, and more generally serves as a model of what strong hospital system websites can achieve.

What makes the success of the project even more compelling is the fact that despite its complexity, it was developed under intense time constraints, having been brought into being from initial discovery to migration and launch within a 12-month window. The new site included considerable new content creation, a completely new user experience featuring full Responsive Web Design, as well as complex integrations with other systems. Large hospital system website redesigns of this complexity in the real world can take easily twice as long, given the content issues, politics, and historical considerations that need to be sorted through within an organization. This project was a true partnership between Children's National and TBG and completion of this complex transformation within an accelerated timeline would not have been possible without a close collaboration between TBG and Children's National’s highly functional internal digital agency.

The site was built in (and takes great technical advantage of) Sitecore, one of the best Web content management and content personalization systems. Sitecore replaced an older platform that had been in place for some time, providing greater stability, features, and back-end usability. Chosen for its strong content reuse, out-of-the-box personalization, and analytics capabilities, Sitecore beat out Drupal, a popular CMS platform that was ultimately considered to not have the level of engineering quality and stability appropriate for the project.

The site development immediately followed a professional rebranding of Children's National Health System that emphasized the multi-leveled components of the health system and its exclusive focus on kids: not just in the sense of leading-edge medical care, but also in terms of holistic experience for the kids visiting, and national advocacy for children's health issues. The relaunch of the Children's National brand presents the organization in a way appropriate to the organization’s breadth and depth, as well as its unique national position. It was also the best time to redo the website after a brand review so the site and content could be reviewed with those goals in mind.

The new site design produced by TBG was driven both by a desire to provide best-in-class usability for key audiences, but also to create a total, panoramic experience that would reinforce the organization's newly articulated brand identity. Every element of the site—from small stylizations, use of imagery, subtle Responsive interaction design, and overall look-and-feel—was carefully tuned to work with the new brand, to convey the overall mission, and to support a positive experience for visitors. The design was intended to provide a pervasive sense of strength, comfort, and clarity throughout the site.

One of the major frustrations that occur with complex hospital websites is that users under time pressure may experience difficulty finding crucial content, especially on devices other than desktop. The mobile experience has become increasingly important for Children's National's user base. In fiscal year 2014 nearly half of Children’s National's visits came from mobile devices—a 46% increase over FY 2013.

In addition to implementing full Responsive Web Design (with leading brand nuances of interaction design), TBG also solved many very specific usability challenges for the hospital. One aspect of this forward-thinking design was the use of "sticky" bottom navigation, which allowed for simultaneous stronger impact of primary content, and a less desktop-centric approach to page layout. "Sticky" bottom navigation is locked in place and doesn't move with the rest of the scrolling page. Although this position represents some small level of dissonant change for the average user, it tests well for usability and is more suited to evolving computing form factors like tablets and touch screens. This, in combination with a variety of subtle navigation schemes and rich in-page (often interactive) page layouts, define an extremely high standard of usability that together with careful labeling and content structure, make the site a pleasure to use.

With the rebranding, the Children's National Health System website balanced the specific needs of a leading national children’s hospital along with promoting the organization as a comprehensive Health System, which includes hospitals, outpatient centers, and primary care practices, located across Washington, DC, Maryland and Virginia (accomplished via callouts, interactive maps and intuitively designed way finding tools). There are a mix of extremely varied use cases in play for different types of visitors, including visitors who are looking for specific expertise, visitors who are looking for care in specific geographies, and those who already have a child in the hospital and need logistical and other support throughout the experience. All of these use cases and more have been directly addressed with special content and specifically tuned user experience. A holistic reassessment of both content strategy and UX strategy was central to the project.

The site is also extremely feature-rich, providing a wide range of capabilities tuned to different audience needs. For instance, the site features:

  • dynamic faceted search;
  • deep integrations with social media, including buttons for easy content sharing, Twitter feed, Flickr and Facebook integration;
  • searchable integrations with healthcare provider databases;
  • interactive floor plan;
  • real-time ER wait times updates;
  • interactive maps;
  • surfacing conditions and treatments as another pathway; and
  • highly engaging patient stories, employing video, imagery and graphics.

In relation to the number and depth of these features, the site is a model of a highly functioning healthcare site, and takes advantage of all of the significant best practices of the day.

In order to achieve all this change within a limited timeline, and with proper controls and review at Children's National, the team relied heavily on TBG's proprietary structured design processes, which include elements of strategy, UX prototyping, pressure testing content, requirements analysis, and prototyping in Sitecore, as well as a coordinated content entry methodology that allowed for content migration to begin well before the site prototype in Sitecore was complete. These methodologies were discussed at length at the beginning of the project, and then refined to suit circumstances as aspects of the project evolved.

Balancing the right levels of aspirational strategy, tracking of innumerable details, and ability for the client to review and understand work in progress is, of course, the primary challenge of large Web projects—and in a race to the moon timeline situation like this, the process had to be particularly thoughtful, well documented, and explicit down to a very granular level. Building on two decades of working with large hospitals, TBG was able to provide a level of ongoing guidance and coherence to the project that made the mountain of details manageable.

One area of particular intensity in the project was Quality Assurance (QA), since the multiple overlapping tracks of work needed to complete the site within the timeline required a very thoughtful methodology. Both the TBG and client teams engaged in multiple stages of QA based on a carefully maintained list of deliveries, and ranging across a variety of types of review and testing, all organized through a centrally managed and highly custom QA repository. The coordination of all of this activity—and its real-time sync with content migration and development—was a major win of the project.

The Children's National website makes deep use of its underlying Sitecore CMS platform, with a large portion of the site rendered using CMS automation that organizes content based on tagging structures (via carefully constructed metadata). This results in a high performance, feature-rich site where a very large amount of Web publishing can be executed by a small Web team and enables features like sophisticated search and global site management capabilities. In addition to enabling powerful tools for Children's National's core Web team, TBG's best practice CMS implementation adds value to the organization by providing decentralized workflows to enable more frequent updates to content than was previously possible. The site was built using state-of-the-art Sitecore development and content migration practices, allowing for rapid, highly orchestrated collaboration among a large team of developers and using considerable automation in relation to deployment, testing, and code management. As a truly mission critical site, everything about its engineering needs to be failsafe and triple-checked.

Since its launch, Children's National has seen an improvement in every major site metric category, including a 15% increase in page views, and a 161.45% increase in session duration. The new site also increased site-based donations by 54%. The redesign has driven tremendous efficiency and time-to-market improvements for marketers. With the site being fully responsive, the number of mobile visitors continues to increase. Previously, mobile users were expressing deep dissatisfaction with the former website. The new site has dramatically less focus on internal structure and more focus on users’ needs. 

In fact, the site utilizes a number of personalization features to enhance the user experience. For example, TBG installed MaxMind to allow for geographic and organization-based personalization. Visitors from outside the U.S. see different content. For instance, high value site visitors from specific regions in the Middle East will be shown content highlighting the Sheikh Zayed Institute, and other visitors will see international positioning foregrounded. In addition, in relation to geographic personalization, visitors from Maryland, Virginia and Washington, D.C. see subtly different geographic positioning messages about the health system. Personalization features also take into account what content a user has viewed. Based on user views, preferences and interests are derived. From that, users see different featured and/or topical content (e.g. seeing a Neurology patient story after viewing Neurology content. 

The new site represents a dramatic improvement in user experience, quality of content, and mobile/tablet support for users. The previous site was a mid-to-low standard website which hit all of the cliches of children’s hospital sites (and there are many). The new site is extremely fresh and is a model for contemporary best practices in all areas, but especially in usability, user experience, content strategy, and content personalization.

Of course, this initial launch is just the beginning of something even greater, as TBG and Children’s National continue to develop the site and take it to the next level. A variety of future phases are planned which deepen integration, migrate and improve microsites, and make greater use of the underlying Sitecore platform. As new aspects of the site come online, we’ll be updating this case study to reflect them. 

"TBG listened to our initial needs as well as our evolving needs and adapted along the way.  The project management was outstanding and allowed us to stay within reasonable variation of time and budget. In addition, they care about long-term relationships and work toward a sustainable model of the digital ecosystem."

Mike Duley

Director of E-Strategy, Children's National Health System

  • trophy iconNationally Ranked Hospital by U.S. News & World Report
  • person icon225,000+ Monthly Visits
  • star icon54% Increase in Donations
  • magnifying glass icon161.45% Session Duration Increase
  • check icon7,000+ Pages of Content Migrated
Envisioning Children's Healthcare

Envisioning Children's Healthcare

The Children's National website project had an interesting start. In the course of vendor selection, key strategic ideas about the vision of the site spontaneously crystallized very early between TBG and Children's National, ultimately leading to a multi-phase conception of the project that foregrounded usually sidelined elements like the existing patient experience, to show the extremely broad range of specialties, to reposition the organization to suitably express what is great about it, and to provide a leading (and differentiating) user experience that would not only be fully Responsive, but also make use of HTML 5 and other more complex interactions with Sitecore. Although a lot of refinement and development occurred after the project began, these considerations continued to be part of the core of the overall strategy—and multi-year roadmap—throughout the project. 

As with every TBG project, a major discovery effort then took place for TBG to understand Children's National's business context, culture, opportunities and challenges in great detail—as well as conducting new market and best practices research, building on our decades of experience building websites for large hospitals. Through a process of stakeholder interviews, research, and a deep analysis of current content, practices, analytics, and site structure, TBG developed a rich understanding of the overall project context and TBG and Children's National were able to have an extensive conversation—which happened rather quickly—about opportunities and challenges. Ultimately, TBG's vision for the site, developed in collaboration with Children's, drove the development of a detailed Web strategy, which TBG used to orient and direct the rest of the project.

Analyzing & Understanding the Baseline

Analyzing & Understanding the Baseline

Hospitals, like other large institutions, face particular challenges when they execute large website redesigns. Although almost always driven by real needs (changing user expectations, market pressures, or technology changes, to name a few), driving what are expensive infrastructural projects, the project necessarily must have a foot in the past as well. This is because they aren't starting from scratch for either external users or internal stakeholders. Thus, managing the character and change—especially on tight timeline—is a crucial part of making these sorts of projects successful. It is as important to understand how content is being used as it is to understand that it exists at all.

For the redesign of Children's National Health System, it was crucial not just to understand what content was in place, but how it was being used, and what functions it was serving within the organization. Working under considerable time pressure, the team discussed different types of content and the holistic and internal considerations as part of content inventory process. Along with strategic considerations, review of analytics, and usability best practices, this discussion informed a major restructuring of content with the goal of improving usability and relevance—without losing features and content that were important to the organization. All of these decisions were reflected in site map and content inventory deliverables, and ultimately discussed with Children's National through a multi-step vetting process. This process mitigated disconnects between the evolving new site plans, and the internal needs of the organization—disconnects which could have been far higher given the project's accelerated time.

From Wireframes to HTML Prototypes

From Wireframes to HTML Prototypes

The art of analytically documenting layout ideas in wireframes has obvious advantages in terms of alignment, notation, and top down perspective on site usability. At the same time, the practice is increasingly out of alignment with aspects of development that are becoming more prevalent—such as the dynamic interaction of fully Responsive Web Design, the layering and interactive effects of HTML 5, and the efficiencies that sometimes come into play from rapid prototyping, for instance in prototyping directly in Sitecore. However, at the same time, the increasingly popularity of agile development methods that might be implied as an alternative tends to fall flat in the context of the huge number of integral alignment and overarching architectural considerations that are so crucial in large CMS-centric Web implementations.

In order to address this, TBG approached the project with a hybrid approach, mixing aspects of conventional "waterfall" processes (with their attendant wireframes) with more agile and prototyping-based approaches that would allow an earlier view into the effectiveness of the proposed Responsive design solution, and also allow some of the more complex aspects of front-end code compatibility to be addressed earlier in the process. Working in tandem with wireframes, these deliverables were particularly useful in understanding some of the more unusual interface elements in the project, including assessing the effectiveness of the "sticky" nav and interactions of HTML 5 elements in the page.

Content Shells, Rapid Development, & Other Adventures

Content Shells, Rapid Development, & Other Adventures

Extreme timelines require extreme measures—in this case, multiple measures! Developing the Children's National website from initial discovery to final content migration, QA and launch required compressed development times that used the full boat of TBG's techniques for accelerating development. Orienting a large team to a fully architected, distributed task approach and allowing for proofing of various versions of the site, sometimes on discrete proofing servers, the site build leveraged a large amount of programming talent in a high efficiency way.

Some of the techniques used to streamline the group development process included:

  • heavy use of customized Jira for issue and task tracking;
  • separating development tasks from code integration tasks;
  • automated deployments via Octopus;
  • automated, versioned backup as well as GitHub;
  • use of the TBG core library to extend and streamline Sitecore development;
  • use of Nuget packages for managing first and third-party code dependencies;
  • automated builds of developer servers; and
  • automated, iterative page performance and load testing. 

In other words, everything but the kitchen sink!

Another technical approach that was crucial to reach the launch date was separating content entry tasks from final front-end development using what we call a content shell approach. This means building out Sitecore content types (data templates) in great detail early, before the corresponding pages renderings can be deployed, as a consequence, content can be proofed—a situation which clearly is not optimal, but is much better than trying to fine tune 1000s of pages of core content in a short window before launch. Having access to fine tune content in the appropriate forms while the lion's share of development goes on gives content managers and content strategists a huge advantage against the pressure of the timeline. That pressure was further decreased by TBG migrating a large amount of structured, relatively consistent content (locations, some conditions, etc.) from existing pages and databases into Sitecore, where final changes and touch up could efficiently take place without redundant content entry.