Commonwealth of Massachusetts

Design and research operations for Mass.gov

Leading research initiatives and shipping features that made digital government touchpoints more responsive, accessible, and user-centered for 6.5 million Massachusetts residents.

In 2017, I joined the team redesigning Mass.gov as a senior designer a few months before the launch. On this highly collaborative, fast-paced team, I led end-to-end design for new Mass.gov features, from initial research to high fidelity design and pairing with developers.

I also planned thoughtful iterations based on public and stakeholder feedback, extended the Mayflower design system to new use cases, measured the redesign's performance with the public, and coordinated design and research efforts across projects.

I supported the team for almost two years, and partnered daily with product managers, content strategists, Drupal developers, strategists, vendor teams, and agency partners.

Contributions:
Interaction design Usability testing UX metrics High-fidelity design In-person and remote research Developer pairing Design systems

Overview

Mass.gov is the digital front door for the Commonwealth of Massachusetts; over 75% of the state's 6.5 million residents interact with their government through the site.

In 2016, MassIT (now the Executive Office of Technology Services and Security) began a full redesign of Mass.gov to make key online services more usable and accessible and to migrate to a modern Drupal CMS. I joined a few months ahead of the launch to support the redesign and post-launch iterations.

Projects

A digital hub for regulatory and policy documents

In addition to transactional services, Mass.gov is the home for volumes of agency reports, regulations, and policies. This information is often essential for the public, the business community, and state and local workers.

On the legacy site, regulations, policies and reports were often published as a PDF or Word doc, which made it hard to find via search and less accessible than content published as HTML pages.

In the redesign, we wanted to:

  • Make it easy for agency authors to publish full publications and document coversheets as HTML page, so they were more searchable and accessible.
  • Develop a structured data schema to improve search optimization and future migrations.
  • Design affordances to signal if something was a part of a bigger collection and how to navigate through it.
  • Unblock the team so we could migrate top information collections to the new Mass.gov.
A flow chart showing an audit existing policy docs and a draft data model, which leads to black and white wireframes, which leads to full color high fidelity design with annotations on each field.
Examples of the content audit, wireframes, and annotated design artifacts created during the design process for creating legal binders on Mass.gov

I led research sessions with agency staff who manage this content and with people who regularly access this information to serve the public and for professional purposes. We needed a solution that would work for many kinds of content, so I also audited multiple collections of reports, regulations and policy documents to develop a draft data schema and vocabulary.

I used the draft data schema to create wireframes that I reviewed with authors, site visitors, and team members including product owners, content strategists, and engineers. After iterating with stakeholders, I created high fidelity designs based on the Mayflower Design System.

A set of website mockups showing how regulatory and policy content appears on Mass.gov. Three show desktop views for how a template could adapt to various types of content, and two show mobile page display and navigation.
Drupal template design for a digital hub for regulatory and policy content on Mass.gov to publish and catalog key information as HTML pages, rather than PDFs.

I wrote initial annotations based on research and then reviewed them in detail with our engineering team, and collaboratively updated the designs based on their feedback. This feature is now live and well used on Mass.gov.

Research operations for Mass.gov

During my time with EOTSS, I led multiple research projects to assess how Mass.gov was performing on the ground, and how the public engages with digital government resources.

These projects included:

  • Running intercept testing at RMVs to evaluate Real ID messaging and prototypes.
  • Organizing sessions with law librarians to observe Mass.gov's on-the-ground role in delivering legal resources to the public.
  • Growing a user testing panel to recruit members of the public for voluntary usability testing.
  • Recruiting and conducting interviews with high-frequency Mass.gov audiences, including trade and professional organizations, state and municipal workers, and local businesses.
  • Interviewing job seekers and collaboratively mapping the key points in their journey to getting unemployment benefits.
  • Designing and facilitating research sessions with DTA benefit seekers to identify which visual indicators and affordances they rely on to determine a site is a trusted government source.
  • Mapping the license suspension hearing processes to scope future tech and service improvements.
  • Creating a usability benchmarking testing cadence to assess template performance post-launch.
Photos from research trips I helped coordinate. These photos show the front desk of a law library with Mass.gov being used on the computer, a busy street with a law library building, a print out of a Mass.gov page under glass for the public to reference, the front of a Department of Transitional Assistance building, a front desk display at the MassHire Franklin Hampshire Career Center, and a booklet at the Boston Unemployment Office showing how to navigate the website.
Photos from research trips I coordinated and facilitated for Mass.gov and EOTSS. These included sessions to see how frontline law librarians use Mass.gov to serve the public, sessions with the Department of Transitional Assistance on visual affordances that signal a trusted government resource, and leading interviews at career centers and unemployment offices to assess current systems and touchpoints to get unemployment benefits.

Navigation patterns for organizations

During research on high frequency Mass.gov visitors, we learned that agency organization pages were hard to navigate, and certain audiences relied on these pages as a waypoint for services and information.

The organization page template had been highly reactive to customer requests, and had evolved to create long, dense pages. New template subtypes also created confusion for agency authors.

I led a design sprint to quickly iterate on the template and improve its navigation. The goal was to:

  • Identify missing navigation markers on organization pages and inconsistencies between template subtypes.
  • Create pathways to information lower down on the page, like office locations, application log ins, and key services.
  • Keep the one-page model (for now); avoid organizational sites or top-level navigation changes.
  • Test any new patterns with real users
A spreadsheet showing a comparison of UI and data elements. The spreadsheet is followed by an arrow that points to a series of design mockups showing a Mass.gov organization page with an opened sub navigation pattern on desktop and mobile.
Snapshots of the data audit that informed the design of an organization sub navigation pattern, and the final component.

First, I evaluated what we had. I compared the original design specs to what agency authors had actually implemented and iterations the team had made. I also audited the existing data model and UI to identify what information and features were consistent across different template variations, and where there were opportunities for alignment.

I reviewed these findings with the team and then began designing and testing different sub navigation concepts. There are hundreds of organizations on Mass.gov, and we wanted to optimize for predictable experiences while also giving authors flexibility to adapt for their audiences.

We landed on an organization sub navigation component that agency authors could turn on and adjust within set categories. I tested the navigation with TreeJack and in usability tests, and post-launch ran Chalkmark heatmap tests which confirmed the new navigation was used and findable.

Additional resources