The Commonwealth of Massachusetts

image48

Client

EOTSS places our customers and constituents at the heart of everything we do. We offer responsive digital services and productivity tools to more than 40,000 state employees, who provide essential information and services to the citizens of the Commonwealth.


We also serve constituents, providing them with digital services and tools that enable taxpayers, motorists, businesses, visitors, families, and other citizens to do business with the Commonwealth in a way that makes every interaction with government easier, faster, and more secure.

Project

I collaborated with developers, project managers to establish a project roadmap that will help us define and establish the pillars of the Mass.gov brand. This Design system includes various products such as the Mass.gov style guide, Mayflower React component library, Mayflower Patternlab and the Mayflower system GitBook documentation.


I was primarily responsible for leading the design and implementation of the Mass.gov Style Guide. The information contained in this document is the product of our research, experience, and expertise, collected in one place to help detail and explain our decisions in creating Mass.gov.


Challenges

  • Multiple agencies rely on our code and designs to support their apps.
  • Defining the Mass.gov brand within the greater Commonwealth brand.
  • Resources, assets and documentation live in separate environments.

Tools & Technology

  • Invision
  • Sketch
  • GitBook, Git
  • Microsoft Office Suite (Excell / Word  / PowerPoint), Photoshop, Illustrator
  • HTML / JavaScript / CSS / React

Solution

Our team designed and developed a scalable design system (The Mayflower Design system). This is a collection of modular components, color theory, design principles and documentation that support and guide our design process. Mayflower makes it easier to build accessible, mobile-friendly websites with a consistent look and feel for the state of Massachusetts.

Process & Final Product

image49

Mass.gov Style Guide

This guide is an outline of the elements and strategies that make up the Mass.gov brand identity. Refer to it in order to help you create print or digital assets that will feel like they are in a similar style to Mass.gov and belong to the Commonwealth’s information ecosystem. Live demo

image50

Mayflower Patternlab

Leverage Mayflower component libraries to build fast, accessible, mobile-friendly, cross-browser compatible web products efficiently. Live demo

image51

Mayflower React

Mayflower-react is a React component library under the enterprise design system for the Commonwealth of Massachusetts. Live demo