Tallan Blog

Tallan’s Experts Share Their Knowledge on Technology, Trends and Solutions to Business Challenges

Designing & Developing The Award-Winning malegislature.gov

At this year’s National Conference of State Legislatures (NCSL) Legislative Summit in Los Angeles, the Commonwealth of Massachusetts took home the NALIT/LINCS Online Democracy Award for the best legislative website in the country. Tallan has worked hand-in-hand with the Massachusetts General Court for the better part of a decade, and this is the second time we have helped them take home this prestigious award. This is, however, the first time we’ve done it with a complete website redesign from beginning to end. This will be an exploration of some components of the redesign, and what helped make it such a successful effort.

ncsl-award-ceremony

Accessibility First

A key component of any government website is accessibility. Designers and developers need to make sure that all information is available to all users through the same interface. With Massachusetts, we approached every feature or idea by asking the question, “Can we make it accessible?” The answer to this question drove us to some unique design and development decisions. There were certainly cases where we determined that we couldn’t effectively make a feature accessible, so we needed to find alternative ways to achieve the same goal that the feature sought to achieve.

While it was a challenge, we knew it would be worth it in the long run. Designing and developing the site with accessibility in mind from the very beginning kept us from needing to go back and shoehorn a litany of fixes after launch. I’ve seen it done with accessibility as an afterthought, and it’s not pretty for anyone. It undermines core components of the design, and forces front-end hacks to make key features accessible. When it comes to accessibility on a brand new site, the words of Allan F. Mogensen are applicable: “Work smarter, not harder.”

Users First

From day one, the focus of the redesign was on the constituents. The General Court exists to serve the people of Massachusetts, and its website should follow suit. For the team, that meant taking concrete feedback gathered over the years and identifying what features and enhancements should be included in the new website. It also meant talking to stakeholders on the business side to ensure their needs are met, as a lot of employees of the Legislature use the website on a daily basis.

The very first item we wanted to address was search. While the old site had come to have a very robust search feature, access to the feature and presentation of results were not very intuitive. We decided that having search at the front and center of the homepage would allow users to access the information they were looking for easily. This included a typeahead feature for easier navigation. On the results page, we made faceted navigation more intuitive and easier to traverse. All of this elevated what was already a technically advanced search. Now, it’s a technically advanced search that’s easy to use.

The state budget has always been a focal point of the General Court’s website, and deservedly so. Users are intensely focused on the budget year after year, and we wanted to make sure it remained a highlight of the site. To that end, we recontextualized it as a fiscal year timeline. Each point on the timeline is a key milestone in the legislative process around the budget. This is highlighted on the homepage, as well as in the main navigation. From here, constituents can easily see where in the budget process the General Court is, and drill into each step to learn more.

A main business goal of the General Court was to increase constituent engagement. A feature called “MyLegislature” was part of the old design that provided some benefits, but we knew we could do better. We sat down and brainstormed ways we could make it better. Instead of just following bills, we made it so constituents could keep tabs on committees, legislators, and hearings, as well. We allowed for e-mail alerts when hearing details were changed. We also added a gamification component: users can earn badges based on actions they take throughout the site. This encourages users to fully explore the capabilities of malegislature.gov, including parts of the site they may not even know existed.

Mobile First

Mobile First

We knew from the start that the website should be fully responsive. Not only would it make access to information easier, but it’s something that users have come to expect from a modern website. With that in mind, we adopted a mobile-first design and development methodology. This meant that nothing was designed for a tablet or desktop experience before it was designed for mobile. On the development side, mobile views were styled first, and tablet and desktop views followed in order. This strategy tied directly to our accessibility goals. We had the chance to technically architect a site with accessibility in mind from the very beginning. This meant making feature and development decisions based on whether or not it was cost-effective to implement in a way that is optimally accessible to all users, including users of touch-enabled devices and assistive technology. Combining mobile first methodologies with accessibility in mind, we were able to optimize the site to allow all users to access all available features.

Reception

The reception inside the State House was overwhelmingly positive. Everyone was very excited to see the General Court keeping up with the times in terms of design and functionality. The public reception was also positive. Constituents – long-time users and new users, alike – lauded the new design of search by commenting on how much easier it was to find bills and laws. They also approved of the new, more modern visual design.

The new General Court website was submitted for the 2018 Online Democracy Award ahead of the annual NCSL Legislative Summit. There are a lot of great legislative websites out there, but with our suite of robust features around search, constituent engagement, and optimized accessibility and responsivity, Massachusetts was able to stand out and took home this prestigious prize.

The Future

From the success of this project, other publicly accessible projects have been met with similar receptions. For example, microsites for the Commonwealth Conversations initiative and the Senate Special Committee on Global Warming and Climate Change have acted as portals for constituent engagement. In the State House itself, Tallan has helped both the Senate and House Clerks’ Offices engage visitors and employees with touch-enabled public display boards. To this day, Tallan continues to help the General Court ideate and improve on existing features of its public website using the principles we established at the beginning.

Three Firsts

It may seem like putting accessibility first, users first, and mobile first would be a bit of a misnomer for at least two of the three strategies. However, this isn’t the case. Accessibility first is a strategic first. “Can we make it accessible?” is a strategic question. Users first is a UX design first. “How can we design this to best serve the users?” is a UX design question. Mobile first is a visual design and development first. “What will this look like in mobile, and how will it scale?” is a visual design and development question. It’s entirely possible to put all of these components together in a way where all three of them come first in their respective areas. This result is a website that is fully accessible, user-friendly, and fully responsive. That’s what we ended up within the case of the Massachusetts General Court, and that achievement is validated by the reception of the 2018 LINCS/NALIT Online Democracy Award at NCSL.


If you are looking to for more information on our Government Solutions, check out our Government Systems Page or Contact Us directly. You can also see us in person at one of many Events!

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\