Massachusetts General Hospital

Mass General

Since 1811, Massachusetts General Hospital (Mass General) has been committed to delivering standard-setting medical care. Throughout the decades, the hospital has had a consistent commitment to advancing that care through pioneering research and educating future healthcare professionals. However, the design and content organization of Mass General's former website made it difficult for the hospital to tell all its stories online. The #1 U.S. News and World Report hospital in 2015 needed a new online home that could speak to all the hospital's specialties - and all its audiences. 

  • Challenge

    With over 30 centers with differing specialties, we had determine how to talk to a wide variety of online audiences with the same empathy and compassion that defines Mass General’s level of patient care.

  • Solution

    Design an all-inclusive digital presence for the ‘no one size fits all’ organization.

  • Results

    The new website is a strong foundation for the future of Mass General online, and gives the hospital the tools they need to share the work they do every day with the world.

How we did it.

  • Process

    Given the depth of the site, continuous progress was necessary in order to hit the launch deadline. To ensure we continued to move forward, even with layers of approval, we met with the Mass General team multiple times per week, communicated daily via Slack, and scheduled regular travel to get together in person.

  • Creative/Visual Design

    Templates were designed to provide structure and guidance with enough options to support every department, big or small.

  • Usability Testing

    Throughout the process, we relied on user testing methods to validate critical design decisions. We developed a comprehensive testing plan to make sure that our changes to important calls to action and navigation made the site experience more clear and intuitive for both patients and healthcare professionals.

  • With such a large and long project, it was easiest to understand the status of templates and reference the most up-to-date design through in-person meetings. To organize communication, we created a web-based design system to catalog our template, component, and element designs. As we started buildout, we replaced those static designs with production ready code and turned the design system into a living parts kit. Having one place to go to see the latest update on everything allowed both teams to keep in sync throughout the project.

  • Several days of in-person usability testing with representative users in Boston helped us evaluate important calls-to-action, search usability, and the language we used for primary navigation items.  Our direct contact with the site’s users helped inform more empathetic designs and built evidence-based consensus for optimizing the user interface.

  • Using the Web Content Accessibility Guidelines (WCAG) as our standard, we paid special attention to HTML semantics and document structure to help those using a screen reader navigate the page. In addition, we used Accessible Rich Internet Application (ARIA) roles to give screen readers additional information about how to interact with components on the page.

    How to Implement Accessibility in Agency Projects: Part 1
    Jeremy Fields, Front-End Development Director