Attachment D1 - User Interface Consideration.docx

This is a User Interface Consideration attachment for the Massachusetts Department of Elementary and Secondary Education (DESE) Website Modernization Services procurement (RFQ 27ITS81MP01). The document outlines design and development requirements for the DESE website redesign project. Successful bidders will be required to become proficient with the Massachusetts Design System available on Mass.gov and will receive Figma licenses to access a full toolkit of standard components. Bidders must customize components, maintain an EOE library of components specific to the DESE implementation, and provide a comprehensive Design Playbook that includes content organization, themes, templated components, and design element specifications. The project is closely linked to the ongoing School and District Profiles redesign initiative, which is being built in React using JavaScript/TypeScript in Snowflake. EOE will share Profiles design specifications with the selected bidder as a starting point, though the DESE website will utilize Drupal libraries provided through Mass.gov rather than React.

The attachment specifies the key UI components and design elements required across multiple page views and functionalities, including landing pages with banners, headers, navigation menus, utility menus, input fields, buttons, and callout links; School Finder pages featuring badges, checkboxes, chips, and tooltips; Organization Profile pages with breadcrumbs and text inputs; and Data Reports sections with accordions and input groups. Design considerations must account for desktop, tablet, and mobile viewing experiences. The bidder will be expected to use Figma and the Mass Design System as the foundation for creating the DESE website design while adhering to the established design specifications and component standards already developed for the Profiles application.