Expansive organizations often share a common branding pain point: the need for a website collective that is flexible enough to accommodate a variety of present and future applications across departments, yet cohesive enough to tell a familial brand story.
These challenges guided our creation of a master framework that encompasses 27 major clinical services and entities that make up the world-renowned Temple Health organization.
We began this project by examining the branding strategy that was already in place for Temple Health's printed materials, working to translate the elements effectively to the web — and pushing them further in places where it felt appropriate.
Rather than looking at these projects as one-off designs, we approached them as if we were creating a toolbox of modular components that could be reused and reconfigured to work in many different iterations over time. This atomic design-based concept allowed us to frame the various content types available across these centers with a backbone of strong, consistent visual elements — including typography, colors, buttons, filter and form elements — that were repeated throughout. By keeping these basic elements extremely simple, they can be mixed and matched in many different combinations while still feeling as if they belong together.
Key considerations throughout our work included a strong focus on predictive search functionality, SEO, integration of scores of “relatable” content, printer-friendly templates, and the unique needs of users who regularly access and search the site primarily via mobile devices.
The nearly 5,000 pages of migrated content involved in this project consists of news that is now reimagined via a new newsroom-style format, articles, blog entries, patient stories and portals, condition and treatment information, and more. Where content called for integrated contact forms — such as Refer a Patient, Request an Appointment, and Contact Us — we added unique analytics codes to track referring pages where appropriate.
A revised Find a Doctor search feature integrates appointment requests and other key forms with the health system's HIPAA-compliant infrastructure. It also includes medical team listing pages that are dynamically populated from an existing doctor database, now grouped appropriately under relevant hierarchies; a third-party doctor rating system; relevant specialty and location pages; and a comprehensive Locations page that includes detailed information on hospital, primary care, and satellite offices. We also built two separate Clinical Trials search tools that appear in a contextualized manner, searchable by keywords with conditions filters, within subsites for the Temple Heart & Vascular Institute and the Temple Lung Center.
As a special UX consideration, we separated the massive amounts of content for each of their primary hospitals into different verticals using a tiered navigation solution. Once viewers arrive at a hospital landing page, the interface displays secondary navigation that contains only links relevant within that hospital's immediate ecosystem. This allows patients interested in, for example, only Jeanes Hospital to be sure that everything they're seeing is applicable only to that entity. At the same time, when this tiered header is in place, the primary navigation is still accessible through a drawer at the top of the page. This was a logical, straightforward solution to a larger challenge the client was facing that could've quickly gotten messy.
The new templehealth.org homepage now better represents this robust health system’s range of services and providers, and uses intuitive navigation to direct viewers to where they want to go at any time during their visit. Overall, the clean and efficient design system now shared by all departments supports the client’s need to accommodate large volumes of relatable content, expansive visuals, and various multimedia features while at the same time loosely aligning with other related Temple entities like the Fox Chase Cancer Center and the Lewis Katz School of Medicine.
Going forward, the Temple Health site administrators using this design framework will be able to leverage its component library and be confident that it will continue serving their needs as they manage their expanding sites for years to come.
