Mass.gov: Constituent-Centric and Wicked Awesome on Drupal 8

Wicked Awesome Content

The Commonwealth of Massachusetts was faced with a difficult to use web experience that stood in the way of a constituent base that wanted to interact with government services through the web. The goal was set to create new primary face of Massachusetts government that was constituent centric to enable fast, easy, and wicked awesome interactions with state services.

Prior to the migration to Drupal 8, content on the Commonwealth’s old site (an outdated proprietary CMS platform) reflected its internal hierarchical structure. Information was neither intuitive nor easy for constituents to find. That meant, for example, that a visitor looking to start a business in Massachusetts had to visit four or more separate department sites in order to get started. The Commonwealth sought to improve the user’s experience by focusing on guiding the visitor through the various services the Commonwealth provides over helping them navigate the complexities often found in a massive state organization. 

Massachusetts Digital Service (MassGovDigital) had two core philosophies that drove their decision making: focus on the constituent experience and use data to support all decisions. They envisioned a unified user experience, where tasks like preparing to renew a driver’s license matched the ease of use of shopping on a major retail website. The MassGovDigital team was challenged to apply private-sector data analytics savvy, like defining and tracking constituent “conversions.” Gaining access to analytics at their fingertips was key for site authors to make fully-informed decisions to optimize their content for readers. A high-performing site search would ensure content findability. 

Building upon initial work done by Velir, Palantir.net, and Acquia in the pilot phase of the project, Mediacurrent, Last Call Media, and the MassGovDigital teams worked together to deliver the next chapter of the state’s digital future.

The end result represents a significant leap towards the goal of a new primary face of Massachusetts government that centers on constituents—enabling fast, easy, and wicked awesome interactions with state services.

Huge Performance Gains

For Mass.gov the primary stakeholders are the constituents who visit the website and the state organizations who publish content on and visit the website for aspects of their job. It receives upward of 15 million page views a month and changes to the site are released twice weekly by a team of developers. The traffic profile for the site is interesting, yet very predictable. The vast majority of the site traffic occurs between 8:00 am and 8:00 pm during the business week. Site editors are working during the business day (9:00 am - 5:00 pm), and releases happen after the work day is over (after 8:00 pm). On analytics graphs, there are always five traffic spikes corresponding with work days, except when there is a holiday—and then there are four.

One of the most critical ways Last Call Media enabled fast, easy, and wicked awesome interactions with state services was through careful attention to the site’s performance under its consistently heavy traffic load. Last Call Media assisted in making some pretty dramatic changes on both the front and back end of the site; every action we took was in service of either site stabilization or improving content “freshness.” State employees need to be able to publish content quickly, and constituents need fast access to the information that’s being published, without disruptions while they’re visiting the site. These two needs can be considered opposing forces, since site speed and stability suffers as content freshness (the length of time an editor waits to see the effect of their changes) increases. Our challenge was to find a way to balance those two needs, and our efforts here resulted in huge improvements in both the front and back end performance of the Mass.gov site. We achieved a 50% overall improvement in the back end performance, and a 30% overall improvement in the front end performance.  Read more about how Last Call Media did this here.

REAL ID, Real Answers: Streamlining the application process

In light of changing federal security standards surrounding the Real ID driver’s license/ID, the Massachusetts Registry of Motor Vehicles (RMV) was expecting a much higher than usual demand for license renewals, increasing the volume of calls and requests to RMV’s and call centers. Massachusetts citizens needed clear information to guide their decision between a Real ID or standard license. 

To solve these challenges, Mediacurrent partnered with the Commonwealth to design a tool to give residents a head start on applying or renewing a driver’s license before arriving to an RMV service center. With a decision tree that plainly answers the question, “Do I need a REAL ID?” constituents could get a better understanding of what to expect quickly and easily without having to call or wait at an RMV. 

Analytics Dashboards: Deep Data for Drupal Content Authors

Since quality content is driven by Mass.gov’s hundreds of authors, a key component to making content better for constituents was helping authors understand where they can improve. It’s now possible for hundreds of content authors to get their hands on actionable optimization data as part of the Drupal authoring experience, with no separate Google Analytics logins required.

Mediacurrent helped to create Analytics Dashboards that aggregate data from several sources— Google Analytics, SiteImprove, a Formstack form to capture user feedback (embedded on every page), and an API from the Drupal site that provides structural information— into an S3 Amazon storage system. ETL processes happen across these tools, priming the data to be consumed in different ways. Superset, an open source data visualization platform, functions as a top layer to surface data in a way that’s usable to authors.

Baked in to the Drupal editorial experience, the dashboard displays scores for page health, readability, findability, and action rate. The Mass.gov development and data analytics team receive regular analytics reporting at the page level. Plus, targeted recommendations for content improvements give editors the right tools to optimize underperforming content. 

A custom web endpoint ETL (extract transform load) pulls all the analytics data together — goals, submissions to form stack (for example, surveys asking for feedback to improve the website), Google Analytics information, and the descendant tree from Drupal.

Connecting Data and the Constituent Journey

A “conversion” occurs when a visitor to Mass.gov successfully completes the right activity Whether it be consuming the correct information, or accessing an outbound link to a service, tracking and measuring these visitor behaviors shows how effectively the Commonwealth of Massachusetts is aiding the constituents’ information gathering journey.

For more, check out our presentation from DrupalCon Seattle 2019 -- Mass.gov: A Guide to Data-Informed Content Optimization

Improving the Drupal Authoring Experience

If you can improve the authors’ ability to create and improve content, then the constituents will be better enabled for fast, easy, and wicked awesome interactions with state services. For Last Call Media, improving the authoring experience meant a better interface for communicating data about each piece of content. This data was a mix of content scoring and direct feedback from constituents. For example, a site visitor submits the feedback form (available on any page) and says whether they found the page to be helpful or not ("Did you find what you were looking for on this web page?"). The raw data goes into the calculation of their "grades.” The raw feedback comments also become visible in a tab in the editor interface, where the editor can focus in on what is or isn't working well about the page. Surfacing this data, along with making the interfaces more intuitive and the content easier to add and manage, enabled authors to more rapidly improve their content in a more targeted way. According to ForeSee results, the release of the reimagined authoring experience directly correlated with a never before seen increase in Customer Satisfaction.

Retheming Drupal’s default admin site was a critical opportunity to improve usability for authors. With a pattern library, Last Call Media applied these improvements at a large scale without the prohibitively high effort of creating designs for every single page. Paying extra attention to vertical spacing intervals Last Call Media created a clearly defined page hierarchy. At the same time, flipping the brand color scheme provided a user experience that’s consistent with the main site, yet unique.

Admin theme branding guidelines in the program Sketch.

By using a shared design vocabulary, these ideas could be applied site wide—even the pages that weren’t yet designed—to start development and apply the broad strokes to the theme, while the design team focused on some areas of the site that required more attention for usability. Faced with the challenge to deliver complex content with forms assembled from a number of differently-styled modules, form elements became a focus area. In addition to a unified styling system to improve usability for all form elements, horizontal lines now mark the end of one form element and the beginning of the next. Vertical lines do the same for nested re-orderable elements.

A Clear Path to Publish Content

Last Call Media also created a new and improved version of the Admin Toolbar to streamline navigation for content editors and creators. In addition to the Admin Toolbar module, a separate custom toolbar module specific to the Admin Theme was created to handle customizations. Now, buttons provide easy access back to the login page, with a separate button to return to the main site. A custom tab directs content editors to their most important pages. 

The final “home page” of the Admin theme for Mass.gov.

Before, there was no direct way for authors to quickly access their top two pages: the page to add content and the page to create new documents. To balance that functionality with a slim line top bar experience, buttons were added to those pages right to the tab menu.Last Call Media built a custom “Add Content” page with attentional experience in mind; Mass.gov, at the time of this project, had about 35 content types for an author to scroll through. 

Using the search box, content editors can filter the types of content they want to add.

A faster and easier authoring experience has allowed authors to keep improving and adding to their content. This keeps constituents in the know and continues to grow Mass.gov as a single source of all the information they need to interact with government services. Read more about how Last Call Media did this here.

Outcomes

• Leading the Way Among State Government Websites: Mass.gov placed 3rd nationwide in a review of 400 state government websites by ITIF and was recognized for performance in page-load speed, mobile friendliness, security, and accessibility.  
• Streamlining Constituent Experiences: Over 175,000 residents used the Real ID online decision tree (from March - November 2018), streamlining the process for determining if an in-person application for a new driver's license was necessary, improving constituent satisfaction while reducing calls to the Registry of Motor Vehicles.
• Constituent-Centric UX: Produced 23 content types using structured content to ensure consistent and constituent-centric UX.
• Huge Improvements in Both the Front and Back End Performance: We achieved a 50% overall improvement in the back end performance, and a 30% overall improvement in the front end performance all while maintaining content freshness.
• Empowering Content Authors With an Improved Drupal Admin UI: Updating, adding, and reviewing content moved from requiring technical expertise to being open and usable to non-technical subject matter experts. Now, hundreds of users login to Mass.gov each week to update, add, and review content performance to support the services their organization provides to the people of the Commonwealth.
• Streamlined On-boarding with Guided Tours: A series of guided tours support a refined publishing process, which accelerated on-boarding new content authors.
• Collecting Insights from User Feedback: Verbatim content feedback from constituents is now available to authors, and feedback helps create content performance scores in an improved Drupal admin interface.
• A Pattern Library: “Mayflower” facilitates a single face of government, providing a standard look, feel and use across all web properties.
• Drupal Splash Awards Winner: Recognized for "best theme"

Key Features and Functionality

Reimagined Authoring Experience

• Content Categories: Content types were organized into categories and jump-links to them can be found on the “Add Content” page.
• A Deeper Search: Custom search functionality sorts through both the content type names and the description text.
• Clear Visualization and Direction: A “thumbnail” example of each content type shows authors a sample preview. Cleaner and more strategically-positioned description texts give easy-to-follow direction.
• Extra Guidance: Links to Mass.gov’s document site provide additional information about each content type, including how it’s used, tips for creating new content, and links to live examples.
• Analytics Dashboards launched to further help authors improve content
• New welcome page experience for authors

Search and DevOps

• DevOps maturation in automated testing and containerization.
• ReactJS and Drupal: A better way to search
  

  Final Thoughts

  Currently, Mediacurrent and Last Call Media are the leading digital agencies working to transform Mass.gov’s digital platform and strengthen government-constituent interaction. This partnership provided technical architecture leadership to develop and support the new digital platform, by working closely with the MassGovDigital internal team and several other vendors.

  Over the past 12-months, by relying on constituent feedback and analytics and a commitment to collaboration and flexibility, the teams have been able to improve constituent satisfaction with Mass.gov month over month, according to data collected by Foresee.

  Why Mediacurrent and Last Call Media?

  • A React/Javascript application powers site search on search.mass.gov. React’s Javascript library has substantial stability and support, making it the ideal architecture choice to expand for future functionality. Mass.gov search was built using Create React App with React Redux and Redux Saga for managing routes and actions. Using Redux Saga allowed for various actions and events to be handled by generator functions. These generator functions helped to ensure the order of operations for actions that were dispatched in each component. Testing is handled with Jest, with visual regression testing using AVA.
    • Advanced training in emerging technologies like React
    • Drupal 8 expertise to maintain and innovate the platform
    • Analytics-minded partner to define a path to self-sufficiency

Additional Resources

• A/B Testing Mass.gov With Google Optimize [Mediacurrent blog]