Policy Advisory  Web Design Guidelines

Date:	11/17/2020
Organization:	Executive Office of Technology Services and Security
Referenced Sources:	Website Domain Policy

Massachusetts Web Design Guidelines support and reflect the important guidance codified in the 21st Century Integrated Digital Experience Act. These design principles are intended to help teams across government align on important common goals and use the guidelines to be an evaluative lens for design and implementation decisions. Regardless of how it’s built, any Commonwealth web project should support these principles. 

The purpose of these guidelines is to: 

1. Uphold a high standard of quality and consistency for constituents’ experience interacting with the Commonwealth over the internet 

2. Build trust between constituents and the websites that provide government services 

3. Protect constituents from private websites masquerading as government websites for nefarious purposes 

Create a consistent look and feel

The visual design of our websites is the most immediate way that constituents will know they are official Massachusetts government websites they can trust. To the greatest extent possible, constituent-facing Commonwealth websites should include several standard foundational visual elements for consistency.

Tasks: 

Add the Brand Banner to your website  

• The banner identifies official Massachusetts government websites. It also helps visitors understand how to tell that a website is both official and secure. All constituent-facing websites must include a banner that looks like the reference implementation. 

Choose a variation of header and footer that works well for you.  

• If one of the standard header or footer variations works for you, please use one. If you need something new, please work with Massachusetts Digital Service to collaborate on one. 

Use the font Noto Sans, or choose a font that looks and acts similarly. The official typeface of Mass.gov is Noto Sans because it is: 

• Accessible and easy-to-read for users with all levels of language proficiency 

• Free and open-source, so agencies can produce print and digital design without barriers 

• Multilingual to cover the languages our constituents speak and read 

• Modern and consistent with the principles of the Mass.gov brand 

Download Noto Sans directly from Google Fonts or link to it via Mayflower Assets CDN.

Use the Mass.gov brand colors 

• Organizations with their own visual identities may extend this color palette with their unique brand colors, but we encourage you to make an effort to harmonize your palette with Mass.gov as much as possible. 

Resources: 

Reference implementations for all the elements described above are available at Mass.gov/mayflower. All Mayflower templates, stylesheets, and assets contributed by other Commonwealth projects are free and open source, in case you would like to use them in your projects. 

Build for the user 

We should be able to demonstrate that we know our users’ needs and are building for them, no matter their abilities or circumstance. 

It is far too easy to make assumptions about what people need from us and how they want to engage with our services, so we need to make sure we talk with users at every step of the way.  

Tasks:

1. Speak directly with your constituents and document their needs 

2. Build to address those needs 

3. Test along the way to make sure what you’re building really does meet their needs 

4. Meet Web Content Accessibility Guidelines (WCAG) 2.1. 

5. Be mobile responsive - provide the same functions and accessibility on a mobile device as on a desktop  

Resources:

There are many great approaches to doing this, below are just a few. 

• Watching constituents use Mass.gov (video) 

• 18F Methods for human–centered design 

• Usability Testing with Steve Krug (video)  

• 18F Accessibility guidelines 

Data-driven and constituent-centric 

Constituent-facing websites should aim to be “data-driven” and “constituent-centric.” Data-driven means decisions and priorities are grounded in facts and data, not just “gut” and personal experience. Constituent-centric means the voice of the user must be central to the design process and roadmap, proxies don’t count. To these ends, at minimum, websites should include (1) web analytics and (2) some way of accepting verbatim constituent feedback. 

Tasks:

1. Gather web analytics on your website through a tool like Google Analytics 

2. Solicit feedback from your visitors. This should ideally include both quantitative and qualitative feedback: 

   1. direct question with specific answer options. Examples: 

      1. Did you find what you were looking for? Yes or No (used on all Mass.gov pages) 

      2. Overall how easy or hard did you find it to complete the steps you needed on paidleave.mass.gov? Very easy, Easy, Neither easy nor hard, Hard, Very hard (used at the end of the application on paidleave.mass.gov) 

   2. An open-ended long answer question where we can gather word-for-word comments and feedback. Examples: 

      1. Please tell us what you were looking for (Mass.gov) 

      2. Tell us more about what made this easy or hard. What worked well for you? What could be better or clearer? (paidleave.mass.gov)