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."
Director of E-Strategy, Children's National Health System