Reimagining What a State Website Can Be
By collaborating with the Executive Office of Technology Services and Security (EOTSS), we helped the Commonwealth of Massachusetts redesign its website Mass.gov. Using data, user research, and stakeholder inputs, we designed an intuitive and audience-driven site. To create a more cohesive experience, we improved content findability, search, and navigation for visitors. From a messaging perspective, we also helped Massachusetts unify its multi-channel messaging by writing a clear and enforceable Content Playbook for content editors and developers.
The Executive Office of Technology Services and Security (EOTSS) partnered with Velir to create a technology solution, governance model, and design framework that addressed the priorities of all its constituents.
The key challenges were:
- Crafting a sustainable, flexible, and scalable design and content system to unify Mass.gov
- Designing a content authoring experience to support 400 content authors
- Improving content findability, search effectiveness, and navigation
- Reforming a site hierarchy that was previously created by internal departments
- Eliminating confusing jargon and acronyms to make it easier for constituents to find what they needed quickly and efficiently
- Establishing a cohesive structure, look, and feel between different government agencies
We used stakeholder input, analytics, user testing, a town-hall style public forum, atomic design principles, the jobs-to-be done/taskonomy model, accessibility guidelines, and various front-end development tools and techniques to create a modern, intuitive, consistent, and user-driven website.
"We worked closely with the Velir design team every step of the way. Whiteboard sessions at Velir’s space, design reviews at the EOTSS offices, sharing design files – we really functioned as a large, combined UX team."
A focus on constituents and data
The primary purpose for redesigning Mass.gov was to provide, a “single face of government” to site visitors. Key business goals included not only improving content findability, effectiveness of search, and navigation, but also improving the experience for content authors. Two core philosophies were central to our efforts: a constituent-focused approach and data-driven design decision-making. These principles formed the basis for all activities and deliverables.
Our approach included:
- Building internal team engagement, trust, and ownership for the future-state Mass.gov
- Unifying multi-channel messaging (such as web and social) by aligning strategy, messaging, and tracking
- Creating a sustainable, flexible, and scalable design/content framework for Mass.gov and its sub-sites
- Writing a clear and enforceable Content Playbook that outlines content guidelines, workflows, and standards for content editors and developers
- Generating enthusiasm for digital transformation in the Massachusetts government
- Contributing to a positive public perception that the Massachusetts government was looking to directly engaging with its constituents
- Crafting a methodology that prioritized user research in digital transformation
Velir helped EOTSS completely rethink the information architecture, design, and user journeys that get users what they need on Mass.gov. We researched and tested solutions with real users until success was measurably achieved. We also provided guidance for organizing and streamlining more than 250,000 articles. In the end, Velir delivered a cohesive, scalable design Pattern Library that can be used as a foundation for future Mass.gov projects.
By advocating and supporting a new iterative design thinking mentality, we enabled the EOTSS team to launch a pilot version of the new site. Doing so allowed the Commonwealth to collect valuable user feedback significantly earlier than otherwise possible.
- Quick and efficient navigation to desired information
- Improved site functionality and user experience
- Site accessibility for constituents of all abilities
- An open source and Drupal-integrated Pattern Library
- Style Sheets: SASS (Systematically Awesome Style Sheets)
- Pattern Lab
- BEM (Block Element Modifier)
- CMS: Drupal 8