Where do you start to redesign Mass.gov? Its atoms
When we set out to modernize Mass.gov, the first question we had to answer was: How are we going to build an enterprise-level website that isn’t outdated the moment it launches? For our UX team, the answer was clear: use atomic design.
Atomic design is a methodology for building online systems that takes the concept of modularity and applies it to the web. Instead of thinking about a website as simply a collection of HTML pages, in atomic design, pages are broken down into smaller components — called atoms, molecules, organisms, and templates — that make up each page. By designing from the smallest level, you can reuse those parts to build a more complex and flexible design system more easily.
The atomic design approach just made sense for us. As the single face of state government, we touch almost every aspect of life in Massachusetts — from taxes to state parks. We don’t just provide a few products or services, we offer thousands. Atomic design is an adaptive system that gives us the flexibility to incorporate the requirements of multiple state services with minimal development effort.
We’re using Pattern Lab, a tool developed by Brad Frost and Dave Olsen, to help us catalog every piece of the new site. There are a few things we think are pretty great about it:
1. It gives us a canonical home for all of the style and design elements on Mass.gov. That means if we update the color of a button, that change can automatically get pulled throughout the site.
2. It saves us time. Because we are starting with small components that we can reuse, it will take less time to develop new products or content types.
3. It’s consistent. In Pattern Lab, every component has 3 responsive display sizes. When a constituent loads a piece of our content, the CSS will run a media query to check what size their window is so it can automatically display the correct format. So whether you’re on a smartphone, a tablet, or a laptop, each component will respond in a predictable, consistent way.
4. It lets us go beyond the web. The atoms and molecules we’re building in Pattern Lab can be used on software, mobile apps, and more. That means that we can take our design language across every online interaction a constituent has with their state government — even if it’s run by a third party on the back end.
That last one gets us pretty excited. It’s a long way down the road, but really, this project is about bringing the whole ecosystem of government into a single experience. Imagine that it looked and felt the same no matter where you interacted with state government online!
Reach out! Or stay tuned for our next post — we went to CFA a few weeks ago, and we learned a lot from our very first user tests. We’re excited to share the results with you.
Interested in a career in civic tech? Find job openings at Digital Services.
Follow us on Twitter | Collaborate with us on GitHub | Visit our site
