Main Line Health Doctor and Patient

Main Line Health

Patient-Focused Strategy, Design, and Functionality

Our Part

  • Content Strategy
  • Information Architecture
  • Prototyping and Web Design
  • Living Style Guide Deliverable
  • User Research
  • Persona Development
  • Usability Testing

With over 10,000 employees and 2,000 physicians overall, the award-winning Main Line Health is a not-for-profit health system serving portions of Philadelphia and its western suburbs. At its core are four of the region’s most respected acute care hospitals, as well as one of the nation’s premier facilities for rehabilitative medicine, among many other clinics and health-based services.

Over the years, Main Line Health has expanded as facilities and hospitals joined the organization. Even though a patient-focused experience is central not only to each individual location but also to the overall organization, the website experience was anything but. Over the years the site had grown organically, becoming a patchwork of 15,000 pages with duplicate content, combined with inconsistent navigation and link patterns. The outcome was an incredibly confusing variety of layouts created over time, geared more towards how the organization itself was structured rather than how a patient or caregiver visiting the Web site would actually look for help for their healthcare needs. To add to this frustration, poor messaging had resulted in potential patients being unclear as to what Main Line health was exactly, and generally found the site cold and unwelcoming.

Knowing MLH had chosen Sitecore as their CMS, Palantir was selected to complete a comprehensive strategy and design engagement that would solve the following business problems:

  • Take several hospitals, clinics, and offices and be able to have them live under one cohesive and branded website
  • Design a site with a modular design system that was flexible enough to grow as the organization expanded
  • That it be patient-focused in both tone and structure
  • That it visually reflect the quality care provided
  • That it be designed for mobile devices
  • Improve the content strategy
  • That the site was as transactional as possible, with data to track improvements
  • Lastly, that we could hand off the designs in code to a Sitecore vendor for development as seamlessly as possible

In order to best tackle these issues, we broke the project into three main areas:

Discovery and Research

Metrics on the current site provided a wealth of information to start our research. By looking at how the traffic was engaging with the site and what search terms were being used, we were able to make some key decisions on where to focus our time on fixing the biggest pain points. For example, the second most searched for term for a patient was “find a doctor,” and yet only 10.15% of all visitors viewed any physician profile. Users were also giving up when trying to make an appointment, and studying traffic sources gave MLH insight into where it should spend its advertising dollars for paid search.

  • Discovery and Research: a thorough analysis into audiences, data, goals, and metrics.
  • Structure and Content: based on the research, we created a revised information architecture, suggested a content strategy, and made recommendations on governance.
  • Design and UX: the final piece was translating the research into a visual interface that met the goals for the project and supported the final structure.
MLH strategy examples
Examples of some of the initial data researched from Main Line Health’s Google Analytics. These particular statistics were just some of the ones that helped guide our decisions on where to focus better organization and UX into the design in order to create increased conversions.

But the most shocking statistic of all? Of the 15,000 pages on the MLH website, the top 20 pages accounted for 52.63 % of all pages viewed, and about 7,000 pages received no traffic at all. As our product owner at MLH said, “you could literally delete half the website and nobody would notice.” Since the site was siloed per hospital rather than consolidated by medical condition, Google was spreading search results rather than aggregating to one page. The duplication of pages was confusing visitors, too, resulting in poor organic search rankings, and made it increasingly challenging for editors to manage the site. Consolidating pages and reworking content types was critical in having the content work smarter for MLH.

In addition to analyzing metrics, we held a series of kickoff meetings with stakeholders over several days to learn how different internal and external audiences use and react to the site. We studied competitors’ sites, conducted a card sort to look at ways to improve the information architecture, and solidified the goals of the project. Lastly, an online survey was emailed to 30,000 MLH email subscribers in order to get immediate feedback about what was working, what wasn’t, and what their priorities are when visiting the MLH site.

What better way to create a truly user-centric patient-first experience than by really getting to know the people who are visiting? Empathy mapping exercises helped us to get into the heads of audiences, from which we could create detailed user personas to deeply understand the best ways to create effective sites for patients and caregivers.

Armed with this research, we were able to determine how best to break out of the traditional organizational silos and provide content that created a truly user-focused experience. We drafted a comprehensive Strategy Report that outlined all the goals, data and personas, as well as a revised content strategy, an initial pass at the information architecture, and governing and staffing recommendations. This document created a roadmap for the Palantir team moving forward, and also allowed the Main line Health team to show progress on the project to internal stakeholders.

Structure and Content

Based on the research uncovered through Discovery, an initial restructured information architecture was created. In order to quickly validate the IA work, we ran an initial usability test using an online tool called Treejack to ensure that users were finding their way through common tasks. The results allowed us to see the paths that were chosen and the degree of success, so we were able to make informed decisions on where to tweak the site map to make it easier for users to find what they needed.

Example of usability testing
Examples of usability testing completed for Main Line Health on the information architecture. While the first task proved highly successful, the second task proved confusing to users. Adjustments to the information architecture were made to improve this task.

After reviewing the content, 16 content types were identified. These content types provided clear guidelines for editors to know exactly how to best structure the content when writing—which included writing for “chunks” rather than “blobs,” and recommendations on keeping the writing concise for quicker reading on mobile devices.

An internal governance chart was created to help MLH editors know exactly how the flow of content would work: from the type of content being produced (e.g. - was it about a medical condition or treatment? Or was it one of their programs or services?) to the approval process itself. Auditing existing content became easy, since the team was able to make some quick decisions on which content to delete, archive or rewrite based on the data uncovered from Google Analytics.

Design and UX

With the research completed and the content underway, it was time to start creating an appealing visual way to deliver all the information to users online. First we created a series of style tiles that gave a sense of color palette, button and photography styles, and typography. They also helped us determine the direction for the overall tone and mood of the site.

    MLH style tyles
    Three initial style tiles presented: the first set a tone of inviting, people focused, and sincere. The second was technical, progressive and strong. The third was more warm, trusting and personal. These helped MLH decide which visual direction represented them best.

    Once a direction was chosen, we began working on wireframes in order to bring structure to the functionality and to begin the transition to development. Low-fidelity wireframes were translated quickly into the prototypes built with HTML/CSS, where we could then see the final designs working in all devices. Additional templates and prototypes were created as each set of pages were approved, with 27 completed in all to cover every possible scenario needed.

    To make sure we were on the right path, we tested the site again using the designs to make sure that the visuals were aiding the usability of the site. Using heat mapping software, we were able to validate that users were finding information easily, and that edits made due to the previous test showed measurable improvements in usability.

    Once all of the design components and final templates were completed, they were all captured in a living style guide that chronicled all aspects of the design system (individual pieces such as button styles, full landing pages, and the working code for each). This ensured all site maintainers a foolproof method to extend sites in the future as needs change—whether those are business in nature or related to specific patient needs.

    Implementation and takeaways

    The style guide was transitioned to the development team for a Sitecore build, with weekly consultation from Palantir to answer any outstanding questions or provide guidance towards the design. By creating a truly modular and flexible site that leverages the power of SASS for a wider range of control over typography, color variables and grid structure, the vendor could take this code directly and create the website, communicating design intent in the language of the Web.

    And while our work was validated via analytics data, user research, and testing, the true test comes when we can compare the metrics captured at the beginning of the project with the results post launch. Some things we’re watching for specifically:

      • Increase in online appointments
      • Decrease the bounce rate
      • Increase in online appointments
      • Increasing the views of physician profiles
      • Increasing event and class registrations
      • Plus getting the total number of pages on the site to less than 7000!
    Screenshot of MLH before and after
    The before and after image of an interior landing page for one of Main Line Health’s hospitals. The redesign makes it much easier to see the specialties at that location, to find directions, register for events, and to make an appointment.

    In addition, the initial feedback on the look and feel of the site has proven that we were able to turn a typical, hospital-centric website into a patient-focused site with clear hierarchy that creates a sense of confidence and quality care. Back end editors in each facet of the organization appreciate that they can tailor their message and design elements to its patients, making sure that they truly come first. The combination of elegant and compelling design components and photography with real-world, data-backed research will create success for all Main Line Health patients and providers for years to come.