Mayflower Design System

Overview

Digital products are the front door of government agencies nowadays, accounting for more than 80% of the touch points with the general public. An intuitive, accessible, and consistent digital interface will improve the constituents experience and build trust with the public in their interactions with the state government.

Mayflower is a set of guidelines, best practices and tools aiming to help Massachusetts state government quickly and easily design and develop digital products that meet the public expectation. Originated as a UI library built with Patternlab as part of the Mass.gov redesign project, it has evolved into a more flexible and scalable design system that support many other state web properties.

Mayflower currently lives in an open-source monorepo and contains four main packages:

• Mayflower Assets - a set of branding assets including static branding assets, based style variables and component specific styles, shared by the various implementations.
• Mayflower React - a React component library
• Mayflower Patternlab - a Twig component library that is used to build the Mass.gov front-end Drupal theme.
• Mayflower Core - an official documentation on the core principles and elements that make up the Mayflower styleguide.

My Roles

As the product lead for the Mayflower Design System, I work with designers and developers in the research, design, development and documentation of the brand elements, design principles and UI components. I spearheaded the React component library using Storybook, as well as a tech-agnostic documentation site — Mayflower Core — catering to a broader range of Mayflower adoptions. On top of being a lead contributor, my jobs include doing both functional and code review for pull requests, upholding the design-to-development workflow, and managing weekly releases from the monorepo. I collaborate with designers, developers, and project managers to establish product roadmap, define quarterly goals, prioritize and slate new work, provide design consultancy and technical support to Mayflower consumers.

• UI Design
• UX Design
• DX Design
• Interaction Design