To create a new or improved constituent-facing digital experience, a number of design considerations should be addressed. The Design Definition of Done outlines the specific responsibilities of the designer to help prevent rework, minimize delays, and strengthen collaboration. It ultimately ensures that the standards of the Massachusetts Design System are met before a public-facing release.
Style guide
- All use of color, typography, and iconography follows the Massachusetts Design System style guides
Components
- The Massachusetts Design System components have been leveraged to the greatest extent possible
- Any custom components designed for the project include variants for default, hover, focus, selected, and disabled states as needed
- Any search driven or data display components include empty and error states
- There are no hidden elements with horizontal scrolling with the exception of data tables
- Tables have defined header rows or columns and avoid merged, split, or blank cells
Content
- Content considerations account for maximum character counts and how truncated content should be displayed
Responsive behavior
- Responsive display handling is clearly defined for any layout or functionality changes for mobile, tablet, or desktop users
- Min / max width requirements are clearly documented
Images (if applicable)
- All use of photography follows the Design System imagery guidelines
- Images have been resized to reduce file size and shared with engineering
- Alt text has been provided for all images that are not decorative
Page level documentation (if applicable)
- Every page has a clear H1 heading
- Headings follow a logical order (H1 > H2 > H3) and have been clearly documented for implementation
- Keyboard navigation and tab order intentions are clearly documented for development
Form requirements (if applicable)
- All form components (text input, text area, radio, checkbox, etc.) have persistently visible text labels
- When all fields or at least one field is required on a form "* indicates a required field" is shown above all fields, with an asterisk showing next to each required field label
- When all fields are optional: "All fields are optional" is shown above all fields
- Helpful error states messages have been written and included for all form inputs