Designing for Usability, Findability, & Efficiency — Inside the Mass.gov Redesign
Authored by Sarena Douglass
“Man I wish I could spend more time standing in line at the RMV!”
— No one, ever
It goes without saying that most people also wouldn’t care to spend countless minutes wading through pages of content to find that one form they need to renew their license online. The new Mass.gov is envisioned as a modern digital tool that, first and foremost, helps constituents get things done.
A website that serves 6.5+ million residents of all ages, backgrounds, and needs comes with its own challenges and opportunities. I have always felt that the most exciting part of a design project is at the very beginning, where there are a lot of moving parts, requirements to be pinpointed, and brains to be picked. I like to dig in and solve complex problems, while also bringing peoples’ visions to life. This project offers that opportunity more so than many others, because of the wide variety of audience segments as well as the challenges of working with a massive website with over 400 content authors.
Design Direction & Process
Design Gut Test
Following kickoff meetings to set the larger vision for the entire project, we delved into several specific design processes, the first of which is known as a design gut test. Yes, it is exactly what it sounds like. We polled stakeholders (MassIT and other departments and agencies) about their initial gut reaction to a set of screenshots we pulled off the web of other states’, businesses’, and totally out there “pie in the sky” websites.
Displaying each example at 20-second intervals gave participants just enough time to note their initial gut reaction before their analytical brains could hijack the conversation. We collated these responses and used it to have an honest discussion. Loved it or hated it, we wanted to know why. Too dark, too light, too cluttered, too boring — no comment was off-limits.
Brand Pillars and Mood Boards
Our team culled our findings from the design gut test and from stakeholder interviews we conducted, and compiled a list of adjectives. We bucketed them into logical groups and then had a working session with MassIT to refine them down into 4 brand pillars that would inform everything we did for the rest of the project. The primary brand pillars we established were helpful, modern, dignified, and human.
We then created mood boards to represent each brand pillar. This was the point at which we took verbal inputs and started translating them into visual elements. You’ve probably seen your fair share of mood boards on Pinterest and possibly even created some of your own. For those that don’t know what these are, mood boards are an arrangement of images, words, etc. intended to evoke a particular mood or style. They are a great way to quickly convey a design direction and get feedback before too much time is invested in going down the wrong path.
Creative Brief
To solidify what we had done to date and provide a path forward, we developed a creative brief. A creative brief is a document that informs and guides the work of the creative team throughout a project. Our creative brief formalized the brand pillars, documented key findings, and outlined expected direction on tone of voice, audiences, and visual elements.
Style Tiles and Components/Page Designs
All these inputs helped us move into developing the overall design direction of the site. We started this process by creating style tiles, which are a design deliverable made up of fonts, colors, and interface elements to communicate the visual aesthetic of a site. After several iterations, we distilled everything down into a single, cohesive direction.
To recap: From the brand pillars we created mood boards — which fed into the creative brief — this then informed a set of style tiles to nail down the design direction — and finally, this resulted in the development of components and page designs.
For Mass.gov, Velir has developed around 15–20 page templates and hundreds of components during the creative design process. At least 50% of those have been iterated on, after testing and further discovery. Throughout the process, we continue to refine and enhance these templates and components.
From Designs to Working Functionality
Our collaborative work process follows a quasi-agile style, which involves MassIT signing off on deliverables at certain points in a sprint. As the design team, our work feeds the rest of the development team, so it’s essential that we vet our proof of concept with our internal and external stakeholders as quickly and as often as possible. Once we get sign-offs on the design, the work is passed to our front-end development team. Any additional enhancements that are requested are submitted via a ticket in JIRA (a tool used for bug and issue tracking, and project management).
Pattern Lab
The Mass.gov digital solution supports over 275 agencies across two branches of government, a number of independent partners, constitutional officers, and more. A key piece of the project involved providing these separate entities with a shared library of elements and components that could be used to build their own site. The need for consistency cannot be stated enough. People tend to trust sites that are uniform and predictable. Even a minor change can be detected by the human eye, although it may be hard for most to articulate what exactly seems off. This is why so much of site design work is methodical and data-driven, and why style guides serve such a critical purpose.
Pattern Lab is a natural fit for any design project, especially ones like Mass.gov, where extensive reuse and consistency is a priority. Pattern Lab is a static site generator that works by stitching together UI components. In essence, it serves as a style guide for design elements, providing a library of components for re-use.
Designing in Code
A lot of the design for this project has taken place directly in the code. Oftentimes, I will sit with our front-end developer, explain what I am thinking, and we will work together to come up with a solution, rather than creating responsive mockups in Photoshop for every screen size. As I am fairly versed in HTML and CSS, I am also able to do design QA and make updates directly in the code once the development on a component or page is completed. This allows us to move more quickly, and eliminates a lot of back and forth that often happens between a designer and a developer to get something just right.
Other Design Considerations & Project Takeaways
Accessibility
Accessibility has been a critical component of the project given that we are dealing with a state government website that serves the general public. WCAG 2.0 Level AA compliance standards were the minimum requirement. From a design perspective, contrast is one of the biggest things we must account for. For example, a shade of yellow that we chose to use in the design did not have enough contrast to be used for text, but we were able to incorporate it into other elements on the site.
Iconography
Though this site doesn’t lend itself to flashy animations or gratuitous interactions, we were able to incorporate some fun icons into the design to add visual interest and provide a subtle nod to the human brand pillar. Most of the more playful icons are for high-level pages (such as Living, Working, Visiting, etc.). Some icons, particularly the more common ones such as those for emergency alerts (a bell), file downloads (file types), contact information (a phone), and jump-links (down arrows next to links) are paired with text as a quick reference to provide context.
Form vs. Function
The Mass.gov project has and continues to teach us the importance of using the principles of design to focus on the overall usability of the site, and the findability of relevant information. These qualities are important for any site, but in the case of Mass.gov, they are more important than anything else.
This project is astronomically large in terms of both the amount of content, the size and diversity of target audiences spanning a wide range of ages, education levels, and cultures, and the size of the authoring and editorial teams. Given the sheer number of people that use the site, and the fact that the majority of people visiting Mass.gov do so to get a specific task done — the goal for the site’s design, from our perspective, is to enhance and improve the user experience and site functionality as opposed to simply enabling a flashy visual aesthetic or fancy animations.
We’re excited by the work that we’ve contributed to this project and are confident that MassIT is on track to expand their digital framework as future needs arise to continue serving their constituents.
We’d love to hear your thoughts or feedback on redesigning government brands and their digital solutions. Please keep the discussion going below or Tweet Us! @Velir
