Leading design and research operations for Mass.gov

Over 75% of Massachusetts residents interact with the state government through Mass.gov. Millions of Massachusetts residents use Mass.gov to access services from hundreds of departments, commissions, and offices - from everything from renewing a drivers license to starting a business to accessing emergency food assistance.

I led design and research initiatives for the highly collaborative, fast-paced team to make digital touchpoints with the state government more responsive, accessible, and user-centered for 6.5 million Massachusetts residents.

Outcomes:

  • Launched a redesigned Mass.gov that transformed over 250,000 pages of legacy content into a service-centered constituent experience optimized for responsiveness, plain language, and accessibility.
  • Migrated thousands of documents from PDFs to accessible, responsive HTML templates.
  • Designed faceted search interface for government services that ultimately became the blueprint for current Mass.gov search.
  • Scaled user research practice within the digital team and across agencies through coaching and collaborative research practices.

Designing a modern, accessible digital policy hub

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.

I led an end-to-end design of a flexible, responsive template that enabled agency partners to easily post policies, reports, and coversheets as HTML, making them more searchable and accessible.

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.
Final 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.

Collaborative design with agency authors and close pairing with developers

I led research sessions with agency staff who manage this content and with people who regularly access this information. We needed a solution that would be flexible for many types of content, so I audited multiple information collections to develop a draft data schema and wireframes.

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 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.

Fewer PDFs, more accessible HTML, and an accelerated site migration

We successfully launched these templates, which created a low effort pathway to migrate top information collections to the redesigned Mass.gov. Thousands of policy documents, regulations, and reports now live in HTML, making them more searchable, accessible, and responsive.

Two sets of photos showing how auditor reports appeared on Mass.gov on desktop and mobile before and after the redesign.
On the legacy site, policies, reports, and regulations were almost always loaded as lists of PDFs, making their contents difficult to search, hard to read on mobile, and often inaccessible to screen readers. The redesigned, responsive template is now a well used tool to publish this content as responsive, accessible HTML.

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.

Designing a faceted search for government

Analytics showed that search was an essential tool used to find information from government agencies. We wanted search to work with the redesigned, ntuitive navigation to quickly get constituents to the content they needed, regardless of device.

Search engines and high traffic ecommerce sites use faceted search to allow visitors to narrow huge volumes of results. On Mass.gov we had a similar challenge, but a very different information architecture. I led the initial design and testing of a faceted search interface for government content.

Mockups of a desktop search interaction, with tabs at the top to filter results by category
Examples of the final prototype design developed after testing. I worked with engineers and product managers to determine what top-level categories were feasible with expected search software, and where we could be flexible.

Creating prototypes to test team assumptions

I worked with the product owner, engineers, and content strategists to create high-fidelity prototypes to test different approaches to a faceted government search. We had hypotheses for what top-level filtering categories may be, and that a toggle to exclude more technical content would be useful.

I led multiple usability tests with departmental stakeholders (who we suspected would be heavy users of these features) and members of the public. To ensure we tested the full interaction, I built clickable prototypes to test the full flow and designed an interview protocol to explore many kinds of search.

alty alty
The final mobile design proposed a progressive disclosure model to simplify filtering and allow constituents to opt in to more complex features.

We found that while our broad categories were solid, the toggle filter caused more confusion than clarity. In the final design, we chose to remove it.

Removing clicks with rich search results

To make search even more powerful, I evaluated the structured data behind page templates to propose a series of rich search previews depending on the type of content surfaced. I worked with Drupal engineers and front-end developers to understand what was feasible, and worked within design system patterns to propose a series of rich, responsive search result previews.

Desktop and mobile mockups of rich search results for different types of pages, including events, organizations, services, and documents.
Rich search results can surface key content that can reduce or eliminate clicks for users. I worked with the team to develop responsive rich search result templates for different types of pages hosted on the Mass.gov ecosystem.

Ultimately this validated our search design strategy. Future teams used this work as a blueprint to launch the faceted search now available today on Mass.gov.

Creating adaptable navigation components for departmental pages

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 series of design mockups showing a Mass.gov organization page with an opened sub navigation pattern on desktop and mobile.
The organizational navigation component needed to adapt to the needs of hundreds of departments, while being fully responsive and matching existing interaction and design patterns. I audited how departments prioritized their content and created a flexible pattern that could adapt to the needs of individual departments while also providing predictable patterns to site visitors.

Deploying a flexible component that extends design system guidance while offering thoughtful flexibility

First, I evaluated the original design specs to what agency authors had actually implemented, and requests for additional functionality. 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.

There are hundreds of organizations on Mass.gov, and I wanted to optimize for predictable experiences that followed design system guidance, while also offering flexibility for departments to adapt their navigation to their audiences.

I reviewed these findings with the team and then began designing and testing different sub navigation concepts. We landed on an optional sub navigation component that agency authors could 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.

Scaling user research practices to improve digital touchpoints

The redesign offered an opportunity to rethink digital experiences beyond Mass.gov, and scale research operations for the Commonwealth. I led many research initiatives during my time with the team,

Photos from research trips I faciliated to identify friction with digital touchpoints. 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.
I coordinated and facilitated research sessions to identify friction with digital service touchpoints. 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.

Research initiatives I supported 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.

Additional resources